shadcn-ui-integrator

스타3

포크0

업데이트2026년 6월 8일 09:17

Install, configure, and use shadcn/ui in React-style projects. Use when a repo needs shadcn/ui initialization, component installation, monorepo UI package setup, components.json review, registry or MCP guidance, or UI composition rules.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

출처

pax-k

pax-k/pax-fullstack-harness

GitHub 저장소 열기 Creator 저장소 보기

다운로드

shadcn/ui Integrator

Purpose

Make shadcn/ui usable in the target repo without guessing framework, aliases, component ownership, or registry setup.

Inspect First

framework, package manager, components.json, Tailwind config, UI package, app directory, aliases, and existing components
whether the project is a monorepo and where shared UI should live
installed shadcn components and any private registries

Procedure

Detect setup state.
- If components.json exists, read it before adding components.
- If shadcn is missing in a new supported app, choose the CLI runner from the repo package manager: Bun uses bunx, pnpm uses pnpm dlx, npm uses npx, and Yarn uses yarn dlx.
- The official pattern is <runner> shadcn@latest init -t <framework>.
- Supported templates include next, vite, start, react-router, and astro.
- For existing projects, follow the framework-specific existing-project path rather than forcing a template.
Handle monorepos.
- Prefer a shared UI package when one already exists, such as packages/ui.
- Keep app-specific composition in the app and reusable primitives in the UI package.
- Update aliases so imports match components.json.
Add components deliberately.
- Use <runner> shadcn@latest add <component> or the repo's established command.
- Add only components needed for the task.
- Preserve local customizations in generated component files.
- Icon-only controls must expose accessible names.
- Use $click-path-and-browser-qa when component changes affect user workflows or browser acceptance paths.
Document usage.
- Create or update docs/development/ui.md from assets/templates/shadcn-ui-usage.md.tmpl.
- Update docs/quality/golden-patterns.md with preferred composition examples.
- Mention shadcn MCP as guided setup only: Codex users manually add [mcp_servers.shadcn] command = "npx" and args = ["shadcn@latest", "mcp"] to ~/.codex/config.toml when desired.
- Use project-local-skill-generator to create project-ui-workflow when UI docs, component paths, and e2e commands are stable.

Validation

Run component install commands only after inspecting existing files.
Run lint, typecheck, and relevant browser/UI tests.
Confirm components.json paths and aliases match generated imports.
Confirm UI controls are accessible by role/name where practical.

Completion Criteria

shadcn/ui is installed or the setup blocker is documented.
Components live in the right package or app boundary.
Usage docs explain component ownership, install commands, aliases, registry notes, and validation.

이 저장소의 다른 Skills

같은 저장소

agent-failure-introspection

pax-k/pax-fullstack-harness

Diagnose failed or unreliable agent workflows by classifying bad assumptions, missing observations, tool misuse, wrapper failures, hidden repair loops, incomplete validation, handoff gaps, and repeated failure patterns. Use after a failed harness run, flaky agent output, or confusing validation loop.

2026-06-083

agent-reviewer

pax-k/pax-fullstack-harness

Review agent-generated changes against project rules. Use when asked for a review, before opening a PR, after large Codex edits, or when checking diffs for correctness, security, architecture, tests, docs drift, dependencies, migrations, and release risk.

2026-06-083

agents-md-author

pax-k/pax-fullstack-harness

Generate or maintain a minimal high-signal AGENTS.md for coding agents. Use whenever a repo needs agent instructions, an existing AGENTS.md is too long or vague, or project docs/scripts need a concise routing map for Codex.

2026-06-083

architecture-boundary-enforcer

pax-k/pax-fullstack-harness

Define and mechanically enforce architecture boundaries for a repo. Use when a project needs allowed dependency rules, forbidden imports, layer documentation, dependency maps, circular dependency checks, or protection against agent-created architectural drift.

2026-06-083

better-t-stack-scaffolder

pax-k/pax-fullstack-harness

Scaffold a new TypeScript web, mobile, API, or full-stack project with Better-T-Stack, then harden it with the Pax Fullstack Harness. Use whenever the user wants a new TypeScript app scaffold, mentions Better-T-Stack, asks for a modern type-safe stack, or wants Codex to start a repo that is agent-ready from day one.

2026-06-083

chrome-devtools-runtime-debugger

pax-k/pax-fullstack-harness

Use guided Chrome DevTools MCP setup and workflows for browser runtime debugging. Use when a web app needs console, network, DOM, accessibility, Lighthouse, performance, responsive, or live-browser investigation beyond normal tests.

2026-06-083

name	shadcn-ui-integrator
description	Install, configure, and use shadcn/ui in React-style projects. Use when a repo needs shadcn/ui initialization, component installation, monorepo UI package setup, components.json review, registry or MCP guidance, or UI composition rules.

shadcn/ui Integrator

Purpose

Make shadcn/ui usable in the target repo without guessing framework, aliases, component ownership, or registry setup.

Inspect First

framework, package manager, components.json, Tailwind config, UI package, app directory, aliases, and existing components
whether the project is a monorepo and where shared UI should live
installed shadcn components and any private registries

Procedure

Detect setup state.
- If components.json exists, read it before adding components.
- If shadcn is missing in a new supported app, choose the CLI runner from the repo package manager: Bun uses bunx, pnpm uses pnpm dlx, npm uses npx, and Yarn uses yarn dlx.
- The official pattern is <runner> shadcn@latest init -t <framework>.
- Supported templates include next, vite, start, react-router, and astro.
- For existing projects, follow the framework-specific existing-project path rather than forcing a template.
Handle monorepos.
- Prefer a shared UI package when one already exists, such as packages/ui.
- Keep app-specific composition in the app and reusable primitives in the UI package.
- Update aliases so imports match components.json.
Add components deliberately.
- Use <runner> shadcn@latest add <component> or the repo's established command.
- Add only components needed for the task.
- Preserve local customizations in generated component files.
- Icon-only controls must expose accessible names.
- Use $click-path-and-browser-qa when component changes affect user workflows or browser acceptance paths.
Document usage.
- Create or update docs/development/ui.md from assets/templates/shadcn-ui-usage.md.tmpl.
- Update docs/quality/golden-patterns.md with preferred composition examples.
- Mention shadcn MCP as guided setup only: Codex users manually add [mcp_servers.shadcn] command = "npx" and args = ["shadcn@latest", "mcp"] to ~/.codex/config.toml when desired.
- Use project-local-skill-generator to create project-ui-workflow when UI docs, component paths, and e2e commands are stable.

Validation

Run component install commands only after inspecting existing files.
Run lint, typecheck, and relevant browser/UI tests.
Confirm components.json paths and aliases match generated imports.
Confirm UI controls are accessible by role/name where practical.

Completion Criteria

shadcn/ui is installed or the setup blocker is documented.
Components live in the right package or app boundary.
Usage docs explain component ownership, install commands, aliases, registry notes, and validation.