@withmata/blueprints 0.3.5 → 0.4.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.
Files changed (62) hide show
  1. package/.claude/skills/audit/SKILL.md +4 -4
  2. package/.claude/skills/blueprint-catalog/SKILL.md +17 -7
  3. package/.claude/skills/copywrite/SKILL.md +187 -0
  4. package/.claude/skills/copywrite-landing/SKILL.md +489 -0
  5. package/.claude/skills/design-system/SKILL.md +970 -0
  6. package/.claude/skills/new-project/SKILL.md +168 -112
  7. package/.claude/skills/scaffold-auth/SKILL.md +9 -9
  8. package/.claude/skills/scaffold-db/SKILL.md +14 -14
  9. package/.claude/skills/scaffold-env/SKILL.md +4 -4
  10. package/.claude/skills/scaffold-foundation/SKILL.md +15 -15
  11. package/.claude/skills/scaffold-tailwind/SKILL.md +17 -3
  12. package/.claude/skills/scaffold-ui/SKILL.md +155 -36
  13. package/ENGINEERING.md +2 -2
  14. package/blueprints/discovery/design-system/BLUEPRINT.md +1479 -0
  15. package/blueprints/discovery/marketing-copywriting/BLUEPRINT.md +664 -0
  16. package/blueprints/features/auth-better-auth/BLUEPRINT.md +20 -22
  17. package/blueprints/features/db-drizzle-postgres/BLUEPRINT.md +12 -12
  18. package/blueprints/features/db-drizzle-postgres/files/db/src/example-entity.ts +1 -1
  19. package/blueprints/features/db-drizzle-postgres/files/db/src/scripts/seed.ts +1 -1
  20. package/blueprints/features/env-t3/BLUEPRINT.md +1 -1
  21. package/blueprints/features/tailwind-v4/BLUEPRINT.md +9 -2
  22. package/blueprints/features/tailwind-v4/files/tailwind-config/shared-styles.css +80 -1
  23. package/blueprints/features/ui-shared-components/BLUEPRINT.md +411 -78
  24. package/blueprints/features/ui-shared-components/files/ui/components/ui/alert-dialog.tsx +192 -0
  25. package/blueprints/features/ui-shared-components/files/ui/components/ui/avatar.tsx +71 -0
  26. package/blueprints/features/ui-shared-components/files/ui/components/ui/badge.tsx +52 -0
  27. package/blueprints/features/ui-shared-components/files/ui/components/ui/breadcrumb.tsx +122 -0
  28. package/blueprints/features/ui-shared-components/files/ui/components/ui/button.tsx +56 -0
  29. package/blueprints/features/ui-shared-components/files/ui/components/ui/card-select.tsx +72 -0
  30. package/blueprints/features/ui-shared-components/files/ui/components/ui/card.tsx +100 -0
  31. package/blueprints/features/ui-shared-components/files/ui/components/ui/collapsible.tsx +34 -0
  32. package/blueprints/features/ui-shared-components/files/ui/components/ui/combobox.tsx +301 -0
  33. package/blueprints/features/ui-shared-components/files/ui/components/ui/dropdown-menu.tsx +264 -0
  34. package/blueprints/features/ui-shared-components/files/ui/components/ui/empty-state.tsx +43 -0
  35. package/blueprints/features/ui-shared-components/files/ui/components/ui/entity-select.tsx +110 -0
  36. package/blueprints/features/ui-shared-components/files/ui/components/ui/field.tsx +237 -0
  37. package/blueprints/features/ui-shared-components/files/ui/components/ui/form-field.tsx +217 -0
  38. package/blueprints/features/ui-shared-components/files/ui/components/ui/input-group.tsx +161 -0
  39. package/blueprints/features/ui-shared-components/files/ui/components/ui/input.tsx +20 -0
  40. package/blueprints/features/ui-shared-components/files/ui/components/ui/label.tsx +20 -0
  41. package/blueprints/features/ui-shared-components/files/ui/components/ui/org-switcher.tsx +114 -0
  42. package/blueprints/features/ui-shared-components/files/ui/components/ui/page-header.tsx +45 -0
  43. package/blueprints/features/ui-shared-components/files/ui/components/ui/pagination.tsx +52 -0
  44. package/blueprints/features/ui-shared-components/files/ui/components/ui/pill-select.tsx +151 -0
  45. package/blueprints/features/ui-shared-components/files/ui/components/ui/popover.tsx +41 -0
  46. package/blueprints/features/ui-shared-components/files/ui/components/ui/search-input.tsx +49 -0
  47. package/blueprints/features/ui-shared-components/files/ui/components/ui/select.tsx +205 -0
  48. package/blueprints/features/ui-shared-components/files/ui/components/ui/selected-entity-card.tsx +47 -0
  49. package/blueprints/features/ui-shared-components/files/ui/components/ui/separator.tsx +25 -0
  50. package/blueprints/features/ui-shared-components/files/ui/components/ui/sidebar.tsx +389 -0
  51. package/blueprints/features/ui-shared-components/files/ui/components/ui/status-filter.tsx +43 -0
  52. package/blueprints/features/ui-shared-components/files/ui/components/ui/tag-input.tsx +131 -0
  53. package/blueprints/features/ui-shared-components/files/ui/components/ui/textarea.tsx +18 -0
  54. package/blueprints/features/ui-shared-components/files/ui/components/ui/user-menu.tsx +149 -0
  55. package/blueprints/features/ui-shared-components/files/ui/components.json +11 -8
  56. package/blueprints/features/ui-shared-components/files/ui/package.json +20 -11
  57. package/blueprints/foundation/monorepo-turbo/BLUEPRINT.md +19 -20
  58. package/blueprints/foundation/monorepo-turbo/files/root/package.json +1 -1
  59. package/dist/index.js +1 -1
  60. package/package.json +1 -1
  61. package/blueprints/features/tailwind-v4/files/tailwind-config/package.json +0 -20
  62. package/blueprints/foundation/monorepo-turbo/files/root/pnpm-workspace.yaml +0 -5
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: scaffold-foundation
3
- description: Set up a Turborepo + pnpm monorepo skeleton (skip for single-repo apps)
3
+ description: Set up a Turborepo + bun monorepo skeleton (skip for single-repo apps)
4
4
  ---
