Frontend Designer Skill: Accessible, Token-Driven Components

What is the frontend-designer skill?

The frontend-designer skill sits at skills/frontend-designer in a repository that bundles 24 skills across engineering, design, product and other domains. This one focuses on frontend work: reusable components, design systems, responsive layout and accessibility.

Unlike a pure review checklist, it ships working code. SKILL.md contains React and TypeScript component examples paired with CSS that reads from custom properties, and the folder adds four reference documents and three shell scripts.

What changes in your agent's output

• Components come with variants and sizes as props, such as primary, secondary and ghost buttons in sm, md and lg, instead of one-off class names.
• Interactive elements get a visible :focus-visible outline, and the Button carries a 44px minimum height for touch targets.
• Colors, spacing, type sizes, radii and shadows come from tokens like --space-4 and --color-primary rather than hardcoded values.
• Layouts start at 320px and grow with min-width media queries at 768px and 1024px.

Five principles it builds on

1. Accessibility first: WCAG 2.1 AA minimum, semantic HTML, keyboard navigation, focus management and color contrast.
2. Mobile-first responsive design with fluid typography and touch-friendly targets.
3. Performance by default: minimal CSS and JS, lazy loading, critical CSS and tree shaking.
4. Component-driven structure based on atomic design and composition over inheritance.
5. Alignment with a design system of tokens, a spacing scale, a type scale and a palette.

Who the frontend-designer skill is for

Best for

• Starting a component library or retrofitting tokens into a project that uses hardcoded values.
• Teams that want form inputs wired for screen readers, with labels, hints and error messages linked by ID.
• Quick scaffolding of a component, its CSS module, a test file and a Storybook story from one script call.

Not for

• Choosing a distinctive visual direction. The skill supplies neutral, systematic patterns. For a different angle, see frontend-design.
• Visual critique of a screenshot or mockup. The skill builds and audits code.
• Non-web targets. The patterns are CSS, HTML and JavaScript framework code, and the scripts are shell scripts.

Use it with UiChemy

The skill outputs framework components, which WordPress does not run as they are. Use its token file to agree on colors, spacing and type with your designer, then convert the Figma design with UiChemy Figma to WordPress. Click Get Started on uichemy.com. For a deeper token workflow, see design-token.

How to install Frontend Designer Skill: Accessible, Token-Driven Components

git clone https://github.com/jamesrochabrun/skills.git

1. Clone the repository

   Run git clone https://github.com/jamesrochabrun/skills.git. The skill sits in the skills/frontend-designer folder.

2. Copy the skill folder

   Copy skills/frontend-designer, with its references and scripts folders, to wherever your AI coding agent loads skills from. The repository is framed around Claude Code, so use its skills location there.

3. Run a script if you want one

   Open a terminal in the skill folder and run the generator, for example ./scripts/generate_component.sh Button, or the design system setup or accessibility audit script.

4. Ask for a component

   Request an accessible component, a token setup or a responsive layout, and the agent follows the patterns in SKILL.md.

Check that it loaded

Ask the agent for an accessible Button. The result should have variant and size props, a loading state with aria-busy, a 44px minimum height, a focus-visible outline and CSS built on custom properties.

Read the official instructions on GitHub

Key features

• Accessible button patternA Button with primary, secondary and ghost variants, three sizes, a loading state that sets aria-busy and disables the control, a 44px minimum height and a visible focus ring.
• Flexible card patternA Card with a default variant that adds a medium shadow, plus outlined and filled variants and four padding options. An interactive card gets button semantics, keyboard focus and a hover lift.
• Form input with linked messagesAn Input generates an ID, links its label, hint and error through htmlFor and aria-describedby, sets aria-invalid on errors and announces the message with role alert.
• Design token setCSS custom properties cover colors, a spacing scale from 4px to 64px, a type scale from 12px to 36px, font stacks, line heights, border radii and shadows.
• Responsive recipesMobile-first breakpoints at 768px and 1024px, fluid headings with clamp(), an auto-fit grid with a 280px minimum and a 12-column grid that stacks on small screens.
• Accessibility patternsExamples for a skip link to main content, focus handling in a modal with aria-modal, descriptive ARIA labels and polite live regions for status updates.
• Performance techniquesSections on critical CSS, lazy-loading images and code splitting keep the default output lean.
• Modern CSS techniquesContainer queries, auto-fit grids and custom-property theming with a data-theme dark override are shown as drop-in patterns.
• Three helper scriptsgenerate_component.sh creates a component with CSS, test and story. setup_design_system.sh creates tokens, base styles and docs. audit_accessibility.sh checks contrast, keyboard, ARIA, semantics and focus.

Frequently asked questions