@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.
- package/.claude/skills/audit/SKILL.md +4 -4
- package/.claude/skills/blueprint-catalog/SKILL.md +17 -7
- package/.claude/skills/copywrite/SKILL.md +187 -0
- package/.claude/skills/copywrite-landing/SKILL.md +489 -0
- package/.claude/skills/design-system/SKILL.md +970 -0
- package/.claude/skills/new-project/SKILL.md +168 -112
- package/.claude/skills/scaffold-auth/SKILL.md +9 -9
- package/.claude/skills/scaffold-db/SKILL.md +14 -14
- package/.claude/skills/scaffold-env/SKILL.md +4 -4
- package/.claude/skills/scaffold-foundation/SKILL.md +15 -15
- package/.claude/skills/scaffold-tailwind/SKILL.md +17 -3
- package/.claude/skills/scaffold-ui/SKILL.md +155 -36
- package/ENGINEERING.md +2 -2
- package/blueprints/discovery/design-system/BLUEPRINT.md +1479 -0
- package/blueprints/discovery/marketing-copywriting/BLUEPRINT.md +664 -0
- package/blueprints/features/auth-better-auth/BLUEPRINT.md +20 -22
- package/blueprints/features/db-drizzle-postgres/BLUEPRINT.md +12 -12
- package/blueprints/features/db-drizzle-postgres/files/db/src/example-entity.ts +1 -1
- package/blueprints/features/db-drizzle-postgres/files/db/src/scripts/seed.ts +1 -1
- package/blueprints/features/env-t3/BLUEPRINT.md +1 -1
- package/blueprints/features/tailwind-v4/BLUEPRINT.md +9 -2
- package/blueprints/features/tailwind-v4/files/tailwind-config/shared-styles.css +80 -1
- package/blueprints/features/ui-shared-components/BLUEPRINT.md +411 -78
- package/blueprints/features/ui-shared-components/files/ui/components/ui/alert-dialog.tsx +192 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/avatar.tsx +71 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/badge.tsx +52 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/breadcrumb.tsx +122 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/button.tsx +56 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/card-select.tsx +72 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/card.tsx +100 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/collapsible.tsx +34 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/combobox.tsx +301 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/dropdown-menu.tsx +264 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/empty-state.tsx +43 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/entity-select.tsx +110 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/field.tsx +237 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/form-field.tsx +217 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/input-group.tsx +161 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/input.tsx +20 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/label.tsx +20 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/org-switcher.tsx +114 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/page-header.tsx +45 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/pagination.tsx +52 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/pill-select.tsx +151 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/popover.tsx +41 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/search-input.tsx +49 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/select.tsx +205 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/selected-entity-card.tsx +47 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/separator.tsx +25 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/sidebar.tsx +389 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/status-filter.tsx +43 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/tag-input.tsx +131 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/textarea.tsx +18 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/user-menu.tsx +149 -0
- package/blueprints/features/ui-shared-components/files/ui/components.json +11 -8
- package/blueprints/features/ui-shared-components/files/ui/package.json +20 -11
- package/blueprints/foundation/monorepo-turbo/BLUEPRINT.md +19 -20
- package/blueprints/foundation/monorepo-turbo/files/root/package.json +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/blueprints/features/tailwind-v4/files/tailwind-config/package.json +0 -20
- 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 +
|
|
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 `
|
|
192
|
-
3. Verify the dev server starts: `
|
|
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 `
|
|
248
|
-
2. Verify `
|
|
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:
|
|
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 (`
|
|
315
|
-
- After adding new workspace packages: verify `
|
|
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 `
|
|
318
|
-
- After adding workspace dependencies: run `
|
|
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 `
|
|
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: `
|
|
357
|
-
- If frontend UI was set up: how to add shadcn components (`cd packages/ui &&
|
|
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**: `
|
|
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
|
|
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 `
|
|
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. **
|
|
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
|
-
|
|
67
|
-
|
|
68
|
-
|
|
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**: `
|
|
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.
|
|
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:
|
|
86
|
-
|
|
87
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
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 `
|
|
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: `
|
|
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/
|
|
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.
|
|
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 `
|
|
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:
|
|
169
|
-
icon_library:
|
|
170
|
-
|
|
211
|
+
shadcn_style: base-maia
|
|
212
|
+
icon_library: phosphor
|
|
213
|
+
include_base_components: true
|
|
214
|
+
include_form_system: true
|
|
171
215
|
files_created:
|
|
172
|
-
-
|
|
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
|
-
-
|
|
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 `
|
|
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
|
-
-
|
|
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
|
|
212
|
-
# Dependencies:
|
|
213
|
-
#
|
|
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
|
-
|
|
226
|
-
|
|
227
|
-
|
|
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
|
|
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 `
|
|
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.
|