agentleFS
Sign inStart free
podopodo/design-agent-skills/skills/building-components/SKILL.md

building-components

Skill32 starsChanged 6 months agoMITView on GitHub

Vercel's guide for building modern, accessible, and composable UI components: accessibility, composable APIs, design tokens, publishing to npm or a registry, and writing component docs. From the components.build project.

13 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use vercel-cli, vercel-composition-patterns and 8 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.
  • DatabricksSkill

    vercel-cli

    Deploy, manage, and develop projects on Vercel from the command line

    Also in 3 projects that use this

  • SentrySkill

    vercel-composition-patterns

    Also in 7 projects that use this

  • VercelSkill

    ai-elements

    Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when the user wants to build a chatbot, AI assistant UI, or any AI-powered chat interface.

    Also in 3 projects that use this

  • VercelSkill

    ai-sdk

    Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".

    Also in 3 projects that use this

  • VercelSkill

    vercel-react-best-practices

    React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

    Also in 7 projects that use this

  • VercelSkill

    web-design-guidelines

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

    Also in 5 projects that use this

  • +1 more from vercel-labs
  • +1 more from vercel

The file

Create a free account to mount
Files
SKILL.md

building-components

Catalogue stub — full skill: vercel/components.build (skills/building-components)

<!-- 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?
    • Global: f=~/.agents/skills/building-components/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/building-components/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as building-components, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/building-components ] && echo "global" || echo "project"

    Global:

    npx skills add vercel/components.build --skill building-components -g -y

    Project:

    npx skills add vercel/components.build --skill building-components -y

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

Heads-up

  • License: Apache-2.0 (LICENSE notice; GitHub reports NOASSERTION)
<!-- das:install:end -->

Invoke after install

  • Skill name: building-components
  • Trigger phrases: "building components", "build accessible components", "composable component API", "components.build"

What it does

Guides building modern UI components that are accessible, composable, and themeable: designing composable APIs, implementing accessibility, setting up design tokens, publishing components to npm or a registry, and writing component documentation. Distilled from the components.build handbook.

When NOT to use

  • A project-aware shadcn/ui workflow (adding and composing registry components) → use shadcn-ui
  • React/Next.js performance or composition patterns → use vercel-skills
  • Visual design direction rather than component architecture → use hallmark or taste-skill

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