@donotdev/cli 0.0.9 → 0.0.12

package/templates/root-consumer/.claude/commands/design.md.example

@@ -0,0 +1,136 @@
+---
+description: Design workflow: Architect → Design Document (BEFORE /build)
+---
+
+# Design Command - Architecture & Design Workflow
+
+**⚠️ MODE CHECK:** This command is for **Consumer App Development** only.
+
+**If you're in the framework monorepo (`c:\ws\dndev`):**
+- ❌ **DO NOT use `/design`** - design directly, then code in `packages/*/src/`
+- ✅ Use Architecture Hub + Development Hub for framework design patterns
+- ✅ See [Modes Guide](https://github.com/donotdev/framework/blob/main/docs/development/MODES.md) for framework dev workflow
+
+**If you're in a consumer repo:**
+- ✅ Use `/design` for architecture decisions
+- ✅ Use `/build` to implement the design
+
+**WORKFLOW ORDER:**
+1. `/design` → Architect designs solution (THIS COMMAND)
+2. `/build` → Prompt Engineer + Coder implement design
+
+**Design comes BEFORE build. Design the solution, then build it.**
+
+## Usage
+
+```
+/design [requirement or question]
+```
+
+**Examples:**
+```
+/design How should we handle documentation updates in dndev bump?
+/design Add documentation update step to bump command
+/design Status translation fallback chain architecture
+```
+
+## Process
+
+### Step 1: Architect Phase
+
+**Deploy:** `/agents architect` (WAI-WAY architect role)
+
+**Input:** User requirement or design question
+
+**Actions:**
+1. Analyze requirement/question
+2. Read constraints from:
+   - `CLAUDE.md` (project rules)
+   - Framework architecture docs (`docs/architecture/`)
+   - Existing patterns in codebase
+   - WAI-WAY entity patterns (if applicable)
+3. Research similar solutions (codebase search, online if needed)
+4. Design solution with:
+   - Architecture overview
+   - Trade-offs analysis
+   - Implementation approach
+   - File locations and changes needed
+   - Dependencies and impacts
+   - Validation criteria
+
+**Output:** Complete design document ready for `/build`
+
+## Output Format
+
+```
+DESIGN DOCUMENT:
+
+REQUIREMENT:
+[Clear statement of what needs to be designed]
+
+ANALYSIS:
+- Current state: [what exists]
+- Problem: [what needs solving]
+- Constraints: [framework rules, patterns, etc.]
+
+DESIGN:
+[Architecture/solution design]
+
+TRADE-OFFS:
+- Option A: [pros/cons]
+- Option B: [pros/cons]
+- Recommendation: [which and why]
+
+IMPLEMENTATION PLAN:
+- Files to create/modify: [list]
+- Changes needed: [detailed breakdown]
+- Dependencies: [what depends on this]
+- Testing: [how to validate]
+
+READY FOR /build:
+[Summary of what will be built]
+
+UNRESOLVED:
+- [Any open questions]
+```
+
+## Rules
+
+- **NEVER write code** - only design and plan
+- **ALWAYS analyze existing patterns** - don't reinvent
+- **ALWAYS consider trade-offs** - no solution is perfect
+- **ALWAYS reference framework architecture** - stay aligned
+- **ALWAYS identify impacts** - what breaks if we change this?
+- **ALWAYS prepare for /build** - design should be actionable
+
+## Integration with WAI-WAY & BMAD
+
+- Uses **BMAD PRINTER** persona (proven, battle-tested)
+- Follows WAI-WAY Phase 2 (ENTITIES) + Architecture
+- Output feeds into `/build` command (BMAD FORGER/Builder)
+
+## Mode Detection
+
+**CRITICAL:** Check working mode first.
+
+**Framework dev indicators:**
+- `packages/` directory exists
+- `CLAUDE.md` says "Framework Development Mode"
+- Using `dn` CLI
+
+**Consumer app indicators:**
+- `apps/` or `src/` directory exists
+- `CLAUDE.md` says "Consumer App Development Mode"
+- Using `dndev` CLI
+
+**If framework dev detected:**
+- STOP and inform user: "`/design` is for consumer apps. In framework dev, design directly using Architecture Hub patterns, then code in `packages/*/src/`"
+
+**If consumer app detected:**
+- Use ONLY published `@donotdev/*` packages
+- Cannot reference internal framework patterns
+
+## Requirements
+
+- MCP server configured (`.mcp.json` or `.cursor/mcp.json`) - for component/package lookups
+- Architecture docs available (for framework context)

package/templates/root-consumer/.claude/commands/polish.md.example

@@ -0,0 +1,145 @@
+---
+description: Fix bugs, add styling, customization, i18n (BMAD FINISHER) - AFTER /build
+---
+
+# Polish Command - Production-Ready App
+
+**⚠️ MODE CHECK:** This command is for **Consumer App Development** only.
+
+**If you're in the framework monorepo (`c:\ws\dndev`):**
+- ❌ **DO NOT use `/polish`** - framework dev doesn't use this workflow
+- ✅ See [Modes Guide](https://github.com/donotdev/framework/blob/main/docs/development/MODES.md) for framework dev workflow
+
+**If you're in a consumer repo:**
+- ✅ Use `/polish` after `/build` is complete
+- ✅ Use `/polish` to fix bugs, add styling, add i18n
+- ✅ Use `/polish` to finalize configuration
+
+**WORKFLOW ORDER:**
+1. `/brainstorm` → Extract requirements, generate HLD
+2. `/design` → Create technical plan (LLD)
+3. `/build` → Implement code using framework defaults
+4. `/polish` → Add styling, customization, i18n (THIS COMMAND)
+
+---
+
+## Usage
+
+```
+/polish [bugs, styling requirements, or i18n needs]
+```
+
+**Examples:**
+```
+/polish Fix bug: Projects list is empty
+/polish Add styling to match brand guidelines
+/polish Add French and Spanish translations
+/polish Complete configuration and test everything
+```
+
+---
+
+## Process
+
+### Step 1: Activate FINISHER Agent
+
+**Deploy:** `/agents polisher` (BMAD FINISHER persona)
+
+**Input:** 
+- Working app from `/build`
+- Bug reports (if any)
+- Styling/customization requirements
+- i18n requirements
+
+**Actions:**
+1. **Fix Bugs** (if any):
+   - Understand bug report
+   - Diagnose root cause
+   - Provide minimal fix
+   - Verify fix works
+   - Check for regressions
+
+2. **Add Styling** (if requested):
+   - Identify what needs styling
+   - Break framework defaults where needed
+   - Ensure mobile responsiveness
+   - Verify no regressions
+
+3. **Add i18n** (if required):
+   - Extract hardcoded strings
+   - Create translation files
+   - Replace strings with `useTranslation()` hooks
+   - Add all required languages
+
+4. **Finalize Configuration**:
+   - Update `src/config/app.ts`
+   - Update `src/config/legal.ts`
+   - Fill `.env`
+   - Configure Firestore Rules
+
+5. **Test and Validate**:
+   - Test all features
+   - Verify mobile responsiveness
+   - Check ship readiness
+
+**Output:** Production-ready app
+
+---
+
+## What FINISHER Does
+
+| Task | Description |
+|------|-------------|
+| **Bug Fixes** | Diagnose and fix bugs with minimal changes |
+| **Styling** | Add custom CSS, break framework defaults where needed |
+| **i18n** | Extract strings, create translation files, replace hardcoded text |
+| **Configuration** | Complete app.ts, legal.ts, .env, Firestore Rules |
+| **Testing** | Verify everything works, check ship readiness |
+
+---
+
+## Rules
+
+- **Fix bugs only** - Don't add features
+- **Minimal changes** - Change only what's necessary
+- **Verify fixes** - Test before declaring complete
+- **Check regressions** - Ensure other features still work
+- **Ask when unclear** - Don't guess bug causes
+
+---
+
+## Integration with WAI-WAY
+
+- Uses **BMAD FINISHER** persona (proven, battle-tested)
+- Follows WAI-WAY Phase 4 (CONFIGURE) + Phase 5 (i18n)
+- Takes working app from `/build` and makes it production-ready
+
+---
+
+## Requirements
+
+- Working app from `/build` command
+- Bug reports (if any)
+- Styling requirements (if any)
+- i18n requirements (if any)
+
+---
+
+## Ship Readiness
+
+App is ready to ship when:
+- ✅ No critical bugs
+- ✅ All MVP features work
+- ✅ Auth is secure
+- ✅ Performance acceptable
+- ✅ Mobile works (if in spec)
+- ✅ Styling matches requirements (if specified)
+- ✅ i18n complete (if required)
+- ✅ Configuration complete
+
+---
+
+## Next Step
+
+Once app is production-ready:
+→ Deploy and ship! 🚀

package/templates/root-consumer/.cursor/mcp.json.example

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "donotdev": {
+      "command": "bunx",
+      "args": ["@donotdev/mcp-server"]
+    }
+  }
+}

