# 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?access=free&category=frontend-ui
Human directory: https://agenttaste.dev/skills?access=free&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?access=free&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'
```

### 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'
```

### 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
```

### Web performance diagnosis (cloudflare-web-performance)
Cloudflare’s web-perf skill combines browser traces, network requests and source inspection to diagnose performance issues. It distinguishes collected measurements from unavailable tooling and does not guarantee a performance score.

#### Use when
- Investigate slow loading, interaction delays or layout shifts.

#### Required inputs
- Website URL and relevant project source
- Target device, symptoms and available browser tools

#### Prerequisites
- Browser performance tooling such as Chrome DevTools MCP for trace measurements.
- Source access is needed for implementation changes; field data requires a separate data source.

#### Expected outputs
- Measured findings and prioritized fixes
- Trace, network or source evidence with limitations

Source: https://github.com/cloudflare/skills/blob/86505e44f87d801aa1864a3c4109e9a8ae5c409f/skills/web-perf/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/cloudflare-web-performance/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/cloudflare/skills/tree/86505e44f87d801aa1864a3c4109e9a8ae5c409f/skills/web-perf --skill web-perf --agent claude-code
```

### Expo native screen design (expo-native-screen-design)
Expo’s native UI skill covers screen structure, styling, colors, icons, media and visual effects. Its routing, native controls and animation work are delegated to the corresponding Expo skills.

#### Use when
- Build or refine screens in an Expo app.

#### Required inputs
- Screen content and interaction requirements
- Expo SDK version and target platforms

#### Prerequisites
- Expo project and simulator or physical device.
- Install expo-ui for native controls, expo-router for navigation and expo-animation when motion is needed.

#### Expected outputs
- Native screen implementation
- Platform and responsive verification steps

Source: https://github.com/expo/skills/blob/7ddc1f5796996e5c7efe2fc3fa9168eb24e8dac1/plugins/expo/skills/expo-native-ui/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/expo-native-screen-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/expo/skills/tree/7ddc1f5796996e5c7efe2fc3fa9168eb24e8dac1/plugins/expo/skills/expo-native-ui --skill expo-native-ui --agent claude-code
```

### Expo native controls with @expo/ui (expo-native-controls)
Expo’s UI skill documents Host-wrapped native controls, grouped forms, sheets, pickers and platform-specific trees. It also distinguishes short native grouped lists from virtualized large-data lists.

#### Use when
- Implement native controls or replace community UI components in an Expo app.

#### Required inputs
- Expo SDK version and current UI components
- Target iOS and Android behavior

#### Prerequisites
- A compatible @expo/ui package and Expo SDK; the pinned guide’s universal layer requires SDK 56 or later.
- Install the full skill directory to retain its component-discovery script.

#### Expected outputs
- @expo/ui component implementation
- Platform checks and migration notes

Source: https://github.com/expo/skills/blob/7ddc1f5796996e5c7efe2fc3fa9168eb24e8dac1/plugins/expo/skills/expo-ui/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/expo-native-controls/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/expo/skills/tree/7ddc1f5796996e5c7efe2fc3fa9168eb24e8dac1/plugins/expo/skills/expo-ui --skill expo-ui --agent claude-code
```

### Expo animation and gestures (expo-native-animation)
Expo’s animation skill, developed with Emil Kowalski, sequences motion decisions around UI-thread execution, interruption, velocity and device performance, with reference material and examples.

#### Use when
- Build native animations or diagnose stuttering motion in an Expo app.

#### Required inputs
- Interaction and animation requirements
- Installed animation libraries and supported devices

#### Prerequisites
- Expo or React Native project with compatible Reanimated and Gesture Handler versions.
- A release build on a representative device for meaningful performance verification.

#### Expected outputs
- Animation or gesture implementation
- Reduced-motion behavior and device validation

