Skip to content
Agentmart
Submit a tool

Agent skills for frontend development in Claude Code

786 agent skills for frontend development in the catalog list Claude Code as a supported host. These are the 15 that rank highest, ordered by adoption, freshness and documentation. frontend-code-review, component-canvas and shadcn-ui-mcp lead the list. Claude Code reads them from .claude/skills/<name>/SKILL.md in the project, or ~/.claude/skills/<name>/ for every project. A skill is a folder with a SKILL.md file; Claude Code loads it when a task matches its description. Every listing links to its source and shows a freshness grade.

Updated Oct 26, 2026 · Built from catalog data; how we rank and grade

How to install in Claude Code

npx skills add <owner>/<repo> --skill <name> -a claude-code

Where it goes: .claude/skills/<name>/SKILL.md in the project, or ~/.claude/skills/<name>/ for every project.

The host's docs describe copying a folder with a SKILL.md into a skills directory; the npx skills command is a third-party shortcut for the same thing.

Each listing page has the exact command for that listing.

Top 15 of 786

  1. 1
    frontend-code-review

    langgenius

    Review frontend code under `web/` or `packages/dify-ui/` when the user explicitly requests a review or audit.

    • Largest repository here (159,418 stars)
    • Active in the last 30 days

    ★ 159.4KLast active Oct 23, 2026Claude Code, Claude apps, Codex, Cursor +6

  2. 2
    component-canvas

    ibelick

    Build a full-screen, interactive canvas to explore existing UI components and their variants with pan and zoom.

    • Repository has 10.1K stars
    • Active in the last 30 days
    • Open source (MIT)

    ★ 10.1KLast active Oct 13, 2026Claude Code, Claude apps, Codex, Cursor +6

  3. 3
    shadcn-ui-mcp

    Jpisnice

    shadcn/ui component context and usage from Codex via MCP

    • Repository has 3.1K stars
    • Active in the last 30 days
    • Open source (MIT)

    ★ 3.1KLast active Oct 3, 2026Claude Code, Claude apps, Codex, Cursor +6

  4. 4
    components

    trezor

    React component file structure and patterns for Trezor Suite.

    • Repository has 1.1K stars
    • Active in the last 30 days

    ★ 1.1KLast active Oct 23, 2026Claude Code, Claude apps, Codex, Cursor +6

  5. 5
    verify-docs

    markuplint

    Verify documentation claims (README, JSDoc) in spec-heavy packages — @markuplint/types (attribute value types; WHATWG/W3C/RFC/CSS/SVG grammars) and…

    • Active in the last 30 days
    • Open source (MIT)

    ★ 629Last active Oct 21, 2026Claude Code, Claude apps, Codex, Cursor +6

  6. 6
    component-refactoring

    Charlie85270

    Refactor high-complexity React components in Dify frontend.

    • Active in the last 30 days
    • Open source (MIT)

    ★ 353Last active Oct 23, 2026Claude Code, Claude apps, Codex, Cursor +6

  7. 7
    stitch::extract-design-md

    google-labs-code

    Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework.

    • Repository has 8.6K stars
    • Open source (Apache-2.0)

    ★ 8.6KLast active Jul 29, 2026Claude Code, Claude apps, Codex, Cursor +6

  8. 8
    stitch::extract-static-html

    google-labs-code

    Extract self-contained static HTML from a built web application or React components by inlining CSS and images.

    • Repository has 8.6K stars
    • Open source (Apache-2.0)
    • Ships helper scripts

    ★ 8.6KLast active Jul 29, 2026Claude Code, Claude apps, Codex, Cursor +6

  9. 9
    ui-design

    mblode

    Designs and builds React/Next/Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data.

    • Active in the last 30 days
    • Open source (MIT)

    ★ 162Last active Oct 22, 2026Claude Code, Claude apps, Codex, Cursor +6

  10. 10
    ui-system

    OutThisLife

    Reuse existing UI primitives, CSS vars, and DESIGN.md patterns instead of inventing new buttons, colors, borders, shadows, or helpers — including when…

    • Active in the last 30 days
    • Open source (MIT)

    ★ 206Last active Sep 30, 2026Claude Code, Claude apps, Codex, Cursor +6

  11. 11
    motion-systems

    scott-fryxell

    Use when designing or implementing motion for web interfaces, including CSS transitions and keyframes, `linear()` easing design, transform strategy…

    • Active in the last 30 days
    • Open source (MIT)

    ★ 125Last active Sep 28, 2026Claude Code, Claude apps, Codex, Cursor +6

  12. 12
    useless

    scott-fryxell

    What building realness taught us about the web platform - semantic HTML with microdata as one decision that serves SEO, CSS selectors, layout, the data model…

    • Active in the last 30 days
    • Open source (MIT)

    ★ 125Last active Sep 28, 2026Claude Code, Claude apps, Codex, Cursor +6

  13. 13
    redesign-my-landingpage

    instructa

    Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all…

    • Active in the last 30 days

    ★ 139Last active Oct 15, 2026Claude Code, Claude apps, Codex, Cursor +6

  14. 14
    tailwindcss

    Pedro Nauck

    Style components with Tailwind CSS v4 and project tokens.

    ★ 641Last active Sep 13, 2026Claude Code, Claude apps, Codex, Cursor +6

  15. 15
    build-design-system

    lintendo

    从网页中采集设计令牌并生成完整的 DESIGN.md 设计规范文档 + Tailwind CSS 主题文件。 当用户提供 URL 并要求"提取主题"、"生成设计规范"、"导出设计系统"、 "提取这个网站的设计令牌"、"帮我做一个主题"、"分析这个页面的设计风格"时使用。 产出包含…

    • Open source (MIT)
    • Ships helper scripts
    • For JavaScript

    ★ 133Last active Aug 21, 2026Claude Code, Claude apps, Codex, Cursor +6

Related