# AgentTaste skill directory
> Browse skills by task. Upstream entries link to verified source revisions; AgentTaste entries contain authored instructions.

JSON catalog: https://agenttaste.dev/skills.json?category=frontend-ui
Human directory: https://agenttaste.dev/skills?category=frontend-ui

## How to choose and use a skill
Choose and install the appropriate skills in my current project, then use them to complete the task I describe next.
Read https://agenttaste.dev/skills.json?category=frontend-ui.
Choose skills by their useWhen, inputs, prerequisites and expected outputs.
Read the full SKILL.md and any referenced upstream files before using a skill.
Explain the chosen skills and check that their prerequisites and access terms are met.
Use the installation instructions for the agent running this task.
Use the listed project installation command or the documented plugin setup. Inspect existing installed skills before modifying them, and keep companion rules and scripts together.
Do not invent packages, search metrics, credentials or compatibility. If a required tool is unavailable, say which prerequisite is missing.
Then apply the chosen skill to my task and verify the result against the project instructions.

## Frontend UI (frontend-ui)
Interfaces, design systems, accessibility and interaction.

### Linear Dark UI Standard (linear-dark-ui)
Enforces extreme restraint, deep zinc/obsidian surfaces, subtle 1px border glows, and crisp monospace details. Completely eliminates generic white cards and cheesy gradients.

#### Use when
- Build or refine a restrained dark interface.

#### Required inputs
- Frontend repository
- Page content and target viewports

#### Prerequisites
- Access to project source files and a browser for visual review.

#### Expected outputs
- Dark UI with reusable surface and typography tokens

Source: https://agenttaste.dev/skills/linear-dark-ui#instructions
Full SKILL.md: https://agenttaste.dev/skills/linear-dark-ui/SKILL.md
Access: Public. Upstream provider usage may have separate costs.
Agents: Claude Code, Cursor, Codex, Antigravity
Installation (Claude Code):
```text
curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/linear-dark-ui/SKILL.md' --output '.claude/skills/linear-dark-ui/SKILL.md'
```

### Anti-Generic UI Guardrails (anti-generic-components)
AI models love generating the same three feature cards with generic Lucide icons. This skill intercepts those patterns and forces asymmetric layouts, visual diffs, and live code previews.

#### Use when
- Review generated UI for repetitive layouts and visual clichés.

#### Required inputs
- UI source or screenshots
- Product content and design constraints

#### Prerequisites
- Access to the UI implementation.

#### Expected outputs
- Specific component and composition changes

Source: https://agenttaste.dev/skills/anti-generic-components#instructions
Full SKILL.md: https://agenttaste.dev/skills/anti-generic-components/SKILL.md
Access: Public. Upstream provider usage may have separate costs.
Agents: Claude Code, Cursor, Codex, Antigravity
Installation (Claude Code):
```text
curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/anti-generic-components/SKILL.md' --output '.claude/skills/anti-generic-components/SKILL.md'
```

### Stripe Fluid Micro-Interactions (stripe-micro-interactions)
Injects precision interaction standards: spring transitions, hover glows calculated via CSS variables, and layout stability.

#### Use when
- Implement subtle hover, focus and transition behavior.

#### Required inputs
- Interactive components
- Motion and accessibility constraints

#### Prerequisites
- Frontend project and a browser to verify keyboard and pointer interactions.

#### Expected outputs
- CSS interactions with reduced-motion support

Source: https://agenttaste.dev/skills/stripe-micro-interactions#instructions
Full SKILL.md: https://agenttaste.dev/skills/stripe-micro-interactions/SKILL.md
Access: Pro. Upstream provider usage may have separate costs.
Agents: Claude Code, Cursor, Codex
Installation (Claude Code):
```text
curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/stripe-micro-interactions/SKILL.md' --output '.claude/skills/stripe-micro-interactions/SKILL.md'
```

### Stitch Design System (Minimalist Taste) (stitch-design-taste)
Translates high-end human craft into strict algorithmic rules for AI agents. Combines 60/40 golden-ratio grid splits, subtle breathing animations, and hardware-accelerated SVG filter effects.

#### Use when
- Define a semantic design system for a new or existing interface.

#### Required inputs
- Product brief
- Design references and existing tokens

#### Prerequisites
- Read the project design constraints before applying the instructions.

#### Expected outputs
- Semantic typography, spacing and color rules

Source: https://agenttaste.dev/skills/stitch-design-taste#instructions
Full SKILL.md: https://agenttaste.dev/skills/stitch-design-taste/SKILL.md
Access: Pro. Upstream provider usage may have separate costs.
Agents: Claude Code, Cursor, Antigravity, Codex
Installation (Claude Code):
```text
curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/stitch-design-taste/SKILL.md' --output '.claude/skills/stitch-design-taste/SKILL.md'
```

### Silicon Valley High-Density Dashboard (b2b-saas-dashboard)
Teaches coding agents to produce high-density, professional enterprise dashboards inspired by Datadog, PostHog, and Stripe. No oversized empty padding or juvenile charts.

#### Use when
- Build a dashboard with dense tables and KPI panels.

#### Required inputs
- Metrics, table schema and workflows
- Target viewport constraints

#### Prerequisites
- Use supplied data and metric definitions.

#### Expected outputs
- Dashboard layout with readable metrics and reusable data components

