Find the skill for your next task.

AgentTaste instructions

---
name: linear-dark-ui
description: "Enforces extreme restraint, deep zinc/obsidian surfaces, subtle 1px border glows, and crisp monospace details. Completely eliminates generic white cards and cheesy gradients."
---

# SKILL: Linear Dark UI Standard
## Intent
Enforce modern, restrained, dark-first UI aesthetic inspired by Linear, Stripe, and Vercel.
## Core Rules
1. Never generate solid white cards or neon gradients on dark surfaces.
2. Use zinc-900/50 (#121215) for card surfaces with 1px border (zinc-800/80).
3. Foreground text must use high-contrast white (#f4f4f5) for titles and muted zinc-400 (#a1a1aa) for body text.
4. Accent colors should be applied as surgical micro-indicators (badges, dot indicators, active borders), not huge backgrounds.
5. Interactive states: hover effects must be subtle (surface shift from zinc-900 to zinc-800/80), never jarring scale transforms.

AgentTaste instructions

---
name: anti-generic-components
description: "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."
---

# SKILL: Anti-Generic UI Guardrails
## Forbidden Patterns
- ❌ Do NOT render 3 identical cards side-by-side with generic icons (rocket, star, shield).
- ❌ Do NOT use generic purple-to-pink gradient hero text.
- ❌ Do NOT generate decorative badges without functional status.
## Required Replacements
- ✅ Use asymmetric bento grids where the primary feature gets 65% width.
- ✅ Replace stock icons with actual interactive miniature widgets or code previews.

AgentTaste instructions

---
name: stripe-micro-interactions
description: "Injects precision interaction standards: spring transitions, hover glows calculated via CSS variables, and layout stability."
---

# SKILL: Stripe Fluid Micro-Interactions
## Interaction Physics
1. Transition timing function: use cubic-bezier(0.16, 1, 0.3, 1) for all spring interactions.
2. Only animate composite properties: transform and opacity. Never animate width, height, or margin.
3. Card hover light: track cursor position with CSS variables (--mouse-x, --mouse-y) for radial glow.

AgentTaste instructions

---
name: stitch-design-taste
description: "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."
---

# SKILL: Stitch Design System
## Visual Philosophy
Deliver a premium, anti-generic aesthetic that looks designed by a senior product designer.
## Elevation Tokens
- Level 0 (Canvas): #09090b
- Level 1 (Card Container): #121215 with 1px border #27272a
- Level 2 (Elevated Widget): #18181b with 1px border #3f3f46
## Animation Restraint
Use perpetual micro-motion sparingly: subtle breathing glow (opacity 0.05 to 0.15 over 6s ease-in-out). Never oscillate position or scale.

AgentTaste instructions

---
name: b2b-saas-dashboard
description: "Teaches coding agents to produce high-density, professional enterprise dashboards inspired by Datadog, PostHog, and Stripe. No oversized empty padding or juvenile charts."
---

# SKILL: Silicon Valley High-Density Dashboard
## Dashboard Rules
1. Information Density: Avoid excessive whitespace in tables and lists. Target 36px-42px row heights.
2. Numbers: Always format numbers with tabular figures (tnum) to prevent jumping columns.
3. Status Indicators: Use compact pill badges (height 20px, font-size 11px) with dot pulses for active states.
4. Metric Cards: Place primary numeric value prominently in font-bold text with 12px secondary delta badge beside it.

AgentTaste instructions

---
name: ios-fluid-mobile-web
description: "Eliminates annoying mobile web glitches: fixes address-bar jumpiness with dvh units, integrates touch-friendly bottom sheets, and respects home indicator safe areas."
---

# SKILL: iOS-Fluid Mobile Web App Standard
## Mobile Layout Rules
1. Never use 100vh for full-screen mobile containers. Always use 100dvh or min-h-dvh to prevent iOS Safari toolbar clipping.
2. Safe Areas: Add env(safe-area-inset-bottom) and env(safe-area-inset-top) padding to fixed navbars and sheets.
3. Tap Targets: Ensure interactive buttons and tabs have a minimum hit target of 44x44px.
4. Input Zooming: Keep form input font-size >= 16px to prevent automatic Safari viewport zooming.

AgentTaste instructions

---
name: figma-to-production-code
description: "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."
---

# SKILL: Figma-to-Code 1:1 Precision Engine
## Conversion Guardrails
1. Map Figma color styles directly to project Tailwind tokens (e.g. zinc-900, emerald-400), never arbitrary hex codes.
2. Maintain exact padding/margin rhythm using standard 4px grid steps (p-4, gap-3, py-6).
3. Do not import third-party icon packages when SVGs exist in the Figma node hierarchy.
4. Verify responsive behavior: default to mobile-first flex/grid layouts that scale cleanly to desktop.

AgentTaste instructions

---
name: pixel-perfect-site-clone
description: "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."
---

# SKILL: Reverse-Engineer Website Cloner
## Extraction Methodology
1. Foundation First: Extract global design tokens (palette, typography scale, container widths) before building individual components.
2. Decompose by section: Keep builder prompts under 150 lines to maintain extreme detail accuracy.
3. Extract real content & assets: Never rely on placeholder lorem ipsum or mock shapes when original assets can be inspected.
4. Verify sub-pixel alignment across both mobile and desktop viewports.

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