Browse frontend UI, SEO, keyword research, payments and more. Check sources, prerequisites and agent-specific installation, or let your agent read the catalog.
skills
81
Categories
7
Agents
4
Let your agent find the skill.
Copy the prompt, add your task, and let your agent choose skills, check prerequisites and follow the installation guide.
Read the handoff prompt
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 UI16
Interfaces, design systems, accessibility and interaction.
Silicon Valley grade dark-mode design system with crisp micro-borders and zero visual bloat.
Claude Code · Cursor · Codex · Antigravity
Preview instructions
Selection brief
# 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
Hard restrictions that ban AI from generating repetitive 3-column cards and cliché stock layouts.
Claude Code · Cursor · Codex · Antigravity
Preview instructions
Selection brief
# 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
Dynamic viewport units (100dvh), native spring sheets, and notch safe-area handling.
Claude Code · Cursor · Antigravity
Preview instructions
Selection brief
# 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
Choose a deliberate visual direction and build distinctive production interfaces.
Claude Code · Cursor · Codex · Antigravity
Preview instructions
Selection brief
# 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
Review an existing interface against Vercel’s web interface guidelines.
Claude Code · Cursor · Codex · Antigravity
Preview instructions
Selection brief
# 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
Investigate loading, interaction and layout shifts using traces, network evidence and code.
Claude Code · Cursor · Codex · Antigravity
Preview instructions
Selection brief
# 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
Design native-feeling screens with semantic colors, platform controls and responsive layouts.
Claude Code · Cursor · Codex · Antigravity
Preview instructions
Selection brief
# 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
Use SwiftUI and Jetpack Compose controls from React through @expo/ui.
Claude Code · Cursor · Codex · Antigravity
Preview instructions
Selection brief
# 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
Implement native motion with Reanimated, gesture handoff, haptics and reduced-motion behavior.
Claude Code · Cursor · Codex · Antigravity
Preview instructions
Selection brief
# 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
# 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.
# 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.
# 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.
# 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.