Frontend UI — Skill | AI Marketplace

About

Builds accessible, responsive UI components with real design-system structure so pages look production-ready instead of generic AI chrome.

What it tells your AI to do

Read design tokens and existing componentsCreate or edit UI source filesAdd basic component tests

Source

@addyosmani on GitHubhttps://github.com/addyosmani/agent-skills/tree/main/skills/frontend-ui-engineering

Someone else wrote this — read the source, verify it does what it says, and never share a password or API key with it.

Try it

Build a TaskList component for our existing design tokens: checkbox, title, due date, empty state. Include keyboard support and a short a11y checklist.

Read the source

A skill is instructions your AI follows. Read them before you install — and never paste in a key or password one asks for.

SKILL.md

name: frontend-ui-engineering
description: Builds accessible, responsive UI components with real design-system structure so pages look production-ready instead of generic AI chrome.

Read the full instructions (31 lines)

# Frontend UI Engineering

Use when building or changing user-facing pages and components that must look production-quality.

## Principles
- Follow the project's design system tokens and spacing
- Meet WCAG for contrast, labels, keyboard, and focus
- Prefer colocated component folders with tests
- Avoid generic "AI aesthetic" (purple gradients, Inter everywhere, empty hero cards)

## Component layout
```
src/components/TaskList/
  TaskList.tsx
  TaskList.test.tsx
  use-task-list.ts
  types.ts
```

## Procedure
1. Inspect existing tokens, components, and layout patterns.
2. Sketch structure before styling.
3. Implement responsive layout mobile-first.
4. Add keyboard and screen-reader affordances.
5. Verify contrast and focus rings.

## Output
Component files, a short accessibility checklist, and any design-token gaps that still need a human decision.

Adapted from @addyosmani's approach: https://github.com/addyosmani/agent-skills/tree/main/skills/frontend-ui-engineering

Comments

No comments yet — be the first.

More like this

Design

Theme Factory

Use Claude Code to generate complete theme systems, dark mode, and design tokens in minutes. Consistent colors and typography automatically.

AnthropicView

Design

Visual Design

Use Claude Code to create social media graphics, icons, diagrams, and illustrations. Describe what you want, get PNG or SVG instantly.

AnthropicView

Design

Algorithmic Art

Create generative art, geometric patterns, and procedural visuals with Claude Code. Describe your vision, get production-ready SVG or canvas code.

AnthropicView