ui-components

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.

Jump to install

Repository: yonatangross/orchestkit
Last source activity: July 31, 2026 at 14:14
Detected SKILL.md language: English
Stars: 219
Forks: 20

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/yonatangross/orchestkit --skill ui-components

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

27 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

chain-patterns

Chain patterns for multi-phase pipelines: MCP detection, handoff files, checkpoint-resume, worktree agents, CronCreate monitoring. Use when building or debugging a pipeline skill.

2026-08-12

doctor

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.

2026-08-12

telemetry-inspect

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.

2026-08-12

View all from this repository

UI Components

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.

Quick Reference

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"]

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

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"]

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

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

ui-components

Install options

Review the source files

UI Components

Quick Reference

Quick Start

UI Components

Quick Reference

Quick Start

shadcn/ui

v4 Style System

shadcn CLI v4 (Apr 2026) — new commands

Key Decisions

Anti-Patterns (FORBIDDEN)

Upstream coverage (do not restate)

Detailed Documentation

Design System

Design System Components

Forms

Modern CSS & Tooling

UX Foundations

Related Skills

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

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)

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

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

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

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

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

ui-components

Source facts

Install options

Review the source files

More from this repository

More from this repository

UI Components

Quick Reference

Quick Start

UI Components

Quick Reference

Quick Start

shadcn/ui

v4 Style System

shadcn CLI v4 (Apr 2026) — new commands

Key Decisions

Anti-Patterns (FORBIDDEN)

Upstream coverage (do not restate)

Detailed Documentation

Design System

Design System Components

Forms

Modern CSS & Tooling

UX Foundations

Related Skills