ui-setup

Files (4)

• SKILL.md
• merge-shadcn-mcp.mjs · scripts/
• project-inspect.mjs · scripts/
• setup-plan.mjs · scripts/

SKILL.md (first lines)

# Set up UI Engineering

The user invoked setup, so do not make them manually install the stack or approve every additive package one by one. Inspect first, show the delta, then apply safe additive changes. Stop only for an architecture-changing choice, ambiguous workspace target, destructive migration, unsupported environment, or config conflict.

## 1. Inspect deterministically

Run:

```bash
node "${CLAUDE_SKILL_DIR}/scripts/project-inspect.mjs" .
node "${CLAUDE_SKILL_DIR}/scripts/setup-plan.mjs" .
```

Use the returned plan rather than inventing package-manager commands.

## 2. Workspace safety

If the project root is an ambiguous monorepo/workspace root, do not mutate dependencies there. Resolve the actual frontend workspace from the user's task/repo structure, rerun the inspector in that workspace, and only then execute the plan.

## 3. Apply safe actions

Execute additive `actions` from the plan in order. Do not execute `decisions` automatically.

The planner intentionally:

- bootstraps Storybook 10.5.10 only on supported web frontend targets and supported package managers;
- adds Playwright Test 1.62.1 and @axe-core/playwright 4.13.0 only for an applicable web frontend;
- adds shadcn MCP only when shadcn is already configured;
- does not install Motion as ceremony;
- does not initialize shadcn alongside an established parallel UI library;
- does not force upgrades of healthy existing tooling merely to match release pins.

## 4. shadcn initialization decision

If React web is compatible but `components.json` is absent, use the plan's decision:

- for a fresh/blank UI foundation with no established competing component system, initialize shadcn using the project's package manager and reviewed CLI 4.19.0;
- for a mature existing interface, preserve its component architecture unless the user explicitly wants shadcn introduced or a migration planned.

After a successful shadcn initialization, run the MCP merge helper:

```bash
node "${CLAUDE_SKILL_DIR}/scripts/merge-shadcn-mcp.mjs" .
```

The helper is idempotent and refuses to overwrite an existing `shadcn` MCP entry.

## 5. Baseline verification

After mutations, use the cheapest meaningful checks:

- confirm package installation completed with the project's package manager;
- confirm Storybook config/scripts resolve when Storybook was added;
- confirm Playwright Test resolves when added;
- validate `.mcp.json` parses and report the shadcn MCP command/version;
- run existing type/lint/build checks only where appropriate to the changed setup.

Report **installed / preserved / intentionally skipped / needs decision**. Never require Chromatic or another paid service.

From hersti/ui-engineering, MIT.

More from hersti/ui-engineering