Source: https://github.com/expo/skills/blob/7ddc1f5796996e5c7efe2fc3fa9168eb24e8dac1/plugins/expo/skills/expo-animation/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/expo-native-animation/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/expo/skills/tree/7ddc1f5796996e5c7efe2fc3fa9168eb24e8dac1/plugins/expo/skills/expo-animation --skill expo-animation --agent claude-code
```

### Addy Osmani frontend engineering (addy-osmani-frontend-engineering)
Addy Osmani’s frontend skill connects component architecture, state handling, accessibility, responsive layouts and visual polish with the project’s existing design conventions.

#### Use when
- Build or refine production-facing frontend components.

#### Required inputs
- UI task and audience needs
- Project source, design tokens and supported viewports

#### Prerequisites
- Frontend repository and existing design-system conventions.
- A browser and relevant accessibility checks are required to validate rendered behavior.

#### Expected outputs
- Implemented responsive components
- Interaction and accessibility validation

Source: https://github.com/addyosmani/agent-skills/blob/aeac41d4d005999432bb7312f7ff06383a91d59d/skills/frontend-ui-engineering/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/addy-osmani-frontend-engineering/SKILL.md

#### Popularity evidence
- 108,660 GitHub repo stars — addyosmani/agent-skills; checked 2026-10-20. Source: https://github.com/addyosmani/agent-skills/stargazers
- 62,218 skill installs (all time) — addyosmani/agent-skills / frontend-ui-engineering · skills.sh · all time; checked 2026-10-20. Source: https://skills.sh/addyosmani/agent-skills/frontend-ui-engineering
Adoption counts are not user ratings or guarantees of quality.
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/addyosmani/agent-skills/tree/aeac41d4d005999432bb7312f7ff06383a91d59d/skills/frontend-ui-engineering --skill frontend-ui-engineering --agent claude-code
```

### Emil Kowalski design engineering (emil-design-engineering)
Emil Kowalski’s design-engineering skill describes his approach to UI polish, component design, animation decisions and the interaction details that make software feel considered.

#### Use when
- Refine a working interface or discuss concrete design-engineering decisions.

#### Required inputs
- Specific interface task or question
- Screenshots, source and interaction constraints

#### Prerequisites
- A concrete question or interface task; invoking the skill without one only starts a conversation.
- Source and browser access are needed to implement and verify changes.

#### Expected outputs
- Design-engineering recommendations
- Relevant component or interaction changes

Source: https://github.com/emilkowalski/skills/blob/2d228630ba1446365f614a108cb8252f1feda202/skills/emil-design-eng/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/emil-design-engineering/SKILL.md

#### Popularity evidence
- 47,710 GitHub repo stars — emilkowalski/skills; checked 2026-10-20. Source: https://github.com/emilkowalski/skills/stargazers
- 367,700 skill installs (all time) — emilkowalski/skills / emil-design-eng · skills.sh · all time; checked 2026-10-20. Source: https://skills.sh/emilkowalski/skills/emil-design-eng
Adoption counts are not user ratings or guarantees of quality.
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/emilkowalski/skills/tree/2d228630ba1446365f614a108cb8252f1feda202/skills/emil-design-eng --skill emil-design-eng --agent claude-code
```

### Emil Kowalski animation review (emil-animation-review)
Emil Kowalski’s focused animation-review skill evaluates motion craft and performance, reporting specific issues rather than reviewing unrelated application code.

#### Use when
- Review an animation implementation or motion-related diff.

#### Required inputs
- Animation code and rendered behavior
- Interaction intent and supported devices

#### Prerequisites
- Animation source and a runnable example or recording.
- Explicitly invoke this review skill; meaningful performance claims require device or browser measurements.

#### Expected outputs
- Concrete motion review findings
- Specific fixes and validation criteria

Source: https://github.com/emilkowalski/skills/blob/2d228630ba1446365f614a108cb8252f1feda202/skills/review-animations/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/emil-animation-review/SKILL.md

#### Popularity evidence
- 47,710 GitHub repo stars — emilkowalski/skills; checked 2026-10-20. Source: https://github.com/emilkowalski/skills/stargazers
- 238,628 skill installs (all time) — emilkowalski/skills / review-animations · skills.sh · all time; checked 2026-10-20. Source: https://skills.sh/emilkowalski/skills/review-animations
Adoption counts are not user ratings or guarantees of quality.
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/emilkowalski/skills/tree/2d228630ba1446365f614a108cb8252f1feda202/skills/review-animations --skill review-animations --agent claude-code
```

### Emil Kowalski animation vocabulary (emil-animation-vocabulary)
Emil Kowalski’s animation-vocabulary skill is a reverse glossary for naming motion effects so a developer or designer can describe the intended interaction more precisely.

#### Use when
- Name a motion effect from a description or example.

#### Required inputs
- Description, reference or recording of the motion

#### Prerequisites
- A specific motion description or reference.
- This is a naming reference, not an animation implementation or performance test.

#### Expected outputs
- Matching animation terms
- Brief definitions and distinctions