5
5
 
6
6
  # Scaffold Foundation
@@ -154,9 +154,8 @@ Create the monorepo skeleton by adapting all files from the blueprint. Replace p
154
154
  ### 5a. Root Configuration
155
155
 
156
156
  From `files/root/`, create at project root:
157
- - `package.json` — root monorepo config
157
+ - `package.json` — root monorepo config (includes `workspaces` field)
158
158
  - `turbo.json` — task orchestration
159
- - `pnpm-workspace.yaml` — workspace patterns
160
159
  - `biome.json` — linting + formatting
161
160
  - `.gitignore` — from `files/root/gitignore`
162
161
 
@@ -188,8 +187,8 @@ Create empty directories for feature blueprints:
188
187
 
189
188
  After creating all files:
190
189
  1. Initialize git if not already a repo: `git init`
191
- 2. Run `pnpm install` to verify the workspace configuration is valid
192
- 3. Verify the dev server starts: `pnpm dev` (briefly — just check it boots)
190
+ 2. Run `bun install` to verify the workspace configuration is valid
191
+ 3. Verify the dev server starts: `bun dev` (briefly — just check it boots)
193
192
 
194
193
  ## Step 5.5: Optional Features
195
194
 
@@ -244,8 +243,8 @@ When the user opts in to frontend work, apply both tailwind-v4 and ui-shared-com
244
243
  ### 5.5d. Re-install
245
244
 
246
245
  If any optional features were applied:
247
- 1. Run `pnpm install` again to wire new workspace dependencies
248
- 2. Verify `pnpm dev` still boots cleanly
246
+ 1. Run `bun install` again to wire new workspace dependencies
247
+ 2. Verify `bun dev` still boots cleanly
249
248
 
250
249
  ## Step 6: Update Project Context
251
250
 
@@ -262,7 +261,7 @@ Then append the `## Foundation` section:
262
261
  ```yaml
263
262
  ## Foundation
264
263
  monorepo_tool: turborepo
265
- package_manager: pnpm
264
+ package_manager: bun
266
265
  npm_scope: "<scope>"
267
266
  node_version: ">=22"
268
267
  project_type: monorepo
@@ -311,11 +310,11 @@ Then append sections for each blueprint applied in this run. Foundation always a
311
310
 
312
311
  ```markdown
313
312
  ### Monorepo maintenance
314
- - After every code change: format with Biome (`pnpm biome check --write .`) before considering work complete
315
- - After adding new workspace packages: verify `pnpm-workspace.yaml` patterns match, run `pnpm install`
313
+ - After every code change: format with Biome (`bun biome check --write .`) before considering work complete
314
+ - After adding new workspace packages: verify `workspaces` field in root `package.json` includes the pattern, run `bun install`
316
315
  - After modifying shared configs (`config/typescript-config/`, `config/tailwind-config/`): verify all consumers still build
