agentleFS
Sign inStart free
podopodo/design-agent-skills/skills/shadcn-ui/SKILL.md

shadcn-ui

Skill32 starsChanged 6 months agoMITView on GitHub

Project-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns. Reads the local project's shadcn config and installed components and avoids common shadcn anti-patterns during implementation.

41 other projects use a version of this, 1 of them edited.

Adopted by

Most recently taken up by

Used with

Projects with it also use i18n-translate, figma-create-new-file and 9 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • lien0219Skill

    i18n-translate

    Complete and maintain frontend i18n translations for this project. Covers finding missing translation keys, detecting untranslated entries, and adding translations for all supported locales (en, zh, fr, ja, ru, vi). Use when the user asks to add translations, fix i18n, complete missing translations, or when new UI text needs to be internationalized.

    Also in 4 projects that use this

  • OpenAISkill

    figma-create-new-file

    Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard)

    Also in 3 projects that use this

  • nilecuiSkill

    api-design-principles

    Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.

    Also in 4 projects that use this

  • xfstudioSkill

    tailwind-design-system

    Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

    Also in 4 projects that use this

  • OpenAISkill

    nextjs

    Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel.

    Also in 4 projects that use this

  • anasahmed07Skill

    better-auth-best-practices

    Skill for integrating Better Auth - the comprehensive TypeScript authentication framework.

    Also in 3 projects that use this

  • +1 more from openai

The file

Create a free account to mount
Files
SKILL.md

shadcn-ui

Catalogue stub — full skill: shadcn-ui/ui (skills/shadcn)

<!-- das:install:start — generated from stub.yaml by `npm run generate`; edit stub.yaml, not this block -->

Decision tree

  1. Is the full skill already installed? Upstream names this skill shadcn, so it installs next to this pointer (the pointer is not replaced).
    • Global: f=~/.agents/skills/shadcn/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/shadcn/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as shadcn, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/shadcn-ui ] && echo "global" || echo "project"

    Global:

    npx skills add shadcn-ui/ui --skill shadcn -g -y

    Project:

    npx skills add shadcn-ui/ui --skill shadcn -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • Requires: Node.js: the skill runs the shadcn CLI through your package runner (npx shadcn@latest ..., fetched from npm at use time), including info --json for project context; A project with a components.json file (or one you are about to create with shadcn init)
  • License: MIT
  • Download size: ~71 MB.
  • Name collision: shadcn-ui is also written by google-stitch-skills (its install or its catalogue pointer); installing both overwrites the earlier one.
<!-- das:install:end -->

Invoke after install

  • Skill name: shadcn
  • Trigger phrases: "shadcn", "shadcn/ui", "shadcn component", "ui component"

What it does

Provides a project-aware workflow for working with shadcn/ui: searching the available component registries (including community registries), adding components with the correct CLI command, composing components from existing ones (a settings page is Tabs + Card + form controls), using built-in variants and semantic colors before custom styles, and fixing common implementation mistakes. It also covers presets, registries and design-system pages. The skill loads project context by running npx shadcn@latest info --json.

The same upstream repository ships a separate migrate-radix-to-base skill for moving components from Radix UI to Base UI; it is not part of this stub (add it with npx skills add shadcn-ui/ui --skill migrate-radix-to-base).

When NOT to use

  • A non-shadcn component library, or a design system built from scratch — use design-consultation
  • Google Stitch to shadcn conversion — use google-stitch-skills

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free