Source: https://agenttaste.dev/skills/b2b-saas-dashboard#instructions
Full SKILL.md: https://agenttaste.dev/skills/b2b-saas-dashboard/SKILL.md
Access: Pro. Upstream provider usage may have separate costs.
Agents: Claude Code, Cursor, Codex
Installation (Claude Code):
```text
curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/b2b-saas-dashboard/SKILL.md' --output '.claude/skills/b2b-saas-dashboard/SKILL.md'
```

### iOS-Fluid Mobile Web App Standard (ios-fluid-mobile-web)
Eliminates annoying mobile web glitches: fixes address-bar jumpiness with dvh units, integrates touch-friendly bottom sheets, and respects home indicator safe areas.

#### Use when
- Implement a mobile web interface with safe-area-aware navigation.

#### Required inputs
- Mobile UI source
- Target browsers and device requirements

#### Prerequisites
- Mobile browser or emulator for viewport and touch validation.

#### Expected outputs
- Responsive mobile layout and sheet interactions

Source: https://agenttaste.dev/skills/ios-fluid-mobile-web#instructions
Full SKILL.md: https://agenttaste.dev/skills/ios-fluid-mobile-web/SKILL.md
Access: Public. Upstream provider usage may have separate costs.
Agents: Claude Code, Cursor, Antigravity
Installation (Claude Code):
```text
curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/ios-fluid-mobile-web/SKILL.md' --output '.claude/skills/ios-fluid-mobile-web/SKILL.md'
```

### Figma-to-Code 1:1 Precision Engine (figma-to-production-code)
Enforces strict translation rules when converting Figma frames into React components. Reuses project design tokens, extracts real vector SVGs, and prevents arbitrary hardcoded hex codes.

#### Use when
- Implement a provided Figma frame using project design tokens.

#### Required inputs
- Figma node or design export
- Frontend repository and reusable tokens

#### Prerequisites
- Figma file access or a complete design export.

#### Expected outputs
- Responsive components mapped to the supplied design

Source: https://agenttaste.dev/skills/figma-to-production-code#instructions
Full SKILL.md: https://agenttaste.dev/skills/figma-to-production-code/SKILL.md
Access: Pro. Upstream provider usage may have separate costs.
Agents: Cursor, Claude Code, Antigravity
Installation (Claude Code):
```text
curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/figma-to-production-code/SKILL.md' --output '.claude/skills/figma-to-production-code/SKILL.md'
```

### Reverse-Engineer Website Cloner (pixel-perfect-site-clone)
Teaches autonomous agents how to rebuild any reference website with forensic precision: extracts computed CSS styles, downloads layered assets, and builds responsive components section-by-section.

#### Use when
- Rebuild an authorized reference interface with reusable components.

#### Required inputs
- Reference URL or screenshots
- Target framework and viewports

#### Prerequisites
- Access to the reference UI and permission to reuse relevant assets.

#### Expected outputs
- Responsive implementation using inspected tokens and assets

Source: https://agenttaste.dev/skills/pixel-perfect-site-clone#instructions
Full SKILL.md: https://agenttaste.dev/skills/pixel-perfect-site-clone/SKILL.md
Access: Pro. Upstream provider usage may have separate costs.
Agents: Claude Code, Antigravity, Cursor
Installation (Claude Code):
```text
curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/pixel-perfect-site-clone/SKILL.md' --output '.claude/skills/pixel-perfect-site-clone/SKILL.md'
```

### Frontend design (anthropic-frontend-design)
Anthropic’s frontend design skill covers typography, composition, visual identity and implementation decisions for new or existing interfaces.

#### Use when
- Build a website, landing page or application interface.
- Reshape an existing UI around a specific visual identity.

#### Required inputs
- Product brief and audience
- Repository, framework and design constraints

#### Prerequisites
- Access to the project source files.
- Read the upstream skill and its license terms.

#### Expected outputs
- Implemented interface
- Coherent typography, layout and interaction choices

Source: https://github.com/anthropics/skills/blob/683bc88e56f3e09ba94f7055977f3d3aa499f202/skills/frontend-design/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/anthropic-frontend-design/SKILL.md
Access: Public. Upstream provider usage may have separate costs.
Agents: Claude Code, Cursor, Codex, Antigravity
Installation (Claude Code):
```text
npx skills add https://github.com/anthropics/skills/tree/683bc88e56f3e09ba94f7055977f3d3aa499f202/skills/frontend-design --skill frontend-design --agent claude-code
```

### Web interface guidelines (vercel-web-design-guidelines)
This upstream skill fetches the current Web Interface Guidelines and reviews the requested files for accessibility, interaction and usability issues.

#### Use when
- Audit an existing UI or review frontend changes.
- Check accessibility and interaction behavior.

#### Required inputs
- Files or a file pattern to review

#### Prerequisites
- Access to project files.
- Web access to fetch the upstream guidelines.

#### Expected outputs
- Findings with file and line references

Source: https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/web-design-guidelines/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/vercel-web-design-guidelines/SKILL.md
Access: Public. Upstream provider usage may have separate costs.
Agents: Claude Code, Cursor, Codex, Antigravity
Installation (Claude Code):
```text
npx skills add https://github.com/vercel-labs/agent-skills/tree/063bee94c3f4df8453406c830b0a7df0f2860278/skills/web-design-guidelines --skill web-design-guidelines --agent claude-code
```