{
  "schemaVersion": 1,
  "name": "AgentTaste",
  "url": "https://agenttaste.dev/skills?category=frontend-ui",
  "filters": {
    "category": "frontend-ui",
    "agent": "all",
    "source": "all",
    "q": ""
  },
  "total": 27,
  "count": 10,
  "endpoints": {
    "json": "https://agenttaste.dev/skills.json?category=frontend-ui",
    "markdown": "https://agenttaste.dev/skills.md?category=frontend-ui",
    "llms": "https://agenttaste.dev/llms.txt"
  },
  "filterContract": {
    "category": [
      "all",
      "frontend-ui",
      "seo",
      "keyword-research",
      "payments",
      "conversion",
      "development",
      "launch"
    ],
    "agent": [
      "all",
      "claude-code",
      "cursor",
      "codex",
      "antigravity"
    ],
    "source": [
      "all",
      "agenttaste",
      "upstream"
    ],
    "q": "Literal text search, all whitespace-separated terms must match, maximum 200 characters."
  },
  "agents": [
    {
      "id": "claude-code",
      "name": "Claude Code",
      "directory": ".claude/skills"
    },
    {
      "id": "cursor",
      "name": "Cursor",
      "directory": ".agents/skills"
    },
    {
      "id": "codex",
      "name": "Codex",
      "directory": ".agents/skills"
    },
    {
      "id": "antigravity",
      "name": "Antigravity",
      "directory": ".agents/skills"
    }
  ],
  "categories": [
    {
      "id": "frontend-ui",
      "name": "Frontend UI",
      "description": "Interfaces, design systems, accessibility and interaction.",
      "count": 10
    },
    {
      "id": "seo",
      "name": "SEO & GEO",
      "description": "Crawlability, on-page SEO, structured data and AI search.",
      "count": 0
    },
    {
      "id": "keyword-research",
      "name": "Keyword research",
      "description": "Find search demand, validate intent and group opportunities.",
      "count": 0
    },
    {
      "id": "payments",
      "name": "Payments",
      "description": "Checkout, subscriptions, webhooks and payment migrations.",
      "count": 0
    },
    {
      "id": "conversion",
      "name": "Copy & conversion",
      "description": "Landing page copy, clear documentation and conversion flows.",
      "count": 0
    },
    {
      "id": "development",
      "name": "Engineering",
      "description": "Architecture, TypeScript rules and React performance.",
      "count": 0
    },
    {
      "id": "launch",
      "name": "Launch & growth",
      "description": "Product launches, competitor research and distribution.",
      "count": 0
    }
  ],
  "skills": [
    {
      "slug": "linear-dark-ui",
      "name": "Linear Dark UI Standard",
      "category": "frontend-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.",
      "author": "@AgentTaste",
      "access": "public",
      "source": {
        "kind": "agenttaste",
        "url": "https://agenttaste.dev/skills/linear-dark-ui#instructions"
      },
      "url": "https://agenttaste.dev/skills/linear-dark-ui",
      "skillMdUrl": "https://agenttaste.dev/skills/linear-dark-ui/SKILL.md",
      "agents": [
        "claude-code",
        "cursor",
        "codex",
        "antigravity"
      ],
      "useWhen": [
        "Build or refine a restrained dark interface."
      ],
      "inputs": [
        "Frontend repository",
        "Page content and target viewports"
      ],
      "outputs": [
        "Dark UI with reusable surface and typography tokens"
      ],
      "prerequisites": [
        "Access to project source files and a browser for visual review."
      ],
      "installation": {
        "claude-code": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/linear-dark-ui/SKILL.md' --output '.claude/skills/linear-dark-ui/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/linear-dark-ui#installation",
          "directory": ".claude/skills/linear-dark-ui"
        },
        "cursor": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/linear-dark-ui/SKILL.md' --output '.agents/skills/linear-dark-ui/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/linear-dark-ui#installation",
          "directory": ".agents/skills/linear-dark-ui"
        },
        "codex": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/linear-dark-ui/SKILL.md' --output '.agents/skills/linear-dark-ui/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/linear-dark-ui#installation",
          "directory": ".agents/skills/linear-dark-ui"
        },
        "antigravity": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/linear-dark-ui/SKILL.md' --output '.agents/skills/linear-dark-ui/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/linear-dark-ui#installation",
          "directory": ".agents/skills/linear-dark-ui"
        }
      }
    },
    {
      "slug": "anti-generic-components",
      "name": "Anti-Generic UI Guardrails",
      "category": "frontend-ui",
      "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.",
      "author": "@AgentTaste",
      "access": "public",
      "source": {
        "kind": "agenttaste",
        "url": "https://agenttaste.dev/skills/anti-generic-components#instructions"
      },
      "url": "https://agenttaste.dev/skills/anti-generic-components",
      "skillMdUrl": "https://agenttaste.dev/skills/anti-generic-components/SKILL.md",
      "agents": [
        "claude-code",
        "cursor",
        "codex",
        "antigravity"
      ],
      "useWhen": [
        "Review generated UI for repetitive layouts and visual clichés."
      ],
      "inputs": [
        "UI source or screenshots",
        "Product content and design constraints"
      ],
      "outputs": [
        "Specific component and composition changes"
      ],
      "prerequisites": [
        "Access to the UI implementation."
      ],
      "installation": {
        "claude-code": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/anti-generic-components/SKILL.md' --output '.claude/skills/anti-generic-components/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/anti-generic-components#installation",
          "directory": ".claude/skills/anti-generic-components"
        },
        "cursor": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/anti-generic-components/SKILL.md' --output '.agents/skills/anti-generic-components/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/anti-generic-components#installation",
          "directory": ".agents/skills/anti-generic-components"
        },
        "codex": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/anti-generic-components/SKILL.md' --output '.agents/skills/anti-generic-components/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/anti-generic-components#installation",
          "directory": ".agents/skills/anti-generic-components"
        },
        "antigravity": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/anti-generic-components/SKILL.md' --output '.agents/skills/anti-generic-components/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/anti-generic-components#installation",
          "directory": ".agents/skills/anti-generic-components"
        }
      }
    },
    {
      "slug": "stripe-micro-interactions",
      "name": "Stripe Fluid Micro-Interactions",
      "category": "frontend-ui",
      "description": "Injects precision interaction standards: spring transitions, hover glows calculated via CSS variables, and layout stability.",
      "author": "@AgentTaste",
      "access": "pro",
      "source": {
        "kind": "agenttaste",
        "url": "https://agenttaste.dev/skills/stripe-micro-interactions#instructions"
      },
      "url": "https://agenttaste.dev/skills/stripe-micro-interactions",
      "skillMdUrl": "https://agenttaste.dev/skills/stripe-micro-interactions/SKILL.md",
      "agents": [
        "claude-code",
        "cursor",
        "codex"
      ],
      "useWhen": [
        "Implement subtle hover, focus and transition behavior."
      ],
      "inputs": [
        "Interactive components",
        "Motion and accessibility constraints"
      ],
      "outputs": [
        "CSS interactions with reduced-motion support"
      ],
      "prerequisites": [
        "Frontend project and a browser to verify keyboard and pointer interactions."
      ],
      "installation": {
        "claude-code": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/stripe-micro-interactions/SKILL.md' --output '.claude/skills/stripe-micro-interactions/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/stripe-micro-interactions#installation",
          "directory": ".claude/skills/stripe-micro-interactions"
        },
        "cursor": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/stripe-micro-interactions/SKILL.md' --output '.agents/skills/stripe-micro-interactions/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/stripe-micro-interactions#installation",
          "directory": ".agents/skills/stripe-micro-interactions"
        },
        "codex": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/stripe-micro-interactions/SKILL.md' --output '.agents/skills/stripe-micro-interactions/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/stripe-micro-interactions#installation",
          "directory": ".agents/skills/stripe-micro-interactions"
        }
      }
    },
    {
      "slug": "stitch-design-taste",
      "name": "Stitch Design System (Minimalist Taste)",
      "category": "frontend-ui",
      "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.",
      "author": "@AgentTaste",
      "access": "pro",
      "source": {
        "kind": "agenttaste",
        "url": "https://agenttaste.dev/skills/stitch-design-taste#instructions"
      },
      "url": "https://agenttaste.dev/skills/stitch-design-taste",
      "skillMdUrl": "https://agenttaste.dev/skills/stitch-design-taste/SKILL.md",
      "agents": [
        "claude-code",
        "cursor",
        "codex",
        "antigravity"
      ],
      "useWhen": [
        "Define a semantic design system for a new or existing interface."
      ],
      "inputs": [
        "Product brief",
        "Design references and existing tokens"
      ],
      "outputs": [
        "Semantic typography, spacing and color rules"
      ],
      "prerequisites": [
        "Read the project design constraints before applying the instructions."
      ],
      "installation": {
        "claude-code": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/stitch-design-taste/SKILL.md' --output '.claude/skills/stitch-design-taste/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/stitch-design-taste#installation",
          "directory": ".claude/skills/stitch-design-taste"
        },
        "cursor": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/stitch-design-taste/SKILL.md' --output '.agents/skills/stitch-design-taste/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/stitch-design-taste#installation",
          "directory": ".agents/skills/stitch-design-taste"
        },
        "codex": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/stitch-design-taste/SKILL.md' --output '.agents/skills/stitch-design-taste/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/stitch-design-taste#installation",
          "directory": ".agents/skills/stitch-design-taste"
        },
        "antigravity": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/stitch-design-taste/SKILL.md' --output '.agents/skills/stitch-design-taste/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/stitch-design-taste#installation",
          "directory": ".agents/skills/stitch-design-taste"
        }
      }
    },
    {
      "slug": "b2b-saas-dashboard",
      "name": "Silicon Valley High-Density Dashboard",
      "category": "frontend-ui",
      "description": "Teaches coding agents to produce high-density, professional enterprise dashboards inspired by Datadog, PostHog, and Stripe. No oversized empty padding or juvenile charts.",
      "author": "@AgentTaste",
      "access": "pro",
      "source": {
        "kind": "agenttaste",
        "url": "https://agenttaste.dev/skills/b2b-saas-dashboard#instructions"
      },
      "url": "https://agenttaste.dev/skills/b2b-saas-dashboard",
      "skillMdUrl": "https://agenttaste.dev/skills/b2b-saas-dashboard/SKILL.md",
      "agents": [
        "claude-code",
        "cursor",
        "codex"
      ],
      "useWhen": [
        "Build a dashboard with dense tables and KPI panels."
      ],
      "inputs": [
        "Metrics, table schema and workflows",
        "Target viewport constraints"
      ],
      "outputs": [
        "Dashboard layout with readable metrics and reusable data components"
      ],
      "prerequisites": [
        "Use supplied data and metric definitions."
      ],
      "installation": {
        "claude-code": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/b2b-saas-dashboard/SKILL.md' --output '.claude/skills/b2b-saas-dashboard/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/b2b-saas-dashboard#installation",
          "directory": ".claude/skills/b2b-saas-dashboard"
        },
        "cursor": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/b2b-saas-dashboard/SKILL.md' --output '.agents/skills/b2b-saas-dashboard/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/b2b-saas-dashboard#installation",
          "directory": ".agents/skills/b2b-saas-dashboard"
        },
        "codex": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/b2b-saas-dashboard/SKILL.md' --output '.agents/skills/b2b-saas-dashboard/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/b2b-saas-dashboard#installation",
          "directory": ".agents/skills/b2b-saas-dashboard"
        }
      }
    },
    {
      "slug": "ios-fluid-mobile-web",
      "name": "iOS-Fluid Mobile Web App Standard",
      "category": "frontend-ui",
      "description": "Eliminates annoying mobile web glitches: fixes address-bar jumpiness with dvh units, integrates touch-friendly bottom sheets, and respects home indicator safe areas.",
      "author": "@AgentTaste",
      "access": "public",
      "source": {
        "kind": "agenttaste",
        "url": "https://agenttaste.dev/skills/ios-fluid-mobile-web#instructions"
      },
      "url": "https://agenttaste.dev/skills/ios-fluid-mobile-web",
      "skillMdUrl": "https://agenttaste.dev/skills/ios-fluid-mobile-web/SKILL.md",
      "agents": [
        "claude-code",
        "cursor",
        "antigravity"
      ],
      "useWhen": [
        "Implement a mobile web interface with safe-area-aware navigation."
      ],
      "inputs": [
        "Mobile UI source",
        "Target browsers and device requirements"
      ],
      "outputs": [
        "Responsive mobile layout and sheet interactions"
      ],
      "prerequisites": [
        "Mobile browser or emulator for viewport and touch validation."
      ],
      "installation": {
        "claude-code": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "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'",
          "guideUrl": "https://agenttaste.dev/skills/ios-fluid-mobile-web#installation",
          "directory": ".claude/skills/ios-fluid-mobile-web"
        },
        "cursor": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/ios-fluid-mobile-web/SKILL.md' --output '.agents/skills/ios-fluid-mobile-web/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/ios-fluid-mobile-web#installation",
          "directory": ".agents/skills/ios-fluid-mobile-web"
        },
        "antigravity": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/ios-fluid-mobile-web/SKILL.md' --output '.agents/skills/ios-fluid-mobile-web/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/ios-fluid-mobile-web#installation",
          "directory": ".agents/skills/ios-fluid-mobile-web"
        }
      }
    },
    {
      "slug": "figma-to-production-code",
      "name": "Figma-to-Code 1:1 Precision Engine",
      "category": "frontend-ui",
      "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.",
      "author": "@AgentTaste",
      "access": "pro",
      "source": {
        "kind": "agenttaste",
        "url": "https://agenttaste.dev/skills/figma-to-production-code#instructions"
      },
      "url": "https://agenttaste.dev/skills/figma-to-production-code",
      "skillMdUrl": "https://agenttaste.dev/skills/figma-to-production-code/SKILL.md",
      "agents": [
        "claude-code",
        "cursor",
        "antigravity"
      ],
      "useWhen": [
        "Implement a provided Figma frame using project design tokens."
      ],
      "inputs": [
        "Figma node or design export",
        "Frontend repository and reusable tokens"
      ],
      "outputs": [
        "Responsive components mapped to the supplied design"
      ],
      "prerequisites": [
        "Figma file access or a complete design export."
      ],
      "installation": {
        "claude-code": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "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'",
          "guideUrl": "https://agenttaste.dev/skills/figma-to-production-code#installation",
          "directory": ".claude/skills/figma-to-production-code"
        },
        "cursor": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/figma-to-production-code/SKILL.md' --output '.agents/skills/figma-to-production-code/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/figma-to-production-code#installation",
          "directory": ".agents/skills/figma-to-production-code"
        },
        "antigravity": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/figma-to-production-code/SKILL.md' --output '.agents/skills/figma-to-production-code/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/figma-to-production-code#installation",
          "directory": ".agents/skills/figma-to-production-code"
        }
      }
    },
    {
      "slug": "pixel-perfect-site-clone",
      "name": "Reverse-Engineer Website Cloner",
      "category": "frontend-ui",
      "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.",
      "author": "@AgentTaste",
      "access": "pro",
      "source": {
        "kind": "agenttaste",
        "url": "https://agenttaste.dev/skills/pixel-perfect-site-clone#instructions"
      },
      "url": "https://agenttaste.dev/skills/pixel-perfect-site-clone",
      "skillMdUrl": "https://agenttaste.dev/skills/pixel-perfect-site-clone/SKILL.md",
      "agents": [
        "claude-code",
        "cursor",
        "antigravity"
      ],
      "useWhen": [
        "Rebuild an authorized reference interface with reusable components."
      ],
      "inputs": [
        "Reference URL or screenshots",
        "Target framework and viewports"
      ],
      "outputs": [
        "Responsive implementation using inspected tokens and assets"
      ],
      "prerequisites": [
        "Access to the reference UI and permission to reuse relevant assets."
      ],
      "installation": {
        "claude-code": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "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'",
          "guideUrl": "https://agenttaste.dev/skills/pixel-perfect-site-clone#installation",
          "directory": ".claude/skills/pixel-perfect-site-clone"
        },
        "cursor": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/pixel-perfect-site-clone/SKILL.md' --output '.agents/skills/pixel-perfect-site-clone/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/pixel-perfect-site-clone#installation",
          "directory": ".agents/skills/pixel-perfect-site-clone"
        },
        "antigravity": {
          "kind": "markdown",
          "versionPolicy": "site-current",
          "command": "curl --fail --show-error --location --create-dirs 'https://agenttaste.dev/skills/pixel-perfect-site-clone/SKILL.md' --output '.agents/skills/pixel-perfect-site-clone/SKILL.md'",
          "guideUrl": "https://agenttaste.dev/skills/pixel-perfect-site-clone#installation",
          "directory": ".agents/skills/pixel-perfect-site-clone"
        }
      }
    },
    {
      "slug": "anthropic-frontend-design",
      "name": "Frontend design",
      "category": "frontend-ui",
      "description": "Anthropic’s frontend design skill covers typography, composition, visual identity and implementation decisions for new or existing interfaces.",
      "author": "Anthropic",
      "access": "public",
      "source": {
        "repository": "anthropics/skills",
        "revision": "683bc88e56f3e09ba94f7055977f3d3aa499f202",
        "path": "skills/frontend-design/SKILL.md",
        "skillName": "frontend-design",
        "license": "Apache-2.0",
        "installer": "skills-cli",
        "kind": "upstream",
        "verifiedAt": "2026-10-09",
        "url": "https://github.com/anthropics/skills/blob/683bc88e56f3e09ba94f7055977f3d3aa499f202/skills/frontend-design/SKILL.md"
      },
      "url": "https://agenttaste.dev/skills/anthropic-frontend-design",
      "skillMdUrl": "https://agenttaste.dev/skills/anthropic-frontend-design/SKILL.md",
      "agents": [
        "claude-code",
        "cursor",
        "codex",
        "antigravity"
      ],
      "useWhen": [
        "Build a website, landing page or application interface.",
        "Reshape an existing UI around a specific visual identity."
      ],
      "inputs": [
        "Product brief and audience",
        "Repository, framework and design constraints"
      ],
      "outputs": [
        "Implemented interface",
        "Coherent typography, layout and interaction choices"
      ],
      "prerequisites": [
        "Access to the project source files.",
        "Read the upstream skill and its license terms."
      ],
      "installation": {
        "claude-code": {
          "kind": "skills-cli",
          "versionPolicy": "pinned-source",
          "command": "npx skills add https://github.com/anthropics/skills/tree/683bc88e56f3e09ba94f7055977f3d3aa499f202/skills/frontend-design --skill frontend-design --agent claude-code",
          "guideUrl": "https://github.com/vercel-labs/skills#available-commands",
          "directory": ".claude/skills/frontend-design"
        },
        "cursor": {
          "kind": "skills-cli",
          "versionPolicy": "pinned-source",
          "command": "npx skills add https://github.com/anthropics/skills/tree/683bc88e56f3e09ba94f7055977f3d3aa499f202/skills/frontend-design --skill frontend-design --agent cursor",
          "guideUrl": "https://github.com/vercel-labs/skills#available-commands",
          "directory": ".agents/skills/frontend-design"
        },
        "codex": {
          "kind": "skills-cli",
          "versionPolicy": "pinned-source",
          "command": "npx skills add https://github.com/anthropics/skills/tree/683bc88e56f3e09ba94f7055977f3d3aa499f202/skills/frontend-design --skill frontend-design --agent codex",
          "guideUrl": "https://github.com/vercel-labs/skills#available-commands",
          "directory": ".agents/skills/frontend-design"
        },
        "antigravity": {
          "kind": "skills-cli",
          "versionPolicy": "pinned-source",
          "command": "npx skills add https://github.com/anthropics/skills/tree/683bc88e56f3e09ba94f7055977f3d3aa499f202/skills/frontend-design --skill frontend-design --agent antigravity",
          "guideUrl": "https://github.com/vercel-labs/skills#available-commands",
          "directory": ".agents/skills/frontend-design"
        }
      }
    },
    {
      "slug": "vercel-web-design-guidelines",
      "name": "Web interface guidelines",
      "category": "frontend-ui",
      "description": "This upstream skill fetches the current Web Interface Guidelines and reviews the requested files for accessibility, interaction and usability issues.",
      "author": "Vercel",
      "access": "public",
      "source": {
        "repository": "vercel-labs/agent-skills",
        "revision": "063bee94c3f4df8453406c830b0a7df0f2860278",
        "path": "skills/web-design-guidelines/SKILL.md",
        "skillName": "web-design-guidelines",
        "license": "See upstream terms",
        "installer": "skills-cli",
        "kind": "upstream",
        "verifiedAt": "2026-10-09",
        "url": "https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/web-design-guidelines/SKILL.md"
      },
      "url": "https://agenttaste.dev/skills/vercel-web-design-guidelines",
      "skillMdUrl": "https://agenttaste.dev/skills/vercel-web-design-guidelines/SKILL.md",
      "agents": [
        "claude-code",
        "cursor",
        "codex",
        "antigravity"
      ],
      "useWhen": [
        "Audit an existing UI or review frontend changes.",
        "Check accessibility and interaction behavior."
      ],
      "inputs": [
        "Files or a file pattern to review"
      ],
      "outputs": [
        "Findings with file and line references"
      ],
      "prerequisites": [
        "Access to project files.",
        "Web access to fetch the upstream guidelines."
      ],
      "installation": {
        "claude-code": {
          "kind": "skills-cli",
          "versionPolicy": "pinned-source",
          "command": "npx skills add https://github.com/vercel-labs/agent-skills/tree/063bee94c3f4df8453406c830b0a7df0f2860278/skills/web-design-guidelines --skill web-design-guidelines --agent claude-code",
          "guideUrl": "https://github.com/vercel-labs/skills#available-commands",
          "directory": ".claude/skills/web-design-guidelines"
        },
        "cursor": {
          "kind": "skills-cli",
          "versionPolicy": "pinned-source",
          "command": "npx skills add https://github.com/vercel-labs/agent-skills/tree/063bee94c3f4df8453406c830b0a7df0f2860278/skills/web-design-guidelines --skill web-design-guidelines --agent cursor",
          "guideUrl": "https://github.com/vercel-labs/skills#available-commands",
          "directory": ".agents/skills/web-design-guidelines"
        },
        "codex": {
          "kind": "skills-cli",
          "versionPolicy": "pinned-source",
          "command": "npx skills add https://github.com/vercel-labs/agent-skills/tree/063bee94c3f4df8453406c830b0a7df0f2860278/skills/web-design-guidelines --skill web-design-guidelines --agent codex",
          "guideUrl": "https://github.com/vercel-labs/skills#available-commands",
          "directory": ".agents/skills/web-design-guidelines"
        },
        "antigravity": {
          "kind": "skills-cli",
          "versionPolicy": "pinned-source",
          "command": "npx skills add https://github.com/vercel-labs/agent-skills/tree/063bee94c3f4df8453406c830b0a7df0f2860278/skills/web-design-guidelines --skill web-design-guidelines --agent antigravity",
          "guideUrl": "https://github.com/vercel-labs/skills#available-commands",
          "directory": ".agents/skills/web-design-guidelines"
        }
      }
    }
  ]
}