Cài đặt

1. Yêu cầu

React 19 và Tailwind CSS v4.

2. Thêm một component

npx shadcn add https://werewolf-ui.vercel.app/r/button.json

Lệnh này thêm luôn styles/werewolf.css, bộ token mà mọi component dùng, cùng các component khác mà nó cần.

3. Import token một lần

Trong file CSS gốc, ngay sau @import "tailwindcss", import styles/werewolf.css bằng đường dẫn tính từ file CSS đó.

@import "../styles/werewolf.css";

Với app Next.js, file CSS gốc thường là app/globals.css, nên dòng cần thêm là @import "../styles/werewolf.css";. Chỉ cần làm một lần, các component cài sau sẽ tự có style.

4. Đưa luật cho agent

Cho agent đọc design skill trước khi viết UI.

5. Chọn màu accent riêng

Dùng ô chọn màu trên header, rồi copy hoặc tải file về và thay styles/werewolf.css.

6. Local CLI alpha

Local init, add and theme are implemented for review. This package is not published. Build and install a local tarball from the repository before running these commands. The public registry flow above remains available.

npx werewolf-ui init --yes --json
npx werewolf-ui add button input dialog --yes --json
npx werewolf-ui theme --accent "<hex>" --yes --json

The alpha requires Node 20+, React 19 and Tailwind CSS v4 in a Next.js app-router or Vite React TypeScript app with compiler aliases. Use --cwd to select the app. Init installs tokens, their CSS import and agent rules. Component APIs remain draft. Consumer lint, platform token export with decided native touch sizing (tokens build) and the five-tool MCP stdio server are available in the installed local tarball. The npm package is not published. Read the CLI README for export commands, seed preservation and rollback limits.

npx werewolf-ui lint src --json
npx werewolf-ui lint src --fix --yes --json

Lint reports static styling and repairs only proven edits. Ambiguous colors remain errors with suggestions; dynamic styles remain warnings. It checks repaired content before writing and rolls back on write failure. Read coverage even when the exit code is zero.

npx werewolf-ui mcp --cwd /absolute/path/to/app

Configure a compatible MCP client to launch that local process with an explicit existing root. It exposes read-only catalog, search, component, theme and lint tools. Stdout is protocol traffic even with --json; diagnostics use stderr. MCP never installs, fixes or writes consumer files. See docs/mcp.md in the repository for the client-neutral configuration and verified client boundary.

npx werewolf-ui docs button
npx werewolf-ui add --help

Docs prints the page URL for a component, or this installation page without a name, and opens it only in an interactive terminal. Each command prints its own options with --help.

Theme preserves omitted choices and seed metadata; --yes never overwrites user edits. Edited generated CSS requires its exact --overwrite path. Add preserves existing theme bytes and refuses differing components, including dependencies, without explicit component overwrite. Read the CLI README for rollback limits and local tarball instructions.