UI Components

What it does

When your agent uses it

• Building accessible component libraries
• Customizing shadcn components
• Using Radix unstyled primitives
• Creating design system foundations

Example prompts

• “/ui-components”

Requirements

• Node.js
• Compatibility (from SKILL.md): Claude Code 2.1.277+.
• Pre-approved tools (allowed-tools): Read, Glob, Grep, WebFetch, WebSearch

What it can do on your machine

Read from SKILL.md and the folder at commit 0ef71d2. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • Read
  • Glob
  • Grep
  • WebFetch
  • WebSearch

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships 1 file in scripts/, which the agent can run.

  Shell commands in SKILL.md call:

  • npx

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • ui.shadcn.com
  • radix-ui.com
  • cva.style
  • github.com
  • tanstack.com

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

• Compatibility

  Claude Code 2.1.277+.

  From compatibility in the SKILL.md frontmatter.

Context cost

UI Components loads about 2.9k tokens when it runs, and up to ~3.8k if it reads all its reference files. Until then it costs about 58 tokens; SKILL.md has 977 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~58

When it runs · the whole SKILL.md, loaded when a task matches

~2.9k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~3.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from yonatangross/orchestkit at commit 0ef71d2, republished under its MIT licence (© yonatangross). 977 words, ~2,947 tokens.

name

ui-components

description

UI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, customizing shadcn components, using Radix unstyled primitives, or creating design system foundations.

allowed-tools

Read, Glob, Grep, WebFetch, WebSearch

compatibility

Claude Code 2.1.277+.

license

MIT

user-invocable

false

disable-model-invocation

true

metadata.owner-agent

frontend-ui-developer

metadata.category

document-asset-creation

metadata.version

2.1.0

metadata.author

OrchestKit

metadata.complexity

medium

metadata.tags

ui-components, shadcn, radix, component-library, design-system, accessible-components, react-hook-form, zod, forms, validation, server-actions, field-arrays

// CVA variant system with cn() utility
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium transition-colors',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive: 'bg-destructive text-destructive-foreground',
        outline: 'border border-input bg-background hover:bg-accent',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 px-3',
        lg: 'h-11 px-8',
      },
    },
    defaultVariants: { variant: 'default', size: 'default' },
  }
)

// Radix Dialog with asChild composition
import { Dialog } from 'radix-ui'

<Dialog.Root>
  <Dialog.Trigger asChild>
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay className="fixed inset-0 bg-black/50" />
    <Dialog.Content className="data-[state=open]:animate-in">
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description>Description</Dialog.Description>
      <Dialog.Close>Close</Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

© yonatangross, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 27 other files (scripts, references) in src/skills/ui-components of yonatangross/orchestkit.

• SKILL.md
• metadata.json
• references/ork-delta.md
• rules/_sections.md
• rules/_template.md
• rules/color-system.md
• rules/css-cascade-layers.md
• rules/design-system-components.md
• rules/design-system-spacing.md
• rules/design-system-states.md
• rules/design-system-tokens.md
• rules/design-system-typography.md
• rules/empty-states.md
• rules/forms-react-hook-form.md
• rules/forms-validation-zod.md
• rules/shadcn-v4-styles.md
• rules/storybook-component-docs.md
• rules/tailwind-v4-patterns.md
• rules/typography-thresholds.md
• … and 9 more

Open the folder on GitHubat commit 0ef71d2