메뉴
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.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/yonatangross/orchestkit --skill ui-components명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | ui-components |
| license | MIT |
| compatibility | Claude Code 2.1.220+. |
| 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. |
| tags | ["ui-components","shadcn","radix","component-library","design-system","accessible-components","react-hook-form","zod","forms","validation","server-actions","field-arrays"] |
| context | fork |
| agent | frontend-ui-developer |
| version | 2.1.0 |
| author | OrchestKit |
| user-invocable | false |
| disable-model-invocation | true |
| complexity | medium |
| persuasion-type | reference |
| metadata | {"category":"document-asset-creation"} |
| allowed-tools | ["Read","Glob","Grep","WebFetch","WebSearch"] |
Patterns for building accessible UI component libraries with shadcn/ui and Radix Primitives, as a thin wrap over the first-party docs: quick-start recipes, key decisions, anti-patterns, and the house delta. Vendor mechanics (CVA variants, cn() utility, component extension, asChild composition, dialog/menu patterns, data-attribute styling) are upstream's job; see Upstream coverage (do not restate). Each remaining category has individual rule files in rules/ loaded on-demand.
| Category | Rules | Impact | When to Use |
|---|---|---|---|
| shadcn/ui | 1 | HIGH | v4 styles, preset codes, style detection |
| Design System | 4 | HIGH | W3C tokens, OKLCH theming, spacing scales, typography, component states, animation |
| Design System Components | 1 | HIGH | Atomic design, CVA variants, accessibility, Storybook |
| Forms | 2 | HIGH | React Hook Form v7, Zod validation, Server Actions |
| Modern CSS & Tooling | 3 | HIGH | CSS cascade layers, Tailwind v4, Storybook CSF3 |
| UX Foundations | 4 | HIGH | Visual hierarchy, typography thresholds, color system, empty states |
Total: 15 rules across 6 categories. Radix primitive mechanics and shadcn customization tutorials are first-party documented; see Upstream coverage (do not restate) and references/ork-delta.md for what stays ours.
// CVA variant system with cn() utility
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const buttonVariants = (
,
{
: {
: {
: ,
: ,
: ,
: ,
},
: {
: ,
: ,
: ,
},
},
: { : , : },
}
)
// 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>
Beautifully designed, accessible components built on CVA variants, cn() utility, and OKLCH theming.
| Rule | File | Key Pattern |
|---|---|---|
| v4 Styles | rules/shadcn-v4-styles.md | 6 styles (Vega→Luma), preset codes, style detection, class mapping |
Customization, form, and data-table walkthroughs are upstream's job now; see Upstream coverage (do not restate). Our conventions on top of them live in references/ork-delta.md.
shadcn CLI v4 ships 6 visual styles. Each rewrites component class names — not just CSS variables.
| Style | Character | Best For |
|---|---|---|
| Vega | Balanced radius, clean lines | General purpose (successor to New York) |
| Nova | Compact padding, reduced margins | Dense dashboards, admin panels |
| Maia | Soft, rounded, generous spacing | Consumer-facing, friendly apps |
| Lyra | Sharp, zero radius, monospace pairs | Editorial, developer tools |
| Mira | Ultra-compact, minimal chrome | Spreadsheets, data-heavy interfaces |
| Luma | Extreme rounding (rounded-4xl), soft elevation (shadow-md + ring), breathable layouts | Polished native-app feel, macOS Tahoe-inspired |
Configure visually at ui.shadcn.com/create → pick style, theme, fonts, icons, then copy the generated command. Do not hardcode preset codes in docs — they're tied to a specific style snapshot and can drift.
| Command | Purpose |
|---|---|
npx shadcn@latest apply <style> | Apply a published style (e.g. luma, nova, lyra) to the current project — re-skins existing components without re-adding them |
npx shadcn@latest info | Show resolved config: registry, style, tokens, components present, Tailwind version |
npx shadcn@latest skills | List the shadcn/skills registry — Claude Code- and Cursor-ready skill packs that bundle CLI commands with agent guidance |
npx shadcn@latest build | Build a custom registry (already-documented) — pair with apply to ship a private style |
Detection: Read components.json → "style" field (e.g., "radix-luma", "base-nova"). Old "new-york" and "default" styles are superseded by Vega.
| Decision | Recommendation |
|---|---|
| Color format | OKLCH for perceptually uniform theming |
| Class merging | Always use cn() for Tailwind conflicts |
| Extending components | Wrap, don't modify source files |
| Variants | Use CVA for type-safe multi-axis variants |
| Styling approach | Data attributes + Tailwind arbitrary variants |
| Composition | Use asChild to avoid wrapper divs |
| Animation | CSS-only with data-state selectors |
| Form components | Combine with react-hook-form |
| Destructive confirmations | AlertDialog, never plain Dialog (see references/ork-delta.md) |
asChild to avoid extra DOM elementstabindex > 0 disrupts natural tab orderThese topics were removed from this skill on 2026-07-31 because a first-party source owns them. Point sessions at the source; keep only floors, scars, and house decisions here (they live in references/ork-delta.md).
| Topic | First-party source |
|---|---|
| shadcn setup, init checklist, adding components | vercel:shadcn (marketplace skill), https://ui.shadcn.com/docs/installation |
| shadcn customization, CVA variants, cn() utility, component extension | vercel:shadcn (marketplace skill), https://ui.shadcn.com/docs and https://cva.style/docs |
| OKLCH theming variables, light/dark CSS variable sets | https://ui.shadcn.com/docs/theming |
| Dark mode toggle with next-themes | https://ui.shadcn.com/docs/dark-mode and https://github.com/pacocoursey/next-themes |
| Data table with TanStack Table | https://ui.shadcn.com/docs/components/data-table and https://tanstack.com/table |
| Form field wrappers and validation states | https://ui.shadcn.com/docs/components/form |
| Radix Dialog and AlertDialog patterns | https://www.radix-ui.com/primitives/docs/components/dialog and .../components/alert-dialog |
| Radix asChild / Slot composition | https://www.radix-ui.com/primitives/docs/guides/composition |
| Radix data-attribute styling and focus management | https://www.radix-ui.com/primitives/docs/guides/styling |
| Dropdown menu, popover, tooltip, hover card | https://www.radix-ui.com/primitives/docs/components/dropdown-menu (and sibling component pages) |
| Radix accessibility audit checklist | https://www.radix-ui.com/primitives/docs/overview/accessibility plus ork:accessibility |
| Resource | Description |
|---|---|
| scripts/ | Templates: CVA component, extended button, dialog, dropdown, theme CSS |
| references/ork-delta.md | Ork floors, scars, and house decisions kept out of upstream docs |
Design token architecture, spacing, typography, and interactive component states.
| Rule | File | Key Pattern |
|---|---|---|
| Token Architecture | rules/design-system-tokens.md | W3C tokens, OKLCH colors, Tailwind @theme |
| Spacing Scale | rules/design-system-spacing.md | 8px grid, Tailwind space-1 to space-12 |
| Typography Scale | rules/design-system-typography.md | Font sizes, weights, line heights |
| Component States | rules/design-system-states.md | Hover, focus, active, disabled, loading, animation presets |
Component architecture patterns with atomic design and accessibility.
| Rule | File | Key Pattern |
|---|---|---|
| Component Architecture | rules/design-system-components.md | Atomic design, CVA variants, WCAG 2.1 AA, Storybook |
React Hook Form v7 with Zod validation and React 19 Server Actions.
| Rule | File | Key Pattern |
|---|---|---|
| React Hook Form | rules/forms-react-hook-form.md | useForm, field arrays, Controller, wizards, file uploads |
| Zod & Server Actions | rules/forms-validation-zod.md | Zod schemas, Server Actions, useActionState, async validation |
Modern CSS patterns, Tailwind v4, and component documentation tooling for 2026.
| Rule | File | Key Pattern |
|---|---|---|
| CSS Cascade Layers | rules/css-cascade-layers.md | @layer ordering, specificity-free overrides, third-party isolation |
| Tailwind v4 | rules/tailwind-v4-patterns.md | CSS-first @theme, native container queries, @max-* variants |
| Storybook Docs | rules/storybook-component-docs.md | CSF3 stories, play() interaction tests, Chromatic visual regression |
Cognitive-science-grounded UI/UX principles with specific numeric thresholds for production-quality interfaces.
| Rule | File | Key Pattern |
|---|---|---|
| Visual Hierarchy | rules/visual-hierarchy.md | Button tiers, de-emphasis, F/Z scan, Von Restorff, proximity, max-width |
| Typography Thresholds | rules/typography-thresholds.md | 65ch line length, 1.4–1.6 line height, rem units, modular type scale |
| Color System | rules/color-system.md | OKLCH 9-shade scales, semantic categories, no true black, brand-tinted neutrals |
| Empty States | rules/empty-states.md | Skeleton-first, icon + headline + description + CTA, cause-specific tone |
ork:accessibility - WCAG compliance and React Aria patternsork:testing-unit - Component testing patternsChain patterns for multi-phase pipelines: MCP detection, handoff files, checkpoint-resume, worktree agents, CronCreate monitoring. Use when building or debugging a pipeline skill.
OrchestKit doctor for health diagnostics across manifest integrity, hook configuration, skill validation, agent frontmatter, MCP server connectivity, CC version compatibility, and permission rules. Reports issues with severity levels and auto-remediation suggestions. Validates component counts, detects orphaned entries, and checks CC version matrix compliance. Use when diagnosing plugin health, troubleshooting configuration issues, or running pre-release checks.
Inspects the OrchestKit telemetry pipeline for the current project — lists all known telemetry files with write counts, sizes, schema status, growth trend, and orphan detection. Use when verifying the observability pipeline is healthy, debugging a missing writer, or auditing which files have schema locks vs. which are drift-vulnerable. Read-only — never modifies telemetry files.