Build and polish production-ready frontend interfaces using Emil Kowalski's design-engineering approach. Use when creating or restyling web pages, components, or apps; reviewing UI polish; adding or fixing animations and transitions; choosing UI primitives; improving mobile touch behavior; or stress-testing layouts with real-world data. Covers HTML/CSS/JS, React, Vue, and other web frameworks.
Frontend scaffolding for Magento 2: themes, RequireJS modules, Knockout components, LESS/CSS, transactional email templates, static asset wiring. Use to add frontend behaviour or a theme. Detects Luma, Hyva, or a custom theme and generates matching scaffolds. For Swissup Breeze stores (magento2-tools:context theme.breeze) defer theme creation to magento2-tools:breeze-theme and widget/JS work to magento2-tools:breeze-adapt. For a CMS widget (etc/widget.xml) use magento2-tools:widget.
Builds UI that holds up at every width, in both themes, with real data, and for someone on a keyboard. Use when a page or a component is being added or restyled, when a layout breaks on a narrow screen or in dark mode, or when a view has no empty, loading or error state. Auto-triggers on: "build a component", "add a page", "style this", "make it responsive", "dark mode", "the layout breaks"
Activate when working on the React UI in `frontend/`, components, CSS/styling, the SSE client, or anything in `frontend/src/`. Triggers on frontend/ directory work, React/TypeScript component changes, or UI discussions.
Use for frontend, web UI, UX, visual design, styling, layout, animation, mockups, performance, accessibility, or SEO work. Routes design references, real-browser audits, UI/UX lookups, design operating guidance, and a visual/copy AI-slop taxonomy with a scanner for de-slop audits and pre-ship scans; includes optional framework-specific lanes such as React tooling. Also triggers on: kill AI slop, de-slop, remove the AI look, looks AI-generated, templated.
Frontend components and Tailwind. Use when creating, reviewing, refactoring, splitting, or organizing React components, shared components, component folders, or Tailwind classes.
Expert frontend engineering for scalable web applications. Use when writing HTML, CSS, JavaScript, TypeScript, React, Next.js, or any UI code — components, state management, rendering strategy, performance optimization, and accessibility.
MUST USE for ANY frontend, web UI, UX, or visual work — building, styling, or redesigning pages/components, React project setup, performance audits, design QA. Routes three rulesets: design (anti-slop taste router over 12 taste skills + 70 brand DESIGN.md refs — Apple, Stripe, Linear, Notion, Vercel, Claude, Nike, Aside — plus composable interaction mechanics and the React dev tooling gate: react-grab, react-scan, react-doctor), perfection (Lighthouse 100 in every category via real Playwright Chromium audits, NEVER the lighthouse CLI, never by weakening UX), ui-ux-db (searchable 50+ styles, 97 palettes, 57 font pairings, 99 UX guidelines). Triggers: frontend, UI, UX, design, redesign, styling, layout, animation, motion, interaction, interaction mechanics, state, reduced-motion, taste, premium, luxury, minimal, brutalist, Awwwards, anti-slop, polish, DESIGN.md, mockup, react setup, react-scan, react-doctor, lighthouse, performance, Core Web Vitals, LCP, CLS, INP, SEO, accessibility, a11y, WCAG, audit my site, make this faster, color palette, font pairing, looks generic, make it pretty, like X brand, clone site, clone from url.
Use when building UI components, pages, or features - guides Claude through the approved frontend stack (Next.js 15, React 19, Shadcn, Tailwind) with design-first workflow for complex UIs, enforcing patterns and quality standards
112mo agoReviewMountCreate a free account to mount
Generate standalone HTML using any stored UI system; falls back to base-ui (glassmorphism, no deps) when none is registered. Component API, alert patterns, document shell, accessibility.
A folder with a SKILL.md file: a name, a description of when to use it, and instructions. Claude loads a skill only when the task matches its description.
How do I use one I find here?
Copy the folder into your project's .claude/skills/ directory, or into your own skills folder to use it everywhere.
What do the warnings mean?
We read each file for commands that read secrets, delete things or pipe downloads into a shell, and say so before you copy it. No warning is not a promise that a file is safe.
Which skills worked for people?
Open a skill to see its discussion. Reports from people and their agents are coming.