317
- - After changing `turbo.json`: verify task ordering with `pnpm turbo run <task> --dry`
318
- - After adding workspace dependencies: run `pnpm install` to create workspace links
316
+ - After changing `turbo.json`: verify task ordering with `bun turbo run <task> --dry`
317
+ - After adding workspace dependencies: run `bun install` to create workspace links
319
318
  - Keep `turbo.json` tasks with `cache: false` for any task with side effects (migrations, code generation)
320
319
 
321
320
  ### env-t3 maintenance
@@ -337,7 +336,7 @@ If frontend UI was applied, also append:
337
336
  - Colors use OKLCH color space — do not use hex or RGB
338
337
 
339
338
  ### ui-shared-components maintenance
340
- - Add shadcn components via `pnpm dlx shadcn@latest add <name>` from packages/ui/
339
+ - Add shadcn components via `bunx shadcn@latest add <name>` from packages/ui/
341
340
  - Use cn() for all className composition — never concatenate class strings manually
342
341
  - Internal imports use #prefix (#components/ui/button); cross-package imports use @scope/ui/components/ui/button
343
342
  - After adding a new export directory: add to both exports and imports in packages/ui/package.json
@@ -353,8 +352,8 @@ Tell the user:
353
352
  - Project structure overview (directory tree — include optional features that were applied)
354
353
  - What was configured (scope, Node version, tooling)
355
354
  - Which optional features were included
356
- - How to start development: `pnpm dev`
357
- - If frontend UI was set up: how to add shadcn components (`cd packages/ui && pnpm dlx shadcn@latest add button`)
355
+ - How to start development: `bun dev`
356
+ - If frontend UI was set up: how to add shadcn components (`cd packages/ui && bunx shadcn@latest add button`)
358
357
  - Available feature blueprints to install next: `/scaffold-db`, `/scaffold-auth`
359
358
 
360
359
  ### Upgrade Mode Summary
@@ -372,3 +371,4 @@ Tell the user:
372
371
  - If the user has customized colors in `shared-styles.css` or added variables to `env.ts`, ask before replacing. Offer to merge their customizations into the new version.
373
372
  - Feature blueprints will add scripts to root `package.json` and tasks to `turbo.json` — the foundation provides the base that they extend.
374
373
  - The individual `/scaffold-env`, `/scaffold-tailwind`, and `/scaffold-ui` skills still exist for projects that didn't use foundation or want to add features later. The foundation's optional feature steps follow the same blueprints — no duplication.
374
+ - Monorepo detection: check for `"workspaces"` in `package.json` as the primary indicator, or `turbo.json`, or `pnpm-workspace.yaml` (legacy).
@@ -59,10 +59,24 @@ If `tailwind-v4` is found in `.project-context.md` under `## Installed Blueprint
59
59
 
60
60
  Check `.project-context.md` for `project_type`. If not present, detect:
61
61
 
62
- - **Monorepo indicators**: `pnpm-workspace.yaml`, `turbo.json`, or `"workspaces"` in root `package.json`
62
+ - **Monorepo indicators**: `turbo.json`, `"workspaces"` in root `package.json`, or `pnpm-workspace.yaml`
63
63
  - **Single-repo indicators**: Single `package.json` at root, `src/` directory
64
64
 
65
- ### 2b. Check Existing Tailwind Setup
65
+ ### 2b. Check for Design System
66
+
67
+ Check if `docs/design/shared-styles.css` exists in the project root.
68
+
69
+ If found:
70
+ - Use it as the shared-styles.css **instead of the blueprint's generic template**
71
+ - Inform user: "Found custom design system tokens at `docs/design/shared-styles.css` — using your design instead of defaults."
72
+ - Verify it has all required CSS variables (31 semantic colors, radius, fonts). If any are missing, warn and fill with defaults.
73
+ - Still apply the standard `@import` directives and `@theme inline` structure if they're missing from the design system file.
74
+
75
+ If not found:
76
+ - Proceed with the generic template as before
77
+ - Mention: "Using default shadcn tokens. Run `/design-system` to create a custom visual identity for your product."
78
+
79
+ ### 2c. Check Existing Tailwind Setup
66
80
 
67
81
  - Does `config/tailwind-config/` exist? (Foundation blueprint creates this)
68
82
  - Read existing `shared-styles.css` — is it the minimal version or already upgraded?
@@ -125,7 +139,7 @@ Skip questions if the user has indicated preferences or if the project type make
125
139
 
126
140
  ### 4c. Install Dependencies
127
141
 
128
- Run `pnpm install` (or the project's package manager) to fetch new dependencies.
142
+ Run `bun install` (or the project's package manager) to fetch new dependencies.
129
143
 
130
144
  ## Step 5: Update Project Context
131
145
 
@@ -14,6 +14,7 @@ Read the full BLUEPRINT.md and all template files from the UI blueprint:
14
14
  ```
