ui-shadcn

Files (1)

• SKILL.md

SKILL.md (first lines)

# shadcn Engineering

Treat shadcn/ui as editable component infrastructure, not the product's visual identity.

## Project context first

When `components.json` exists, it is authoritative. Read it and, when the CLI can be run safely, prefer the project-aware command equivalent of `shadcn info --json` before assuming:

- framework and Tailwind version;
- aliases and resolved paths;
- base library (`base`, `radix`, or `aria`);
- icon library;
- installed components;
- configured registries.

The harness reviewed shadcn CLI/MCP `4.19.0` for this release. Do not silently replace the project's already-working shadcn version or migrate its base library just to match the harness.

## Discovery order

1. Reuse an existing project component when it fits.
2. Reuse an already-installed shadcn component.
3. Use the configured shadcn MCP/registries or CLI `docs`, `search`, `view`, and `diff` capabilities to inspect a candidate.
4. Add only the component(s) the task needs.
5. Build a custom primitive only when the existing/project/registry options do not fit.

Do not invent a component API from memory when project context or registry documentation is available.

## System integration

Normalize imported components to the project's semantic tokens, variants, density, typography, focus treatment and motion language. Preserve accessible behavior from the underlying primitive. Do not create a parallel styling system or scatter hard-coded visual values through generated components.

Keep the project's icon family and import conventions. Do not migrate icons unless the user explicitly requests a migration.

## Forms and composites

Prefer composition and project-established patterns over mega-components. For forms, option sets, fields, dialogs, menus, popovers and other interactive composites, inspect the base-specific current API before implementation.

## MCP

When shadcn is part of the project, the project-local shadcn MCP server is the preferred registry discovery bridge. `/ui-setup` can add a pinned, idempotent `.mcp.json` entry without overwriting existing MCP servers.

## Boundaries

- Design direction belongs to `ui-design-direction`.
- Detailed motion belongs to the Emil skills.
- Reusable-state evidence belongs to Storybook.
- React/Next performance belongs to `ui-react-engineering`.
- Final review belongs to `ui-interface-review`.
- Browser truth belongs to Playwright/axe.

From hersti/ui-engineering, MIT.

More from hersti/ui-engineering