Frontend UI & Design Systems for AI Coding Agents

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

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

Selection brief

# 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

Selection brief

# 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

Selection brief

# 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

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

Selection brief

# 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

Selection brief

# 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

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

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

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

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

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

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

Selection brief

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

Selection brief

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

Selection brief

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

Selection brief

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

Selection brief

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

Selection brief

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

Selection brief

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