15
15
  ~/.withmata/blueprints/blueprints/features/ui-shared-components/BLUEPRINT.md
16
16
  ~/.withmata/blueprints/blueprints/features/ui-shared-components/files/**/*
17
+ ~/.withmata/blueprints/blueprints/features/ui-shared-components/files/ui/components/ui/**/*.tsx
17
18
  ```
18
19
 
19
20
  If not found at these paths, run `npx @withmata/blueprints` to install.
@@ -39,7 +40,7 @@ If `ui-shared-components` is in Installed Blueprints, switch to upgrade mode (St
39
40
  If `ui-shared-components` is found in `.project-context.md` under `## Installed Blueprints`, switch to upgrade mode.
40
41
 
41
42
  1. **Read installed state** — from project context, get `files_created`, `choices`, and `installed_at`
42
- 2. **Compare templates against installed files:**
43
+ 2. **Compare config/utility templates against installed files:**
43
44
  - `packages/ui/package.json` — compare exports, imports, dependencies. Look for new export patterns, updated deps.
44
45
  - `packages/ui/components.json` — compare shadcn config. Look for updated aliases or style changes.
45
46
  - `packages/ui/utils/cn.ts` — compare utility implementation.
@@ -47,25 +48,52 @@ If `ui-shared-components` is found in `.project-context.md` under `## Installed
47
48
  - `packages/ui/styles/globals.css` — compare style imports.
48
49
  - `packages/ui/tsconfig.json` — compare TypeScript config.
49
50
  - Check consuming app `globals.css` — verify `@import` and `@source` directives are present and correct.
50
- 3. **Present findings:**
51
+ 3. **Compare base component templates against installed versions:**
52
+
53
+ The 31 base component templates are **blueprint-owned** and can be updated during upgrades:
54
+ - Primitives: `button.tsx`, `input.tsx`, `label.tsx`, `textarea.tsx`, `badge.tsx`, `separator.tsx`
55
+ - Compound: `card.tsx`, `alert-dialog.tsx`, `select.tsx`, `combobox.tsx`, `dropdown-menu.tsx`, `sidebar.tsx`, `field.tsx`, `input-group.tsx`
56
+ - Navigation: `breadcrumb.tsx`, `collapsible.tsx`, `popover.tsx`
57
+ - Form widgets: `form-field.tsx`, `tag-input.tsx`, `pill-select.tsx`, `card-select.tsx`, `entity-select.tsx`, `selected-entity-card.tsx`
58
+ - Data display: `pagination.tsx`, `empty-state.tsx`, `avatar.tsx`
59
+ - App shell: `user-menu.tsx`, `org-switcher.tsx`, `page-header.tsx`, `status-filter.tsx`, `search-input.tsx`
60
+
61
+ Any components in `components/ui/` that are NOT in the above list are **user-owned** (added via `shadcn add` or custom) — never touch those.
62
+
63
+ For each blueprint-owned component:
64
+ - Diff the blueprint template against the installed version
65
+ - Track which files have changes vs which are unchanged
66
+ 4. **Present findings:**
51
67
  ```
52
68
  ui-shared-components was installed on <date>. Checking for updates...
53
69
 
54
- Updated files:
70
+ Updated config files:
55
71
  ☐ packages/ui/package.json — new export patterns or dependencies
56
72
  ☐ packages/ui/components.json — updated shadcn configuration
57
73
 
74
+ Updated base components:
75
+ ☐ components/ui/button.tsx — updated variant styles
76
+ ☐ components/ui/combobox.tsx — new Base UI pattern
77
+
58
78
  New files:
