kataster 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +3 -3
- package/CHANGELOG.md +17 -0
- package/README.md +7 -4
- package/guide/install.md +2 -2
- package/guide/release.md +42 -11
- package/package.json +1 -2
- package/src/cli.mjs +11 -12
- package/src/detect.mjs +1 -2
- package/src/install.mjs +0 -13
- package/extras/skills/shadcn/SKILL.md +0 -277
- package/extras/skills/shadcn/agents/openai.yml +0 -5
- package/extras/skills/shadcn/assets/shadcn-small.png +0 -0
- package/extras/skills/shadcn/assets/shadcn.png +0 -0
- package/extras/skills/shadcn/cli.md +0 -290
- package/extras/skills/shadcn/customization.md +0 -209
- package/extras/skills/shadcn/evals/evals.json +0 -77
- package/extras/skills/shadcn/mcp.md +0 -105
- package/extras/skills/shadcn/registry.md +0 -277
- package/extras/skills/shadcn/rules/base-vs-radix.md +0 -306
- package/extras/skills/shadcn/rules/chat.md +0 -250
- package/extras/skills/shadcn/rules/composition.md +0 -213
- package/extras/skills/shadcn/rules/forms.md +0 -192
- package/extras/skills/shadcn/rules/icons.md +0 -101
- package/extras/skills/shadcn/rules/styling.md +0 -185
package/AGENTS.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# Kataster – development entry point
|
|
2
2
|
|
|
3
|
-
This repository is the **toolkit**, not an installation of it. `.claude/`, `.opencode
|
|
4
|
-
|
|
3
|
+
This repository is the **toolkit**, not an installation of it. `.claude/`, `.opencode/` and `templates/` are the
|
|
4
|
+
payload that `npx kataster init` copies into a target repository.
|
|
5
5
|
|
|
6
6
|
- **Installer:** `src/cli.mjs` (commands, prompts), `src/install.mjs` (copy, merge, manifest, upgrade),
|
|
7
7
|
`src/detect.mjs` (stack detection), `src/repo.mjs` (monorepo tooling and workspaces), `src/util.mjs`.
|
|
8
8
|
- **Payload:** `.claude/` (skills, agents, hooks, lib, settings), `.opencode/` (commands, agents, plugin),
|
|
9
|
-
`templates/` (docs skeleton, project profile defaults, conventions template)
|
|
9
|
+
`templates/` (docs skeleton, project profile defaults, conventions template).
|
|
10
10
|
- **Tests:** `npm test` (installs into temp directories and asserts the result).
|
|
11
11
|
- **Docs for users:** `README.md` and `guide/`.
|
|
12
12
|
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.3.0 – 2026-10-31
|
|
4
|
+
|
|
5
|
+
- **Removed the optional extras and the vendored `shadcn` skill.** `--with` is gone; the CLI fails with a clear
|
|
6
|
+
message instead of reading the value as a directory. The payload no longer ships third-party content: install a
|
|
7
|
+
UI skill such as shadcn/ui in the project that needs it. An installation made with `--with shadcn` keeps the files
|
|
8
|
+
under `.claude/skills/shadcn/`; `upgrade` leaves them alone and drops the stale `workflow.extras` field from
|
|
9
|
+
`.claude/project.json`.
|
|
10
|
+
|
|
11
|
+
## 0.2.1 – 2026-10-31
|
|
12
|
+
|
|
13
|
+
- Releases are published from CI with npm trusted publishing (OIDC): pushing a `v*` tag runs the type check and the
|
|
14
|
+
test suite, verifies that the tag matches `package.json`, and publishes with provenance attestations – no token
|
|
15
|
+
in the repository, no one-time password. `guide/release.md` documents the setup and the manual fallback.
|
|
16
|
+
- The repository is maintained in the open: `CONTRIBUTING.md`, `SECURITY.md`, `CODE_OF_CONDUCT.md`, issue and pull
|
|
17
|
+
request templates, Dependabot for the tooling dependencies and a protected `main` (pull request required, green
|
|
18
|
+
CI, squash only).
|
|
19
|
+
|
|
3
20
|
## 0.2.0 – 2026-10-31
|
|
4
21
|
|
|
5
22
|
- **Renamed from La Guardia to Kataster.** The CLI is `npx kataster`, the state directory is `.kataster/`, the
|
package/README.md
CHANGED
|
@@ -301,10 +301,6 @@ npx kataster doctor
|
|
|
301
301
|
overwrite files you changed locally – it lists them instead. `--force` overwrites and writes a backup to
|
|
302
302
|
`.kataster/backup/`.
|
|
303
303
|
|
|
304
|
-
## Optional extras
|
|
305
|
-
|
|
306
|
-
- `--with shadcn` installs the shadcn/ui skill for projects that use it.
|
|
307
|
-
|
|
308
304
|
## Design notes
|
|
309
305
|
|
|
310
306
|
- **`.claude/` is the source of truth.** OpenCode and Claude Code share skills, agents and hooks; `.opencode/` is an
|
|
@@ -320,6 +316,13 @@ The name is a historical reference, not a domain: the workflow has none of its o
|
|
|
320
316
|
was removed when the package was extracted – the examples are neutral, the stack is detected, and the language is
|
|
321
317
|
yours.
|
|
322
318
|
|
|
319
|
+
## Contributing
|
|
320
|
+
|
|
321
|
+
The toolkit is maintained in the open: bug reports, a skill that fills a real gap and sharper prompts are welcome.
|
|
322
|
+
[CONTRIBUTING.md](CONTRIBUTING.md) has the setup, the payload rules and the release process;
|
|
323
|
+
[SECURITY.md](SECURITY.md) is the way to report a vulnerability privately. Participation is covered by the
|
|
324
|
+
[Code of Conduct](CODE_OF_CONDUCT.md).
|
|
325
|
+
|
|
323
326
|
## License
|
|
324
327
|
|
|
325
328
|
MIT
|
package/guide/install.md
CHANGED
|
@@ -15,7 +15,6 @@ npx kataster init [dir]
|
|
|
15
15
|
| `--backlog <provider>` | Where stories live: `local` (default), `github`, `jira` |
|
|
16
16
|
| `--jira-project <key>` | Jira project key (with `--backlog jira`) |
|
|
17
17
|
| `--github-repo <repo>` | `owner/name` for a GitHub backlog (default: the current repository) |
|
|
18
|
-
| `--with <list>` | Optional extras, comma-separated (`shadcn`) |
|
|
19
18
|
| `--yes`, `-y` | Non-interactive: accept the detected defaults |
|
|
20
19
|
| `--no-install` | Skip `npm install --prefix .claude` |
|
|
21
20
|
| `--dry-run` | Show what would happen, write nothing |
|
|
@@ -57,7 +56,8 @@ npx kataster upgrade
|
|
|
57
56
|
rewritten. `backlog.labelPrefix` in `project.json` is kept, so labels already in GitHub or Jira stay valid.
|
|
58
57
|
- An existing `project.json` keeps its content. If it predates the backlog backend, add the `backlog` section by hand
|
|
59
58
|
(see the README) – without it the provider stays `local`.
|
|
60
|
-
- `--with
|
|
59
|
+
- An extra installed by an older version (`--with shadcn`, up to 0.2.1) stays on disk as a project file; upgrade no
|
|
60
|
+
longer touches it. Delete `.claude/skills/shadcn/` if you do not want it.
|
|
61
61
|
|
|
62
62
|
## Harness setup
|
|
63
63
|
|
package/guide/release.md
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
npm install --prefix .claude --no-audit --no-fund
|
|
12
12
|
npm run typecheck --prefix .claude
|
|
13
13
|
npm test
|
|
14
|
-
npm pack --dry-run #
|
|
14
|
+
npm pack --dry-run # 147 files, 215 kB – no examples/, no node_modules, no state/
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
4. Install the tarball once and start a throwaway project with it – a tarball that installs is not the same as a
|
|
@@ -26,6 +26,42 @@ kataster doctor /tmp/smoke
|
|
|
26
26
|
|
|
27
27
|
## 2. Publish
|
|
28
28
|
|
|
29
|
+
### Through CI (the normal case)
|
|
30
|
+
|
|
31
|
+
The tag publishes. `v0.2.0` starts `.github/workflows/release.yml`, which checks that the tag matches
|
|
32
|
+
`package.json`, runs the type check and the suite, then publishes over OIDC – no npm token in the repository, no
|
|
33
|
+
one-time password, and provenance attestations are written automatically.
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
git push origin main
|
|
37
|
+
git tag -a v0.2.0 -m "Kataster 0.2.0"
|
|
38
|
+
git push origin v0.2.0
|
|
39
|
+
gh run watch
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
If the tag and `package.json` disagree, the workflow fails before it publishes – bump the version first, then tag.
|
|
43
|
+
|
|
44
|
+
### The first time only: trusted publisher
|
|
45
|
+
|
|
46
|
+
npm has to know which workflow may publish. On npmjs.com → `kataster` → Settings → **Trusted publishing** →
|
|
47
|
+
GitHub Actions:
|
|
48
|
+
|
|
49
|
+
| Field | Value |
|
|
50
|
+
|---|---|
|
|
51
|
+
| Organization or user | `hemi1986` |
|
|
52
|
+
| Repository | `kataster` |
|
|
53
|
+
| Workflow filename | `release.yml` |
|
|
54
|
+
| Environment name | – (leave empty) |
|
|
55
|
+
| Allowed actions | **Allow npm publish** (the default `npm stage publish` alone is not enough) |
|
|
56
|
+
|
|
57
|
+
The first publish has to succeed within **two days**, otherwise the configuration expires and has to be created
|
|
58
|
+
again. Once it works, lock the old path down: Settings → **Publishing access** → "Require two-factor authentication
|
|
59
|
+
and disallow tokens". Trusted publishers keep working; tokens and OTP stop working.
|
|
60
|
+
|
|
61
|
+
### By hand (fallback)
|
|
62
|
+
|
|
63
|
+
If CI is unavailable or a version has to go out without a tag:
|
|
64
|
+
|
|
29
65
|
```bash
|
|
30
66
|
npm login # once per machine
|
|
31
67
|
npm publish --access public
|
|
@@ -33,21 +69,16 @@ npm publish --access public
|
|
|
33
69
|
|
|
34
70
|
`prepublishOnly` runs the test suite, so a red suite cannot be published.
|
|
35
71
|
|
|
36
|
-
Verify
|
|
72
|
+
## 3. Verify
|
|
37
73
|
|
|
38
74
|
```bash
|
|
39
75
|
npm view kataster version
|
|
40
76
|
npx kataster@latest --version
|
|
41
77
|
```
|
|
42
78
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
```bash
|
|
48
|
-
git tag -a v0.2.0 -m "Kataster 0.2.0"
|
|
49
|
-
git push origin main v0.2.0
|
|
50
|
-
```
|
|
79
|
+
The package page shows a provenance badge (`built and signed on GitHub Actions`) and the workflow run is linked to
|
|
80
|
+
the tag. A missing badge means the publish did not go through trusted publishing. The registry can take a minute or
|
|
81
|
+
two before a new version appears; `npm view kataster version` is the source of truth, not the cache in `npx`.
|
|
51
82
|
|
|
52
83
|
## What ships
|
|
53
84
|
|
|
@@ -55,7 +86,7 @@ git push origin main v0.2.0
|
|
|
55
86
|
|
|
56
87
|
- `bin/`, `src/` – the CLI and installer
|
|
57
88
|
- `.claude/`, `.opencode/` – the payload the installer copies
|
|
58
|
-
- `templates
|
|
89
|
+
- `templates/` – docs skeleton
|
|
59
90
|
- `guide/`, `README.md`, `AGENTS.md`, `CHANGELOG.md`, `LICENSE`
|
|
60
91
|
|
|
61
92
|
Not shipped: `test/`, `examples/`, `.github/`. `examples/` contains project-specific facts and is reference material
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kataster",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Agent workflow for domain-driven discovery and delivery – drop it into a greenfield or brownfield repository and build the domain by grilling.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"agents",
|
|
@@ -40,7 +40,6 @@
|
|
|
40
40
|
"bin",
|
|
41
41
|
"src",
|
|
42
42
|
"templates",
|
|
43
|
-
"extras",
|
|
44
43
|
"guide",
|
|
45
44
|
".claude",
|
|
46
45
|
".opencode",
|
package/src/cli.mjs
CHANGED
|
@@ -25,7 +25,6 @@ Options:
|
|
|
25
25
|
--backlog <provider> Where stories live: local (default), github, jira
|
|
26
26
|
--jira-project <key> Jira project key (with --backlog jira)
|
|
27
27
|
--github-repo <repo> GitHub repository owner/name (with --backlog github; default: this repo)
|
|
28
|
-
--with <list> Optional extras, comma-separated (available: shadcn)
|
|
29
28
|
--force Overwrite locally modified workflow files (backup is kept)
|
|
30
29
|
--no-install Do not run "npm install --prefix .claude"
|
|
31
30
|
--yes, -y Non-interactive: accept the detected defaults
|
|
@@ -34,7 +33,7 @@ Options:
|
|
|
34
33
|
|
|
35
34
|
function parse(argv) {
|
|
36
35
|
const options = { _: [] };
|
|
37
|
-
const takesValue = new Set(["name", "ui-language", "artifacts", "
|
|
36
|
+
const takesValue = new Set(["name", "ui-language", "artifacts", "backlog", "jira-project", "github-repo"]);
|
|
38
37
|
for (let i = 0; i < argv.length; i += 1) {
|
|
39
38
|
const arg = argv[i];
|
|
40
39
|
if (!arg.startsWith("-")) {
|
|
@@ -49,6 +48,9 @@ function parse(argv) {
|
|
|
49
48
|
else if (arg === "--no-install") options.noInstall = true;
|
|
50
49
|
else if (arg === "--yes" || arg === "-y") options.yes = true;
|
|
51
50
|
else if (arg === "--dry-run") options.dryRun = true;
|
|
51
|
+
else if (arg === "--with" || arg.startsWith("--with=")) {
|
|
52
|
+
throw new Error("--with was removed in 0.3.0 – install an extra such as shadcn/ui directly in your project.");
|
|
53
|
+
}
|
|
52
54
|
else if (arg.startsWith("--") && arg.includes("=")) {
|
|
53
55
|
const [key, ...rest] = arg.slice(2).split("=");
|
|
54
56
|
options[camel(key)] = rest.join("=");
|
|
@@ -104,9 +106,9 @@ Useful commands afterwards:
|
|
|
104
106
|
`);
|
|
105
107
|
}
|
|
106
108
|
|
|
107
|
-
function printSummary(installer
|
|
109
|
+
function printSummary(installer) {
|
|
108
110
|
const { created, updated, conflicts } = installer.summary();
|
|
109
|
-
console.log(`\nDone: ${created} created, ${updated} updated
|
|
111
|
+
console.log(`\nDone: ${created} created, ${updated} updated.`);
|
|
110
112
|
if (conflicts.length) {
|
|
111
113
|
console.log(`\n${conflicts.length} file(s) kept because they were modified locally:`);
|
|
112
114
|
for (const c of conflicts) console.log(` - ${c}`);
|
|
@@ -117,7 +119,6 @@ function printSummary(installer, extras) {
|
|
|
117
119
|
async function init(options) {
|
|
118
120
|
const root = resolve(options._[1] ?? ".");
|
|
119
121
|
const detection = detectProject(root);
|
|
120
|
-
const extras = String(options.with ?? "").split(",").map((s) => s.trim()).filter(Boolean);
|
|
121
122
|
|
|
122
123
|
banner();
|
|
123
124
|
if (existsSync(join(root, ".claude", "install.json"))) {
|
|
@@ -147,7 +148,7 @@ async function init(options) {
|
|
|
147
148
|
: "";
|
|
148
149
|
|
|
149
150
|
const profile = buildProfile(root, {
|
|
150
|
-
name, kind, uiLanguage, artifactLanguage, detection,
|
|
151
|
+
name, kind, uiLanguage, artifactLanguage, detection,
|
|
151
152
|
backlog, jiraProject, githubRepo,
|
|
152
153
|
});
|
|
153
154
|
profile.workflow.version = VERSION;
|
|
@@ -163,7 +164,6 @@ async function init(options) {
|
|
|
163
164
|
installer.putClaudeMd(profile);
|
|
164
165
|
installer.putProfile(profile);
|
|
165
166
|
installer.putConventions(profile);
|
|
166
|
-
installer.installExtras(extras);
|
|
167
167
|
installer.updateGitignore();
|
|
168
168
|
installer.writeManifest();
|
|
169
169
|
|
|
@@ -177,7 +177,7 @@ async function init(options) {
|
|
|
177
177
|
if (!result.ok) console.log("\nTooling dependencies could not be installed – run: npm install --prefix .claude");
|
|
178
178
|
}
|
|
179
179
|
|
|
180
|
-
printSummary(installer
|
|
180
|
+
printSummary(installer);
|
|
181
181
|
nextSteps(root, profile);
|
|
182
182
|
}
|
|
183
183
|
|
|
@@ -190,7 +190,6 @@ async function upgrade(options) {
|
|
|
190
190
|
return init({ ...options, _: ["init", root] });
|
|
191
191
|
}
|
|
192
192
|
const profile = readJson(join(root, ".claude", "project.json")) ?? {};
|
|
193
|
-
const extras = options.with ? String(options.with).split(",").map((s) => s.trim()).filter(Boolean) : profile.workflow?.extras ?? [];
|
|
194
193
|
|
|
195
194
|
console.log(`Upgrading ${root} from ${installer.manifest.version ?? "?"} to ${VERSION}\n`);
|
|
196
195
|
installer.migrateLegacy();
|
|
@@ -202,12 +201,12 @@ async function upgrade(options) {
|
|
|
202
201
|
installer.putContext(profile);
|
|
203
202
|
installer.putClaudeMd(profile);
|
|
204
203
|
installer.putConventions(profile);
|
|
205
|
-
installer.installExtras(extras);
|
|
206
204
|
installer.updateGitignore();
|
|
207
205
|
installer.writeManifest();
|
|
208
206
|
|
|
209
207
|
if (profile.name && !options.dryRun) {
|
|
210
|
-
profile.workflow = { ...(profile.workflow ?? {}), version: VERSION
|
|
208
|
+
profile.workflow = { ...(profile.workflow ?? {}), version: VERSION };
|
|
209
|
+
delete profile.workflow.extras;
|
|
211
210
|
write(join(root, ".claude", "project.json"), `${JSON.stringify(profile, null, 2)}\n`);
|
|
212
211
|
}
|
|
213
212
|
|
|
@@ -216,7 +215,7 @@ async function upgrade(options) {
|
|
|
216
215
|
return;
|
|
217
216
|
}
|
|
218
217
|
if (!options.noInstall) installer.installToolingDependencies();
|
|
219
|
-
printSummary(installer
|
|
218
|
+
printSummary(installer);
|
|
220
219
|
console.log("\nUpgrade complete. Project content (CONTEXT.md, docs/domain, docs/stories, ADRs) was not touched.");
|
|
221
220
|
}
|
|
222
221
|
|
package/src/detect.mjs
CHANGED
|
@@ -157,7 +157,7 @@ export function detectProject(root) {
|
|
|
157
157
|
};
|
|
158
158
|
}
|
|
159
159
|
|
|
160
|
-
export function buildProfile(root, { name, kind, uiLanguage, artifactLanguage, detection,
|
|
160
|
+
export function buildProfile(root, { name, kind, uiLanguage, artifactLanguage, detection, backlog = "local", jiraProject = "", githubRepo = "" }) {
|
|
161
161
|
const stackSummary = [
|
|
162
162
|
...detection.languages,
|
|
163
163
|
...detection.frameworks,
|
|
@@ -230,7 +230,6 @@ export function buildProfile(root, { name, kind, uiLanguage, artifactLanguage, d
|
|
|
230
230
|
},
|
|
231
231
|
workflow: {
|
|
232
232
|
version: "0.1.0",
|
|
233
|
-
extras,
|
|
234
233
|
installedAt: new Date().toISOString(),
|
|
235
234
|
},
|
|
236
235
|
};
|
package/src/install.mjs
CHANGED
|
@@ -341,19 +341,6 @@ export class Installer {
|
|
|
341
341
|
});
|
|
342
342
|
}
|
|
343
343
|
|
|
344
|
-
installExtras(names = []) {
|
|
345
|
-
for (const name of names) {
|
|
346
|
-
const source = join(PKG, "extras", "skills", name);
|
|
347
|
-
if (!existsSync(source)) {
|
|
348
|
-
this.record("skip", source, `unknown extra '${name}'`);
|
|
349
|
-
continue;
|
|
350
|
-
}
|
|
351
|
-
for (const file of walk(source)) {
|
|
352
|
-
this.put(join(this.root, ".claude", "skills", name, relative(source, file)), read(file));
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
|
|
357
344
|
installToolingDependencies() {
|
|
358
345
|
if (this.dryRun) return { ok: true, skipped: true };
|
|
359
346
|
if (!existsSync(join(this.root, ".claude", "package.json"))) return { ok: true, skipped: true };
|
|
@@ -1,277 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: shadcn
|
|
3
|
-
description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
|
|
4
|
-
user-invocable: false
|
|
5
|
-
allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# shadcn/ui
|
|
9
|
-
|
|
10
|
-
A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
|
|
11
|
-
|
|
12
|
-
> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
|
|
13
|
-
|
|
14
|
-
## Current Project Context
|
|
15
|
-
|
|
16
|
-
```json
|
|
17
|
-
!`npx shadcn@latest info --json`
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.
|
|
21
|
-
|
|
22
|
-
## Principles
|
|
23
|
-
|
|
24
|
-
1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
|
|
25
|
-
2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
|
|
26
|
-
3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc.
|
|
27
|
-
4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.
|
|
28
|
-
|
|
29
|
-
## Critical Rules
|
|
30
|
-
|
|
31
|
-
These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.
|
|
32
|
-
|
|
33
|
-
### Styling & Tailwind → [styling.md](./rules/styling.md)
|
|
34
|
-
|
|
35
|
-
- **`className` for layout, not styling.** Never override component colors or typography.
|
|
36
|
-
- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`.
|
|
37
|
-
- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`.
|
|
38
|
-
- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`.
|
|
39
|
-
- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`).
|
|
40
|
-
- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries.
|
|
41
|
-
- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking.
|
|
42
|
-
|
|
43
|
-
### Forms & Inputs → [forms.md](./rules/forms.md)
|
|
44
|
-
|
|
45
|
-
- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.
|
|
46
|
-
- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`.
|
|
47
|
-
- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.**
|
|
48
|
-
- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state.
|
|
49
|
-
- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading.
|
|
50
|
-
- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control.
|
|
51
|
-
|
|
52
|
-
### Component Structure → [composition.md](./rules/composition.md)
|
|
53
|
-
|
|
54
|
-
- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`.
|
|
55
|
-
- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md)
|
|
56
|
-
- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden.
|
|
57
|
-
- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`.
|
|
58
|
-
- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`.
|
|
59
|
-
- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`.
|
|
60
|
-
- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load.
|
|
61
|
-
|
|
62
|
-
### Use Components, Not Custom Markup → [composition.md](./rules/composition.md)
|
|
63
|
-
|
|
64
|
-
- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`.
|
|
65
|
-
- **Callouts use `Alert`.** Don't build custom styled divs.
|
|
66
|
-
- **Empty states use `Empty`.** Don't build custom empty state markup.
|
|
67
|
-
- **Toast follows the project base.** Use `toast` from the `toast` component for
|
|
68
|
-
Base UI projects. Use `toast()` from `sonner` for Radix and React Aria
|
|
69
|
-
projects.
|
|
70
|
-
- **Use `Separator`** instead of `<hr>` or `<div className="border-t">`.
|
|
71
|
-
- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs.
|
|
72
|
-
- **Use `Badge`** instead of custom styled spans.
|
|
73
|
-
|
|
74
|
-
### Icons → [icons.md](./rules/icons.md)
|
|
75
|
-
|
|
76
|
-
- **Icons in `Button` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon.
|
|
77
|
-
- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`.
|
|
78
|
-
- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup.
|
|
79
|
-
|
|
80
|
-
### Chat & Messaging → [chat.md](./rules/chat.md)
|
|
81
|
-
|
|
82
|
-
- **Chat UI composes the chat primitives.** Conversations use `MessageScroller`, rows use `Message`, surfaces use `Bubble`. Never hand-rolled bubble `div`s or a raw scroll container.
|
|
83
|
-
- **`MessageScroller` owns scroll behavior.** Streaming follow, anchoring, and jump-to-latest (`MessageScrollerButton`) are built in. Don't write a `useStickToBottom`/`ResizeObserver` hook.
|
|
84
|
-
- **Attachments use `Attachment`; system notes and dividers use `Marker`.** Not `Item` cards or `Separator` + a label.
|
|
85
|
-
|
|
86
|
-
### CLI
|
|
87
|
-
|
|
88
|
-
- **Never decode preset codes or build preset URLs manually.** Use `npx shadcn@latest preset decode <code>`, `preset url <code>`, or `preset open <code>`. For project-aware preset detection, use `npx shadcn@latest preset resolve`.
|
|
89
|
-
- **Apply preset codes directly with the CLI.** Use `npx shadcn@latest apply <code>` for existing projects, or `npx shadcn@latest init --preset <code>` when initializing.
|
|
90
|
-
|
|
91
|
-
## Key Patterns
|
|
92
|
-
|
|
93
|
-
These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above.
|
|
94
|
-
|
|
95
|
-
```tsx
|
|
96
|
-
// Form layout: FieldGroup + Field, not div + Label.
|
|
97
|
-
<FieldGroup>
|
|
98
|
-
<Field>
|
|
99
|
-
<FieldLabel htmlFor="email">Email</FieldLabel>
|
|
100
|
-
<Input id="email" />
|
|
101
|
-
</Field>
|
|
102
|
-
</FieldGroup>
|
|
103
|
-
|
|
104
|
-
// Validation: data-invalid on Field, aria-invalid on the control.
|
|
105
|
-
<Field data-invalid>
|
|
106
|
-
<FieldLabel>Email</FieldLabel>
|
|
107
|
-
<Input aria-invalid />
|
|
108
|
-
<FieldDescription>Invalid email.</FieldDescription>
|
|
109
|
-
</Field>
|
|
110
|
-
|
|
111
|
-
// Icons in buttons: data-icon, no sizing classes.
|
|
112
|
-
<Button>
|
|
113
|
-
<SearchIcon data-icon="inline-start" />
|
|
114
|
-
Search
|
|
115
|
-
</Button>
|
|
116
|
-
|
|
117
|
-
// Spacing: gap-*, not space-y-*.
|
|
118
|
-
<div className="flex flex-col gap-4"> // correct
|
|
119
|
-
<div className="space-y-4"> // wrong
|
|
120
|
-
|
|
121
|
-
// Equal dimensions: size-*, not w-* h-*.
|
|
122
|
-
<Avatar className="size-10"> // correct
|
|
123
|
-
<Avatar className="w-10 h-10"> // wrong
|
|
124
|
-
|
|
125
|
-
// Status colors: Badge variants or semantic tokens, not raw colors.
|
|
126
|
-
<Badge variant="secondary">+20.1%</Badge> // correct
|
|
127
|
-
<span className="text-emerald-600">+20.1%</span> // wrong
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
## Component Selection
|
|
131
|
-
|
|
132
|
-
| Need | Use |
|
|
133
|
-
| -------------------------- | --------------------------------------------------------------------------------------------------- |
|
|
134
|
-
| Button/action | `Button` with appropriate variant |
|
|
135
|
-
| Form inputs | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` |
|
|
136
|
-
| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem` |
|
|
137
|
-
| Data display | `Table`, `Card`, `Badge`, `Avatar` |
|
|
138
|
-
| Navigation | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination` |
|
|
139
|
-
| Overlays | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation) |
|
|
140
|
-
| Feedback | `toast` (Base UI), `sonner` (Radix/Aria), `Alert`, `Progress`, `Skeleton`, `Spinner` |
|
|
141
|
-
| Command palette | `Command` inside `Dialog` |
|
|
142
|
-
| Charts | `Chart` (wraps Recharts) |
|
|
143
|
-
| Layout | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible` |
|
|
144
|
-
| Empty states | `Empty` |
|
|
145
|
-
| Menus | `DropdownMenu`, `ContextMenu`, `Menubar` |
|
|
146
|
-
| Tooltips/info | `Tooltip`, `HoverCard`, `Popover` |
|
|
147
|
-
| Chat / conversation UI | `MessageScroller`, `Message`, `Bubble`, `Attachment`, `Marker` |
|
|
148
|
-
|
|
149
|
-
## Key Fields
|
|
150
|
-
|
|
151
|
-
The injected project context contains these key fields:
|
|
152
|
-
|
|
153
|
-
- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode.
|
|
154
|
-
- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive.
|
|
155
|
-
- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`.
|
|
156
|
-
- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.
|
|
157
|
-
- **`style`** → component visual treatment (e.g. `nova`, `vega`).
|
|
158
|
-
- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props.
|
|
159
|
-
- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`.
|
|
160
|
-
- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc.
|
|
161
|
-
- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA).
|
|
162
|
-
- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`).
|
|
163
|
-
- **`preset`** → resolved preset code and values for the current project. Use `npx shadcn@latest preset resolve --json` when you only need preset information.
|
|
164
|
-
|
|
165
|
-
See [cli.md — `info` command](./cli.md) for the full field reference.
|
|
166
|
-
|
|
167
|
-
## Component Docs, Examples, and Usage
|
|
168
|
-
|
|
169
|
-
Run `npx shadcn@latest docs <component>` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.
|
|
170
|
-
|
|
171
|
-
```bash
|
|
172
|
-
npx shadcn@latest docs button dialog select
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing.
|
|
176
|
-
|
|
177
|
-
## Workflow
|
|
178
|
-
|
|
179
|
-
1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh.
|
|
180
|
-
2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed.
|
|
181
|
-
3. **Find components** — `npx shadcn@latest search`.
|
|
182
|
-
4. **Get docs and examples** — run `npx shadcn@latest docs <component>` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`.
|
|
183
|
-
5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below).
|
|
184
|
-
6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.
|
|
185
|
-
7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on.
|
|
186
|
-
8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, `owner/repo`, etc.), ask which registry to use. Never default to a registry on behalf of the user.
|
|
187
|
-
9. **Switching presets** — Ask the user first: **overwrite**, **partial**, **merge**, or **skip**?
|
|
188
|
-
- **Inspect current preset**: `npx shadcn@latest preset resolve`. Use `--json` when you need structured values.
|
|
189
|
-
- **Inspect incoming preset**: `npx shadcn@latest preset decode <code>`. Use `preset url <code>` or `preset open <code>` to share or open the preset builder.
|
|
190
|
-
- **Overwrite**: `npx shadcn@latest apply <code>`. Overwrites detected components, fonts, and CSS variables.
|
|
191
|
-
- **Partial**: `npx shadcn@latest apply <code> --only theme,font`. Updates only the selected preset parts without reinstalling UI components. Supported values are `theme` and `font`; comma-separated combinations are allowed. `icon` is intentionally not supported, because icon changes may require full component reinstall and transforms.
|
|
192
|
-
- **Merge**: `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually.
|
|
193
|
-
- **Skip**: `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS, leaves components as-is.
|
|
194
|
-
- **Important**: Always run preset commands inside the user's project directory. `apply` only works in an existing project with a `components.json` file. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch/temp directory (e.g. for `--dry-run` comparisons), pass `--base <current-base>` explicitly — preset codes do not encode the base.
|
|
195
|
-
|
|
196
|
-
## Updating Components
|
|
197
|
-
|
|
198
|
-
When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.**
|
|
199
|
-
|
|
200
|
-
1. Run `npx shadcn@latest add <component> --dry-run` to see all files that would be affected.
|
|
201
|
-
2. For each file, run `npx shadcn@latest add <component> --diff <file>` to see what changed upstream vs local.
|
|
202
|
-
3. Decide per file based on the diff:
|
|
203
|
-
- No local changes → safe to overwrite.
|
|
204
|
-
- Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.
|
|
205
|
-
- User says "just update everything" → use `--overwrite`, but confirm first.
|
|
206
|
-
4. **Never use `--overwrite` without the user's explicit approval.**
|
|
207
|
-
|
|
208
|
-
## Quick Reference
|
|
209
|
-
|
|
210
|
-
```bash
|
|
211
|
-
# Create a new project.
|
|
212
|
-
npx shadcn@latest init --name my-app --preset base-nova
|
|
213
|
-
npx shadcn@latest init --name my-app --preset a2r6bw --template vite
|
|
214
|
-
|
|
215
|
-
# Create a monorepo project.
|
|
216
|
-
npx shadcn@latest init --name my-app --preset base-nova --monorepo
|
|
217
|
-
npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo
|
|
218
|
-
|
|
219
|
-
# Initialize existing project.
|
|
220
|
-
npx shadcn@latest init --preset base-nova
|
|
221
|
-
npx shadcn@latest init --defaults # shortcut: --template=next --preset=nova (base style implied)
|
|
222
|
-
|
|
223
|
-
# Apply a preset to an existing project.
|
|
224
|
-
npx shadcn@latest apply a2r6bw
|
|
225
|
-
npx shadcn@latest apply a2r6bw --only theme
|
|
226
|
-
npx shadcn@latest apply a2r6bw --only font
|
|
227
|
-
npx shadcn@latest apply a2r6bw --only theme,font
|
|
228
|
-
|
|
229
|
-
# Inspect preset codes and project preset state.
|
|
230
|
-
npx shadcn@latest preset decode a2r6bw
|
|
231
|
-
npx shadcn@latest preset url a2r6bw
|
|
232
|
-
npx shadcn@latest preset open a2r6bw
|
|
233
|
-
npx shadcn@latest preset resolve
|
|
234
|
-
npx shadcn@latest preset resolve --json
|
|
235
|
-
|
|
236
|
-
# Add components.
|
|
237
|
-
npx shadcn@latest add button card dialog
|
|
238
|
-
npx shadcn@latest add @magicui/shimmer-button
|
|
239
|
-
npx shadcn@latest add owner/repo/item
|
|
240
|
-
npx shadcn@latest add --all
|
|
241
|
-
|
|
242
|
-
# Preview changes before adding/updating.
|
|
243
|
-
npx shadcn@latest add button --dry-run
|
|
244
|
-
npx shadcn@latest add button --diff button.tsx
|
|
245
|
-
npx shadcn@latest add @acme/form --view button.tsx
|
|
246
|
-
npx shadcn@latest add owner/repo/item --dry-run
|
|
247
|
-
|
|
248
|
-
# Search registries.
|
|
249
|
-
npx shadcn@latest search @shadcn -q "sidebar"
|
|
250
|
-
npx shadcn@latest search @tailark -q "stats"
|
|
251
|
-
npx shadcn@latest search owner/repo -q "login"
|
|
252
|
-
npx shadcn@latest search # all configured registries
|
|
253
|
-
npx shadcn@latest search @shadcn -q "menu" -t ui # filter by item type
|
|
254
|
-
|
|
255
|
-
# Get component docs and example URLs.
|
|
256
|
-
npx shadcn@latest docs button dialog select
|
|
257
|
-
|
|
258
|
-
# View registry item details (for items not yet installed).
|
|
259
|
-
npx shadcn@latest view @shadcn/button
|
|
260
|
-
npx shadcn@latest view owner/repo/item
|
|
261
|
-
```
|
|
262
|
-
|
|
263
|
-
**Named presets:** `nova`, `vega`, `maia`, `lyra`, `mira`, `luma`
|
|
264
|
-
**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo)
|
|
265
|
-
**Preset codes:** Version-prefixed base62 strings (e.g. `a2r6bw` or `b0`), from [ui.shadcn.com](https://ui.shadcn.com).
|
|
266
|
-
|
|
267
|
-
## Detailed References
|
|
268
|
-
|
|
269
|
-
- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states
|
|
270
|
-
- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading
|
|
271
|
-
- [rules/chat.md](./rules/chat.md) — MessageScroller, Message, Bubble, Attachment, Marker; streaming, anchoring, jump-to-latest
|
|
272
|
-
- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects
|
|
273
|
-
- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index
|
|
274
|
-
- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion
|
|
275
|
-
- [cli.md](./cli.md) — Commands, flags, presets, templates
|
|
276
|
-
- [registry.md](./registry.md) — Authoring source registries, `include`, item definitions, dependencies, GitHub registry rules
|
|
277
|
-
- [customization.md](./customization.md) — Theming, CSS variables, extending components
|
|
Binary file
|
|
Binary file
|