package/templates/root-consumer/.mcp.json.example

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "donotdev": {
+      "command": "bunx",
+      "args": ["@donotdev/mcp-server"]
+    }
+  }
+}

package/templates/root-consumer/CLAUDE.md.example

@@ -7,6 +7,32 @@
 
 ---
 
+## ⚠️ WORKING MODE: Consumer App Development
+
+**YOU ARE IN:** Consumer App Development Mode
+
+**Location:** Consumer repository (scaffolded by `dndev init`)
+
+**Your Role:**
+- **Creating with framework** (Mode 3): Build new app features
+- **Tweaking framework app** (Mode 4): Modify existing app features
+
+**CLI:** `dndev` (public CLI, installed globally)
+
+**Workflow:**
+1. `/design [requirement]` → Architect designs solution
+2. `/build [requirement]` → Prompt Engineer + Coder implement
+3. Iterate with WAI-WAY agents
+
+**Reference:** [Modes Guide](https://github.com/donotdev/framework/blob/main/docs/development/MODES.md) | Framework guides in `guides/dndev/`
+
+**⚠️ IMPORTANT:**
+- Use ONLY published `@donotdev/*` packages
+- Cannot modify framework internals
+- If framework needs changes, work in monorepo (`c:\ws\dndev`)
+
+---
+
 **PRIME DIRECTIVE: PRECISION OVER SPEED.**
 
 ## **Correctness is non-negotiable. Concise, even at the cost of grammar. Never guess, every output must be verifiable. Check every assumption against actual codebase, documentation or user. If ambiguity exists, ask. No exceptions.**
@@ -71,3 +97,123 @@ At end of each plan, list unresolved questions (if any). Extremely concise.
 ## General Principles
 - **Code reading/writing:** Be critical and concise/precise. Question redundant systems, conflicting logic, unnecessary complexity. You need to **ANALYZE** code.
 - **Conventions:** Always follow project's conventions when updating/adding/fixing files
+
+## Component Usage - MCP REQUIRED
+
+**BEFORE writing ANY @donotdev component:**
+
+1. Call `lookup_component({ component: "ComponentName" })`
+2. Read the actual props from the returned TypeScript interface
+3. Use ONLY those props
+
+**NEVER guess props. NEVER use props from memory/training.**
+
+If MCP tools unavailable → STOP and tell user to enable MCP.
+
+**Available MCP tools:**
+- `lookup_component` - get actual props from .d.ts
+- `list_components` - list exports from a package
+- `list_packages` - list all @donotdev packages
+
+## WAI-WAY Workflow - Four-Phase System (BMAD-Based)
+
+**Workflow Order:**
+1. `/brainstorm` → BMAD EXTRACTOR extracts requirements, generates HLD
+2. `/design` → BMAD PRINTER (Architect) creates technical plan (LLD)
+3. `/build` → BMAD FORGER (Builder) implements code using framework defaults
+4. `/polish` → BMAD FINISHER (Polisher) adds styling, customization, i18n
+
+**Quality Over Speed:** Each phase must be complete before proceeding. Take as long as needed.
+
+### Brainstorm Phase
+
+**Use `/brainstorm [app idea]` to extract complete requirements.**
+
+**Workflow:**
+1. `/brainstorm` → BMAD EXTRACTOR asks probing questions
+2. EXTRACTOR uses MCP to discover framework capabilities
+3. EXTRACTOR identifies native vs custom components
+4. Output → Complete HLD document
+
+**Example:**
+```
+/brainstorm I want to build a car dealership management app
+```
+
+**Agent:**
+- `extractor` (BMAD EXTRACTOR) - Extracts requirements through conversation
+
+**See:** `.claude/commands/brainstorm.md` for full workflow details.
+
+### Design Phase
+
+**Use `/design [HLD reference]` to create technical implementation plan.**
+
+**Workflow:**
+1. `/design` → BMAD PRINTER (Architect) reads validated HLD
+2. PRINTER creates technical artifacts (LLD):
+   - Entity schemas
+   - Navigation config
+   - Feature mapping
+   - Custom component specs
+3. Output → Complete LLD document
+
+**Example:**
+```
+/design Create technical plan from HLD.md
+```
+
+**Agent:**
+- `architect` (BMAD PRINTER) - Transforms HLD into technical specifications
+
+**See:** `.claude/commands/design.md` for full workflow details.
+
+### Build Phase
+
+**Use `/build [LLD reference]` to implement working code.**
+
+**Workflow:**
+1. `/build` → BMAD FORGER (Builder) reads LLD
+2. FORGER implements in phases:
+   - Entities → Routes → Auth → Native Pages → Custom Components → Integration
+3. Uses framework defaults ONLY (no styling, no customization)
+4. Hardcodes all strings (no i18n yet)
+5. Output → Working app (functional MVP)
+
+**Example:**
+```
+/build Implement from LLD.md
+```
+
+**Agent:**
+- `builder` (BMAD FORGER) - Implements app from specifications
+
+**See:** `.claude/commands/build.md` for full workflow details.
+
+### Polish Phase
+
+**Use `/polish [requirements]` to make app production-ready.**
+
+**Workflow:**
+1. `/polish` → BMAD FINISHER (Polisher) reads working app
+2. FINISHER:
+   - Fixes bugs (if any)
+   - Adds styling/customization
+   - Adds i18n translations
+   - Finalizes configuration
+   - Tests and validates
+3. Output → Production-ready app
+
+**Example:**
+```
+/polish Add styling and French translations
+```
+
+**Agent:**
+- `polisher` (BMAD FINISHER) - Fixes bugs, adds styling, i18n, config
+
+**See:** `.claude/commands/polish.md` for full workflow details.
+
+**Requirements:**
+- MCP server configured (`.mcp.json` or `.cursor/mcp.json`)
+- `@donotdev/mcp-server` available (via `bunx` or installed)

package/templates/root-consumer/guides/dndev/AGENT_START_HERE.md.example

@@ -229,25 +229,28 @@ bun run dev
 
 ---
 
-## 🤖 WAI-WAY: The "With AI Way" Protocol (Recommended)
+## 🤖 WAI-WAY: The "With AI Way" Protocol (BMAD-Based)
 
-**WAI-WAY** (based on the **BMAD Method**) is a rigorous, agent-driven protocol designed to build mistake-free apps by separating concerns into 4 distinct phases.
+**WAI-WAY** is a rigorous, agent-driven protocol based on the **BMAD Method**. It separates concerns into 4 distinct phases.
 
-**How to Use:**
-1.  Navigate to `guides/wai-way/`.
-2.  Open `WAI_WAY_CLI.md` to see the activation instructions.
-3.  Paste the **Activation Prompt** into your AI Agent (Cursor, Claude, etc.) to start a phase.
+**Entry Point:** Use commands in `.claude/commands/` (synced via `dndev bump`)
 
 **The 4 Phases:**
-1.  **Brainstorm (Extractor):** Define WHAT to build -> `step_1_prd.md`
-2.  **Review (Architect):** Define HOW to build (Component mapping) -> `step_2_spec.md`
-3.  **Build (Builder):** Implement code based on spec -> Working App
-4.  **Polish (Polisher):** Refine UX and content -> Production App
+1.  **`/brainstorm`** → BMAD EXTRACTOR extracts requirements, generates HLD
+2.  **`/design`** → BMAD PRINTER (Architect) creates technical plan (LLD)
+3.  **`/build`** → BMAD FORGER (Builder) implements code using framework defaults
+4.  **`/polish`** → BMAD FINISHER (Polisher) adds styling, customization, i18n
+
+**How It Works:**
+- Commands are in `.claude/commands/` (synced from framework)
+- Agents are in `.claude/agents/` (BMAD personas, synced from framework)
+- Run commands in Cursor: `/brainstorm [app idea]`, `/design [HLD]`, `/build [LLD]`, `/polish [app]`
+- Documentation syncs automatically via `dndev bump`
 
 **Why use it?**
-WAI-WAY forces your AI to "Think before it Codes". By separating the Architecture phase from the Build phase, we ensure that **only valid DoNotDev primitives are used**, preventing custom CSS bloat and "hallucinated" patterns.
+WAI-WAY forces your AI to "Think before it Codes". By separating Architecture from Build, we ensure **only valid DoNotDev primitives are used**, preventing custom CSS bloat and "hallucinated" patterns.
 
-**See [WAI_WAY_CLI.md](../wai-way/WAI_WAY_CLI.md) for full instructions.**
+**See:** `.claude/commands/` for command details | `guides/wai-way/WAI_WAY_CLI.md` for methodology
 
 ---
 

package/templates/root-consumer/guides/dndev/COMPONENT_API.md.example

@@ -0,0 +1,195 @@
+# Component API Reference
+
+**SOURCE OF TRUTH. If prop not listed here, it does not exist.**
+
+---
+
+## Button
+```tsx
+<Button>Label</Button>
+<Button variant="primary">Label</Button>
+<Button onClick={fn}>Label</Button>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| variant | `'default'` \| `'primary'` \| `'secondary'` \| `'accent'` \| `'destructive'` \| `'ghost'` \| `'outline'` \| `'link'` | `'default'` |
+| icon | `LucideIcon` \| `ReactNode` | - |
+| iconEnd | `boolean` | `false` |
+| display | `'auto'` \| `'compact'` \| `'full'` | `'auto'` |
+| tooltip | `string` | - |
+| floating | `boolean` | `false` |
+| fullWidth | `boolean` | `false` |
+| loading | `boolean` | `false` |
+| loadingText | `string` | - |
+| progress | `number` (0-100) | - |
+| disabled | `boolean` | `false` |
+| render | `(props) => ReactNode` | - |
+
+**NO: size, tone, gap**
+
+---
+
+## Text
+```tsx
+<Text>Content</Text>
+<Text level="h1">Heading</Text>
+<Text as="p">Paragraph</Text>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| as | `'h1'`-`'h6'` \| `'p'` \| `'span'` \| `'div'` \| `'li'` \| `'label'` \| `'code'` | `'div'` |
+| level | `'h1'`-`'h6'` \| `'body'` \| `'small'` \| `'caption'` | auto from `as` |
+| variant | `'default'` \| `'muted'` \| `'primary'` \| `'secondary'` \| `'accent'` \| `'success'` \| `'warning'` \| `'destructive'` \| `'code'` | `'default'` |
+| align | `'start'` \| `'center'` \| `'end'` | `'start'` |
+| weight | `'normal'` \| `'medium'` \| `'semibold'` \| `'bold'` | - |
+
+**NO: size, tone, color**
+
+---
+
+## Stack
+```tsx
+<Stack>children</Stack>
+<Stack direction="row">children</Stack>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| as | `ElementType` | `'div'` |
+| direction | `'row'` \| `'column'` \| `'row-reverse'` \| `'column-reverse'` | `'column'` |
+| align | `'start'` \| `'center'` \| `'end'` \| `'stretch'` \| `'baseline'` | `'stretch'` |
+| justify | `'start'` \| `'center'` \| `'end'` \| `'between'` \| `'around'` \| `'evenly'` | `'start'` |
+| gap | `'none'` \| `'tight'` \| `'medium'` \| `'large'` | `'medium'` |
+| wrap | `'nowrap'` \| `'wrap'` \| `'wrap-reverse'` | `'nowrap'` |
+| width | `'full'` \| `'fit'` \| `'auto'` | `'full'` |
+| centered | `boolean` | `false` |
+
+**NO: spacing, size**
+
+---
+
+## Card
+```tsx
+<Card>children</Card>
+<Card title="Title">children</Card>
+<Card onClick={fn}>children</Card>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| variant | `'default'` \| `'muted'` \| `'primary'` \| `'secondary'` \| `'accent'` | `'default'` |
+| title | `string` \| `ReactNode` | - |
+| subtitle | `string` \| `ReactNode` | - |
+| icon | `LucideIcon` | - |
+| content | `string` \| `string[]` \| `ReactNode` | - |
+| footer | `ReactNode` | - |
+| onClick | `() => void` | - |
+| clickable | `boolean` | auto from onClick |
+| elevated | `boolean` | `false` |
+| asChild | `boolean` | `false` |
+
+**NO: size, padding, margin**
+
+---
+
+## Grid
+```tsx
+<Grid>children</Grid>
+<Grid cols={3}>children</Grid>
+<Grid cols={[1, 1, 2, 3]}>children</Grid>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| as | `ElementType` | `'div'` |
+| cols | `number` \| `[mobile, tablet, laptop, desktop]` | `1` |
+| gap | `'none'` \| `'tight'` \| `'medium'` \| `'large'` | `'medium'` |
+| align | `'start'` \| `'center'` \| `'end'` \| `'stretch'` | `'stretch'` |
+| justify | `'start'` \| `'center'` \| `'end'` \| `'stretch'` | `'stretch'` |
+
+**NO: spacing, columns (use cols)**
+
+---
+
+## Section
+```tsx
+<Section title="Title">children</Section>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| as | `'section'` \| `'article'` \| `'aside'` \| `'div'` \| `'main'` | `'section'` |
+| title | `string` | - |
+| separator | `boolean` | `false` |
+| tone | `'base'` \| `'muted'` \| `'elevated'` \| `'contrast'` \| `'accent'` | `'base'` |
+| align | `'start'` \| `'center'` \| `'end'` | `'center'` |
+| gridCols | `number` \| `[mobile, tablet, laptop, desktop]` | - |
+| gridGap | `'none'` \| `'tight'` \| `'medium'` \| `'large'` | `'medium'` |
+| collapsible | `boolean` | `false` |
+| defaultOpen | `boolean` | `false` |
+
+**NO: padding, margin, background**
+
+---
+
+## Badge
+```tsx
+<Badge>Label</Badge>
+<Badge variant="primary">Label</Badge>
+```
+| Prop | Type | Default |
+|------|------|---------|
+| as | `'div'` \| `'span'` \| `'mark'` | `'div'` |
+| variant | `'default'` \| `'muted'` \| `'primary'` \| `'secondary'` \| `'accent'` \| `'success'` \| `'warning'` \| `'destructive'` \| `'outline'` | `'default'` |
+| tooltip | `string` | - |
+
+**NO: size, color**
+
+---
+
+## Spinner
+```tsx
+<Spinner />
+<Spinner overlay />
+```
+| Prop | Type | Default |
+|------|------|---------|
+| overlay | `boolean` | `false` |
+| variant | `'default'` \| `'primary'` \| `'secondary'` \| `'accent'` \| `'success'` \| `'warning'` \| `'destructive'` | `'primary'` |
+
+**NO: size**
+
+---
+
+## Separator
+```tsx
+<Separator />
+```
+| Prop | Type | Default |
+|------|------|---------|
+| orientation | `'horizontal'` \| `'vertical'` | `'horizontal'` |
+| variant | `'default'` \| `'muted'` \| `'accent'` | `'default'` |
+
+---
+
+## EntityFormRenderer
+```tsx
+<EntityFormRenderer entity={entity} operation="create" onSubmit={fn} />
+```
+| Prop | Type | Default |
+|------|------|---------|
+| entity | `Entity` | required |
+| operation | `'create'` \| `'edit'` | `'create'` |
+| onSubmit | `(data) => void` | required |
+| defaultValues | `Record<string, unknown>` | - |
+| loading | `boolean` | `false` |
+| submitText | `string` | - |
+| cancelText | `string` | - |
+| onCancel | `() => void` | - |
+| viewerRole | `string` | `'guest'` |
+
+**NO: fields (renders all editable fields automatically)**
+
+---
+
+## BEFORE WRITING JSX
+
+1. Check this file
+2. If prop not listed → don't use it
+3. When in doubt → use defaults only