59
79
  ☐ packages/ui/utils/cva.ts — new utility (didn't exist in previous version)
60
80
 
61
81
  Unchanged:
62
82
  ✓ packages/ui/utils/cn.ts — no changes
83
+ ✓ components/ui/card.tsx — no changes
84
+ ... (N more unchanged)
85
+
86
+ User-owned (never touched):
87
+ ✓ components/ui/dialog.tsx — added by user via shadcn
88
+ ✓ components/ui/toast.tsx — added by user via shadcn
63
89
 
64
90
  Apply updates?
65
91
  ```
66
- 4. **Apply selectively** — `package.json` exports and `components.json` are blueprint-owned. `components/ui/` files are user-owned (shadcn-generated) — never touch those.
67
- 5. **Update project context** — update `installed_at` date
68
- 6. **Skip to Step 6 (Output Summary)**
92
+ 5. **Apply selectively** — config files and base components are blueprint-owned. User-added components (anything not in the 31-component list) are user-owned — never touch those.
93
+ 6. **Update project context** — update `installed_at` date
94
+ 7. **Skip to Step 6 (Output Summary)**
95
+
96
+ **Important:** Base components may have been customized by the user after initial scaffold. When presenting updates, show the diff so the user can decide whether to accept each change. Config files (`package.json`, `components.json`) are safe to update automatically.
69
97
 
70
98
  ## Step 2: Understand the Target Project
71
99
 
@@ -73,18 +101,18 @@ If `ui-shared-components` is found in `.project-context.md` under `## Installed
73
101
 
74
102
  Check `.project-context.md` for `project_type`. If not present, detect:
75
103
 
76
- - **Monorepo indicators**: `pnpm-workspace.yaml`, `turbo.json`, or `"workspaces"` in root `package.json`
104
+ - **Monorepo indicators**: `turbo.json`, `"workspaces"` in root `package.json`, or `pnpm-workspace.yaml`
77
105
  - **Single-repo indicators**: Single `package.json` at root, `src/` directory
78
106
 
79
- ### 2b. Check Blueprint Dependencies
107
+ ### 2b. Auto-install Tailwind Design System
80
108
 
81
- **Required: `tailwind-v4`**
109
+ **Required: `tailwind-v4`** — auto-installed as a prerequisite, no user prompt needed.
82
110
 
83
111
  Check if `tailwind-v4` is in `.project-context.md` Installed Blueprints, OR check if `config/tailwind-config/shared-styles.css` contains `@import "tw-animate-css"` (indicator of the full tailwind-v4 blueprint).
84
112
 
85
- If NOT installed: ask "UI components need the Tailwind design system. Run `/scaffold-tailwind` first? (Y/n)"
86
- - If yes: tell the user to run `/scaffold-tailwind` first, then come back
87
- - If no: proceed with basic Tailwind defaults and warn about missing design tokens
113
+ If NOT installed: **automatically run the scaffold-tailwind process first** before continuing with UI scaffolding. Inform the user: "Installing Tailwind design system (required prerequisite for UI components)..." then read and execute the scaffold-tailwind blueprint (`~/.withmata/blueprints/blueprints/features/tailwind-v4/BLUEPRINT.md`) using the same project context. After tailwind-v4 is scaffolded, continue with the UI scaffold steps below.
114
+
115
+ Do NOT ask the user whether to install just do it. The design system is a hard requirement, not optional.
88
116
 
89
117
  ### 2c. Explore Structure
90
118
 
@@ -102,11 +130,15 @@ If NOT installed: ask "UI components need the Tailwind design system. Run `/scaf
102
130
 
103
131
  ## Step 3: Ask Clarifying Questions
104
132
 
105
- 1. **shadcn style** — "Which shadcn style do you prefer? (Default: new-york)" Only ask if the user hasn't specified.
133
+ 1. **shadcn style** — "Which shadcn style do you prefer? (Default: base-maia)" Only ask if the user hasn't specified.
134
+
135
+ 2. **Icon library** — "Which icon library? Phosphor (default, richer icon set with weight variants), Lucide (shadcn default), or custom?"
106
136
 
107
- 2. **Icon library** — "Which icon library? Lucide (default, shadcn default), Phosphor (richer set), or custom?"
137
+ 3. **Include base components** — "Include the 31 base component templates? (Default: yes)" If no, only config/utility files are scaffolded and the user adds components later via `shadcn add`.
108
138
 
109
- 3. **Existing `packages/ui/`**If it exists: "I found an existing `packages/ui/`. I'll merge the new files without overwriting existing ones."
139
+ 4. **Include form system** "Include the form system components (field, form-field, tag-input, pill-select)? (Default: yes)" Only ask if base components are included.
140
+
141
+ 5. **Existing `packages/ui/`** — If it exists: "I found an existing `packages/ui/`. I'll merge the new files without overwriting existing ones."
110
142
 
111
143
  Skip questions where the answer is obvious.
112
144
 
@@ -117,10 +149,10 @@ Skip questions where the answer is obvious.
117
149
  1. Create `packages/ui/` directory (if it doesn't exist)
118
150
  2. Copy `package.json` — replace `{{SCOPE}}` with the project's npm scope
119
151
  3. Copy `tsconfig.json` — replace `{{SCOPE}}`
120
- 4. Copy `components.json` — update style if user chose something other than `new-york`, update iconLibrary if user chose something other than `lucide`
152
+ 4. Copy `components.json` — update style if user chose something other than `base-maia`, update iconLibrary if user chose something other than `phosphor`
121
153
  5. Create `styles/` directory and copy `globals.css` — replace `{{SCOPE}}`
122
154
  6. Create `utils/` directory, copy `cn.ts` and `cva.ts`
123
- 7. Create empty directories: `components/ui/`, `icons/`, `icons/logos/`
155
+ 7. Create empty directories: `icons/`, `icons/logos/`
124
156
 
125
157
  ### 4b. Single-Repo — Create UI Directory
126
158
 
@@ -128,7 +160,7 @@ Skip questions where the answer is obvious.
128
160
  2. Copy utility files (`cn.ts`, `cva.ts`) to `src/ui/utils/`
129
161
  3. Copy `styles/globals.css` to `src/ui/styles/` — adjust import to direct path
130
162
  4. Copy `components.json` to project root — update aliases for single-repo paths
131
- 5. Create empty directories: `src/ui/components/ui/`, `src/ui/icons/`
163
+ 5. Create empty directories: `src/ui/icons/`
132
164
  6. Add UI deps to root `package.json`
133
165
 
134
166
  ### 4c. Update Consuming App
@@ -152,9 +184,20 @@ Compute the `@source` relative path based on the consuming app's location relati
152
184
 
153
185
  **Important:** Don't overwrite the entire `globals.css` — merge the new imports. If the file already has `@import "tailwindcss"` and `@import "{{SCOPE}}/tailwind-config"`, add the new lines after them.
154
186
 
155
- ### 4d. Dependency Installation
187
+ ### 4d. Copy Base Component Templates (if included)
188
+
189
+ 1. Create `components/ui/` directory if not exists
190
+ 2. Copy all 31 component `.tsx` files from blueprint templates
191
+ 3. No `{{SCOPE}}` replacement needed (components use `#` subpath imports)
192
+ 4. If form system declined: skip `field.tsx`, `form-field.tsx`, `tag-input.tsx`, `pill-select.tsx`, `card-select.tsx`, `entity-select.tsx`, `selected-entity-card.tsx`
193
+ 5. These are blueprint-owned templates — NOT shadcn-generated
194
+
195
+ **Monorepo:** files go to `packages/ui/components/ui/`
196
+ **Single-repo:** files go to `src/ui/components/ui/`
197
+
198
+ ### 4e. Dependency Installation
156
199
 
157
- Run `pnpm install` to wire workspace dependencies.
200
+ Run `bun install` to wire workspace dependencies.
158
201
 
159
202
  ## Step 5: Update Project Context
160
203
 
@@ -165,17 +208,54 @@ Append an entry to `.project-context.md` under `## Installed Blueprints`:
165
208
  blueprint: ui-shared-components
166
209
  installed_at: <date>
167
210
  choices:
168
- shadcn_style: <style>
169
- icon_library: <library>
170
- include_cva: true
211
+ shadcn_style: base-maia
212
+ icon_library: phosphor
213
+ include_base_components: true
214
+ include_form_system: true
171
215
  files_created:
172
- - <list of all files created>
216
+ - packages/ui/package.json
217
+ - packages/ui/tsconfig.json
218
+ - packages/ui/components.json
219
+ - packages/ui/styles/globals.css
220
+ - packages/ui/utils/cn.ts
221
+ - packages/ui/utils/cva.ts
222
+ - packages/ui/components/ui/button.tsx
223
+ - packages/ui/components/ui/input.tsx
224
+ - packages/ui/components/ui/label.tsx
225
+ - packages/ui/components/ui/textarea.tsx
226
+ - packages/ui/components/ui/card.tsx
227
+ - packages/ui/components/ui/badge.tsx
228
+ - packages/ui/components/ui/separator.tsx
229
+ - packages/ui/components/ui/alert-dialog.tsx
230
+ - packages/ui/components/ui/select.tsx
231
+ - packages/ui/components/ui/combobox.tsx
232
+ - packages/ui/components/ui/dropdown-menu.tsx
233
+ - packages/ui/components/ui/breadcrumb.tsx
234
+ - packages/ui/components/ui/collapsible.tsx
235
+ - packages/ui/components/ui/popover.tsx
236
+ - packages/ui/components/ui/sidebar.tsx
237
+ - packages/ui/components/ui/field.tsx
238
+ - packages/ui/components/ui/form-field.tsx
239
+ - packages/ui/components/ui/input-group.tsx
240
+ - packages/ui/components/ui/tag-input.tsx
241
+ - packages/ui/components/ui/pill-select.tsx
173
242
  globals_css_updated:
174
243
  - <list of globals.css files modified>
175
244
  packages_added:
176
- - <list of packages>
245
+ - "@radix-ui/react-slot"
246
+ - "@base-ui/react"
247
+ - "@phosphor-icons/react"
248
+ - "@radix-ui/react-collapsible"
249
+ - "@radix-ui/react-popover"
250
+ - class-variance-authority
251
+ - clsx
252
+ - tailwind-merge
253
+ - tw-animate-css
254
+ - shadcn
177
255
  ```
178
256
 
257
+ If `.project-context.md` does not exist, create it with the standard header and the Installed Blueprints section.
258
+
179
259
  ### Create Maintenance Skill
180
260
 
181
261
  Append to the shared project-level maintenance skill at `<project>/.claude/skills/project-maintenance/SKILL.md`.
@@ -194,10 +274,14 @@ Then append:
194
274
 
195
275
  ```markdown
196
276
  ### ui-shared-components maintenance
197
- - Add shadcn components via `pnpm dlx shadcn@latest add <name>` from packages/ui/
277
+ - Add shadcn components via `bunx shadcn@latest add <name>` from packages/ui/ (uses base-maia style)
198
278
  - Use cn() for all className composition — never concatenate class strings manually
279
+ - Use data-slot attribute on every component root element for CSS targeting
280
+ - Import Phosphor icons from @phosphor-icons/react or @phosphor-icons/react/<IconName>
281
+ - Base UI primitives: import from @base-ui/react/<primitive-name>
199
282
  - Internal imports use #prefix (#components/ui/button); cross-package imports use @scope/ui/components/ui/button
200
- - After adding a new export directory: add to both exports and imports in packages/ui/package.json
283
+ - Base components (31 files) are blueprint-owned update via /scaffold-ui upgrade mode
284
+ - After adding new export directory: add to both exports and imports in packages/ui/package.json
201
285
  - After adding a new consuming app: add @import and @source directive to the app's globals.css
202
286
  ```
203
287
 
@@ -205,40 +289,73 @@ If a `### ui-shared-components maintenance` section already exists in the file,
205
289
 
206
290
  ## Step 6: Output Summary
207
291
 
292
+ After scaffolding, provide the user with a clear summary:
293
+
208
294
  ### Packages to Install
209
295
 
210
296
  ```bash
211
- # Should be handled by pnpm install, but verify these are in packages/ui/package.json:
212
- # Dependencies: @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, tw-animate-css, shadcn
213
- # DevDeps: @tailwindcss/postcss, tailwindcss, typescript, @types/react, @types/react-dom
297
+ # Should be handled by bun install, but verify these are in packages/ui/package.json:
298
+ # Dependencies:
299
+ # @radix-ui/react-slot, @base-ui/react, @phosphor-icons/react
300
+ # @radix-ui/react-collapsible, @radix-ui/react-popover
301
+ # class-variance-authority, clsx, tailwind-merge, tw-animate-css, shadcn
302
+ # DevDeps:
303
+ # @tailwindcss/postcss, tailwindcss, typescript, @types/react, @types/react-dom
214
304
  ```
215
305
 
216
306
  ### Files Created
217
307
 
218
- List every file created or modified with a one-line description.
308
+ List every file created or modified with a one-line description. Note that 31 base components come pre-installed alongside the 6 config/utility files (37 files total).
219
309
 
220
310
  ### How to Add Components
221
311
 
222
312
  ```bash
223
- # From packages/ui/
313
+ # From packages/ui/ — uses base-maia style (configured in components.json)
224
314
  cd packages/ui
225
- pnpm dlx shadcn@latest add button
226
- pnpm dlx shadcn@latest add card
227
- pnpm dlx shadcn@latest add input
315
+ bunx shadcn@latest add dialog
316
+ bunx shadcn@latest add toast
317
+ bunx shadcn@latest add tabs
228
318
  ```
229
319
 
320
+ Components added via `shadcn add` are user-owned and will not be modified during upgrades. The 31 pre-installed base components are blueprint-owned and can be updated via `/scaffold-ui` upgrade mode.
321
+
230
322
  ### How to Use in Apps
231
323
 
232
324
  ```typescript
325
+ // Import components from the UI package
233
326
  import { Button } from "@scope/ui/components/ui/button";
327
+ import { Card, CardHeader, CardTitle, CardContent } from "@scope/ui/components/ui/card";
234
328
  import { cn } from "@scope/ui/utils/cn";
329
+
330
+ // Import Phosphor icons
331
+ import { MagnifyingGlass, Plus, Check } from "@phosphor-icons/react";
332
+
333
+ // Base UI primitive usage (used internally by components like Select, Combobox)
334
+ import { Select } from "@base-ui/react/select";
335
+
336
+ // Form system components
337
+ import { Field } from "@scope/ui/components/ui/field";
338
+ import { FormField } from "@scope/ui/components/ui/form-field";
339
+ import { TagInput } from "@scope/ui/components/ui/tag-input";
340
+ import { PillSelect } from "@scope/ui/components/ui/pill-select";
235
341
  ```
236
342
 
343
+ ### Base Components Included
344
+
345
+ | Category | Components |
346
+ |----------|-----------|
347
+ | Inputs | `button`, `input`, `label`, `textarea`, `input-group` |
348
+ | Layout | `card`, `badge`, `separator`, `breadcrumb` |
349
+ | Overlays | `alert-dialog`, `dropdown-menu`, `popover`, `collapsible`, `select`, `combobox` |
350
+ | Navigation | `sidebar` |
351
+ | Forms | `field`, `form-field`, `tag-input`, `pill-select` |
352
+
237
353
  ### Next Steps
238
354
 
239
- - Add your first shadcn components with the commands above
355
+ - Add more shadcn components as needed with `bunx shadcn@latest add <name>`
240
356
  - Create brand icons in `packages/ui/icons/logos/`
241
357
  - Build custom components in `packages/ui/components/`
358
+ - Use the form system (`Field`, `FormField`) for consistent form layouts
242
359
 
243
360
  ## Important Notes
244
361
 
@@ -246,3 +363,5 @@ import { cn } from "@scope/ui/utils/cn";
246
363
  - Never overwrite existing files without asking. If `packages/ui/` exists, merge new files.
247
364
  - The `@source` directive path must be correct relative to the consuming app — verify it resolves.
248
365
  - If `tailwind-v4` is not installed and the user proceeds anyway, the UI package will work but may have missing design tokens (no animations, no sidebar colors, etc.).
366
+ - Base components use `data-slot` attributes on root elements for CSS targeting — preserve these when customizing.
367
+ - Components use `#` subpath imports internally (e.g., `#components/ui/button`) — these are defined in `package.json` imports.
package/ENGINEERING.md CHANGED
@@ -28,7 +28,7 @@ These preferences apply to ALL blueprints in this repo and to any project scaffo
28
28
 
29
29
  ## Conventions
30
30
 
31
- - Use `pnpm` as the package manager
31
+ - Use `bun` as the package manager (pnpm is a supported alternative)
32
32
  - Prefer named exports over default exports
33
33
  - Use Node.js subpath imports (`#prefix`) for internal module resolution within apps/packages
34
34
  - Shared config packages live in `config/` (separate from `packages/`)
@@ -43,5 +43,5 @@ These preferences apply to ALL blueprints in this repo and to any project scaffo
43
43
  - **Project context:** Every blueprint appends to `.project-context.md` in the target project root — tool-agnostic location readable by any AI coding tool
44
44
  - **Skills live in `.claude/skills/<name>/SKILL.md`** — single source of truth. Installed globally to `~/.claude/skills/`, `~/.config/opencode/skills/`, `~/.cursor/skills/` via the CLI. OpenCode and Cursor also read `~/.claude/skills/` as a cross-tool fallback.
45
45
  - **Rules/preferences are in `ENGINEERING.md`** — tool-specific files (`CLAUDE.md`, `AGENTS.md`, `.cursor/rules/engineering.mdc`) point to it
46
- - **Available skills:** `/new-project`, `/discover`, `/scaffold-foundation`, `/scaffold-env`, `/scaffold-tailwind`, `/scaffold-ui`, `/scaffold-auth`, `/scaffold-db`, `/audit`, plus `blueprint-catalog` (background, auto-invoked)
46
+ - **Available skills:** `/new-project`, `/discover`, `/copywrite`, `/copywrite-landing`, `/design-system`, `/scaffold-foundation`, `/scaffold-env`, `/scaffold-tailwind`, `/scaffold-ui`, `/scaffold-auth`, `/scaffold-db`, `/audit`, plus `blueprint-catalog` (background, auto-invoked)
47
47
  - **BLUEPRINT.md required** in every blueprint directory. Placeholder blueprints must still have a BLUEPRINT.md documenting intended scope.