AI agent skills for frontend and UI work
Frontend skills are how you stop an agent from inventing a fourth button style. The ones that earn their place carry a real point of view — spacing scale, state coverage, what a disabled control should look like — instead of listing CSS properties. Accessibility is the honest test: a skill that never mentions focus order or contrast is a styling skill, not a UI skill.
People land here searching for “claude code frontend skill”, “agent skill for react components”, “tailwind skill”.
52 frontend and UI work skills Refine in search →
-
pedroiff0 Skill Frontend Design SystemsArchitect and build production-grade web interfaces with modern design systems: Tailwind CSS v4, Shadcn UI primitives, Radix UI, dark mode tokens, and accessible WCAG AA components.
-
felixgeelhaar Skill Frontend ExpertSenior frontend engineer. Design-system architecture, component API, design tokens, CSS, ARIA, framework choice, Core Web Vitals, type-safe contracts. Engineering UI (distinct from ux-expert).
-
aiskillstore Bundle Web Component DesignMaster React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
-
wshobson Bundle Web Component DesignMaster React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
-
jantoniofc Bundle Web Component DesignMaster React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
6 -
onfire7777 Bundle Web Component DesignMaster React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
-
fluxonlab Skill Web Component DesignMaster React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
-
gabrielmoreira Skill Oma FrontendFrontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment. Use for UI, component, page, layout, CSS, Tailwind, and shadcn work.
17 -
kintsugi-programmer Bundle Web Component DesignMaster React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
0 -
oimiragieo Bundle Sample Agents Web Component DesignMaster React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
0 -
luokai0 Bundle Frontend Design SystemsSystematic approach to building consistent, maintainable frontend UI components with design systems and component libraries
10 -
majiayu000 Bundle Frontend Design SystemsSystematic approach to building consistent, maintainable frontend UI components with design systems and component libraries
567 -
tools-only Bundle Web FrontendSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
7 -
oyi77 Skill Frontend UI DesignUse when design and build production-grade UI components using React, Vue, or vanilla HTML/CSS. Create responsive layouts, design systems, and accessible interfaces. Use when designing and build production-grade ui components using react, vue, or.
10 -
chainlesschain Bundle Frontend DesignDesign UI components, layouts, and responsive interfaces with accessibility
-
tomevault-io Bundle UI CSS PatternsUI/CSS design patterns and component reference for the RAPID frontend, covering color semantics, button variant selection, status badge colors, dark mode, spacing, and component inventory. Use when implementing UI components, choosing button variants or colors, styling with Tailwind CSS, or checking available shared components. Use when this capability is needed.
-
cavinhuang Skill UI Component GeneratorUI 组件生成器
- tomevault-io Bundle Frontend UI Design
Design or implement production-ready frontend UI components and screens with strong visual direction, layout rhythm, spacing hierarchy, accessibility, and reusable structure. Use when the user wants standard UI build or redesign work, including fixing crowded or structurally weak layouts, not design-system governance or post-direction polish only. Use when this capability is needed.
-
ankurjain1121 Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality
-
aws-samples Bundle UI CSS PatternsUI/CSS design patterns and component reference for the RAPID frontend, covering color semantics, button variant selection, status badge colors, dark mode, spacing, and component inventory. Use when implementing UI components, choosing button variants or colors, styling with Tailwind CSS, or checking available shared components.
-
saturate Skill Frontend UI EngineeringGuides frontend UI development with component hierarchy, separation of concerns, accessibility as requirement, and performance awareness. Framework-agnostic, detects stack from project. Triggers chrome-devtools for verification. Use when building UI, frontend development, creating components, UI engineering, component architecture, building pages, or when working on frontend code.
- tomevault-io Bundle Frontend Design 111
Design and build production-ready frontend interfaces with design systems, responsive layouts, accessible components, and dark mode support. Use when this capability is needed.
-
chris2ao Bundle UI UXUI/UX design and quality system: aesthetic direction, component architecture, performance, and visual QA with a coordinated agent team
-
tranhieutt Bundle Frontend Design---
How to install a frontend and UI work skill
- Compare the skills. Read the frontend and UI work skills below — each page shows the full SKILL.md, its safety verdict, and the capabilities it declares.
- Install it. Run npx skillmds@latest add <owner>/<name>. The CLI writes the skill into every agent directory it detects, or use --agent to pin one.
- Use it. Restart your agent. It loads the skill on demand the next time you ask for something that matches — you do not have to name the skill.
What makes a good frontend and UI work skill?
Frontend skills are how you stop an agent from inventing a fourth button style. The ones that earn their place carry a real point of view — spacing scale, state coverage, what a disabled control should look like — instead of listing CSS properties. Accessibility is the honest test: a skill that never mentions focus order or contrast is a styling skill, not a UI skill.
Every skill listed here is a plain SKILL.md file in the format Anthropic documents for Agent Skills, read unchanged by Cursor, OpenAI Codex and 60+ agents. Each passes a safety review before it is publicly listed; the verdict and declared capabilities are on every skill's page.
Frequently asked questions
What is an agent skill for frontend and UI work?
Frontend skills are how you stop an agent from inventing a fourth button style. The ones that earn their place carry a real point of view — spacing scale, state coverage, what a disabled control should look like — instead of listing CSS properties. Accessibility is the honest test: a skill that never mentions focus order or contrast is a styling skill, not a UI skill.
Do frontend skills lock me into a framework?
Some do by design — a React or Svelte skill is more useful for being specific. Others are framework-agnostic and cover layout, typography and accessibility, which transfer. The skill's frontmatter description names its scope.
Which agents can use these frontend and UI work skills?
Any agent that reads SKILL.md files: Claude Code, Claude.ai, Cursor, OpenAI Codex, Windsurf, OpenCode and 60+ others. The format is not vendor-specific, so the same file works everywhere — each agent just keeps its skills in a different directory, listed at /agents.
Are these frontend and UI work skills free?
Yes. Searching, reading and installing skills on SkillMD is free and needs no account. Individual skills carry their own licence, shown on each skill's page.