Source: https://github.com/emilkowalski/skills/blob/2d228630ba1446365f614a108cb8252f1feda202/skills/animation-vocabulary/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/emil-animation-vocabulary/SKILL.md

#### Popularity evidence
- 47,710 GitHub repo stars — emilkowalski/skills; checked 2026-10-20. Source: https://github.com/emilkowalski/skills/stargazers
- 222,546 skill installs (all time) — emilkowalski/skills / animation-vocabulary · skills.sh · all time; checked 2026-10-20. Source: https://skills.sh/emilkowalski/skills/animation-vocabulary
Adoption counts are not user ratings or guarantees of quality.
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/emilkowalski/skills/tree/2d228630ba1446365f614a108cb8252f1feda202/skills/animation-vocabulary --skill animation-vocabulary --agent claude-code
```

### UI Skills baseline interface review (ibelick-baseline-ui)
Ibelick’s baseline-ui skill applies opinionated React and Tailwind interface constraints, preferring existing accessible primitives and consistent interaction patterns.

#### Use when
- Clean up a React/Tailwind interface or review a targeted UI file.

#### Required inputs
- UI source and existing component conventions
- Scope of the requested polish pass

#### Prerequisites
- A compatible frontend stack and project source.
- The guide prefers Tailwind, cn utilities, accessible primitives and motion/react when JavaScript motion is needed.

#### Expected outputs
- Quoted UI violations and rationale
- Targeted implementation suggestions

Source: https://github.com/ibelick/ui-skills/blob/747a47fdb6b405e5cbf268f7c410123930455157/skills/baseline-ui/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/ibelick-baseline-ui/SKILL.md

#### Popularity evidence
- 9,877 GitHub repo stars — ibelick/ui-skills; checked 2026-10-20. Source: https://github.com/ibelick/ui-skills/stargazers
Adoption counts are not user ratings or guarantees of quality.
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/ibelick/ui-skills/tree/747a47fdb6b405e5cbf268f7c410123930455157/skills/baseline-ui --skill baseline-ui --agent claude-code
```

### UI Skills accessibility fixes (ibelick-accessibility)
Ibelick’s accessibility skill gives targeted HTML and interaction review rules for controls, forms, dialogs and other focus-sensitive interfaces.

#### Use when
- Review or fix accessibility in an interactive frontend component.

#### Required inputs
- Rendered control and source
- Expected keyboard and assistive-technology behavior

#### Prerequisites
- Access to the rendered UI and relevant source.
- Use browser, keyboard and assistive-technology checks where appropriate; the skill alone is not a conformance certification.

#### Expected outputs
- Specific accessibility findings
- Targeted fixes and interaction checks

Source: https://github.com/ibelick/ui-skills/blob/747a47fdb6b405e5cbf268f7c410123930455157/skills/fixing-accessibility/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/ibelick-accessibility/SKILL.md

#### Popularity evidence
- 9,877 GitHub repo stars — ibelick/ui-skills; checked 2026-10-20. Source: https://github.com/ibelick/ui-skills/stargazers
Adoption counts are not user ratings or guarantees of quality.
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/ibelick/ui-skills/tree/747a47fdb6b405e5cbf268f7c410123930455157/skills/fixing-accessibility --skill fixing-accessibility --agent claude-code
```

### UI Skills motion performance (ibelick-motion-performance)
Ibelick’s motion-performance skill reviews CSS and JavaScript animation for layout thrashing, scroll-linked work, filters and measurement patterns within the existing stack.

#### Use when
- Investigate a stuttering animation or review motion-related source.

#### Required inputs
- Animation code and performance symptoms
- Target device and available profiling evidence

#### Prerequisites
- A runnable animation and its source.
- Browser or device profiling is required to confirm improvements; no library migration is implied.

#### Expected outputs
- Concrete motion-performance findings
- Targeted fixes and follow-up measurements

Source: https://github.com/ibelick/ui-skills/blob/747a47fdb6b405e5cbf268f7c410123930455157/skills/fixing-motion-performance/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/ibelick-motion-performance/SKILL.md

#### Popularity evidence
- 9,877 GitHub repo stars — ibelick/ui-skills; checked 2026-10-20. Source: https://github.com/ibelick/ui-skills/stargazers
Adoption counts are not user ratings or guarantees of quality.
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/ibelick/ui-skills/tree/747a47fdb6b405e5cbf268f7c410123930455157/skills/fixing-motion-performance --skill fixing-motion-performance --agent claude-code
```