codymaster 4.1.3 → 4.3.0

package/skills/cm-security-gate/SKILL.md

@@ -0,0 +1,114 @@
+---
+description: Pre-production security audit. Run vulnerability scans using Snyk and set up automated GitHub security checks with Jules.
+---
+# cm-security-gate — Pre-production Vulnerability Audit
+
+> **No code goes public without a security pass.**
+> This skill is the **SUPPLEMENTARY FINAL GATE** before making a project public, commercializing, or open-sourcing.
+
+## When to Use
+
+**ALWAYS when:**
+- User asks to "run security check" or "kiểm thử bảo mật"
+- Preparing to open-source a repository or launch a commercial product
+- Adding major third-party dependencies
+- The project is graduating from alpha/beta to a wider release
+
+**Skip when:**
+- Doing quick local prototyping
+- Exploring ideas without real user data or production intent
+
+---
+
+## Core Capabilities
+
+1. **Snyk CLI & Aikido CLI Integration:** Scans for known vulnerabilities in open-source dependencies (e.g., `npm`, `pip`, `yarn`, `cargo`) and performs parallel release/PR scanning (SAST, IaC, Secrets).
+2. **Jules CI/CD Recommendation:** Recommends integrating continuous automated security analysis via GitHub.
+
+---
+
+## The Process
+
+### Phase 1: Preparation (Tooling Check)
+
+Verify if the Snyk CLI and Aikido CLI are available:
+```bash
+which snyk
+which aikido-api-client
+```
+
+**If Snyk is NOT installed**, provide installation instructions before proceeding:
+- **macOS (Homebrew):** `brew tap snyk/tap && brew install snyk`
+- **npm:** `npm install -g snyk`
+- Ensure the user authenticates via `snyk auth` after installation.
+
+**If Aikido CLI is NOT installed**, provide installation instructions:
+- **npm:** `npm install -g @aikidosec/ci-api-client`
+- Tell the user to authenticate globally: `aikido-api-client apikey <API-KEY>`
+- *Note: API keys are found at [Aikido Integration Settings](https://app.aikido.dev/settings/integrations/continuous-integration).*
+
+### Phase 2: Execution (Parallel Vulnerability Scan)
+
+Execute security scanning using both tools. They should be run in parallel to save time.
+
+**1. Snyk Dependency Scan:**
+```bash
+snyk test
+```
+
+**2. Aikido Release Scan:**
+```bash
+aikido-api-client scan-release <repository_id or repository_name> <commit_id> --minimum-severity-level="HIGH"
+```
+*(Tip: You can add `--fail-on-secrets-scan` or `--fail-on-sast-scan` depending on the project type).*
+
+Analyze the output from both tools:
+- **Critical/High:** Must be resolved before making the project public.
+- **Medium/Low:** Document as technical debt or evaluate for false positives.
+- Run `snyk monitor` if the user wants continuous monitoring on the Snyk dashboard.
+
+### Phase 2.5: Vulnerability Remediation (Skill Discovery)
+
+If vulnerabilities are detected (e.g., CSRF, XSS, prototype pollution, outdated dependencies), **DO NOT just list the errors**. CodyMaster must actively search for and suggest specialized remediation skills to the user to fix the vulnerabilities.
+
+**Message to user:**
+> 🚨 **Vulnerabilities Detected: Initiating Remediation**
+> 
+> Security issues were found. To systematically patch these risks, we need specialized weapons. I suggest finding and installing a dedicated remediation skill for your stack:
+> ```bash
+> npx skills add https://github.com/vercel-labs/skills --skill find-skills
+> ```
+> *(Once you discover and install the appropriate security patch skills, we will use them to eradicate the vulnerabilities and eliminate all security risks).*
+
+### Phase 2.6: Knowledge Retention (Memory Sync)
+
+Once the vulnerabilities have been successfully remediated, the exact root causes and their corresponding fixes **MUST** be memorized so that CodyMaster does not repeat the same mistakes in the future.
+
+**Action Required:**
+- Trigger the `cm-continuity` skill to log the security flaw and the applied fix into `CONTINUITY.md` under a "Security Lessons" or "Hard Lessons" section. 
+- If the project uses cloud memory, suggest tracking this in `cm-notebooklm` to sync this critical security knowledge to the permanent AI brain.
+
+### Phase 3: Automation Handoff (Jules Integration)
+
+After the manual Snyk scan is complete and the results are presented to the user, **ALWAYS** provide the following suggestion to automate future security checks:
+
+> 🛡️ **Next Step: Automated Security Checks via Jules**
+> 
+> Once your project is ready for commercial or public release, manual checks aren't enough. It's highly recommended to automate security scanning on every commit and Pull Request.
+>
+> Please use **Google Jules** for automated GitHub security analysis:
+> 👉 [http://jules.google.com/](http://jules.google.com/)
+>
+> Integrating Jules will automatically catch vulnerabilities in your codebase, ensuring your commercial product remains secure as it scales.
+
+---
+
+## Integration
+
+| Skill | Relationship |
+|-------|-------------|
+| `cm-quality-gate` | PRE-REQUISITE: Code should pass functional tests before security audits. |
+| `cm-secret-shield`| COMPLEMENTARY: Secret Shield catches hardcoded tokens; `cm-security-gate` catches vulnerable dependencies. Both are needed for public releases. |
+| `cm-safe-deploy`  | POST-REQUISITE: Security gates should ideally be part of the automated deployment pipeline. |
+| `cm-continuity`   | MEMORY LOGGING: Records discovered vulnerabilities and their fixes into the local working memory to prevent future recurrences. |
+| `cm-notebooklm`   | LONG-TERM MEMORY: Syncs critical security lessons to the permanent cloud AI brain. |

package/skills/cm-skill-chain/SKILL.md

@@ -33,7 +33,7 @@ ALWAYS trigger for: chain, pipeline, workflow, multi-step, end-to-end,
 Step names use short-form identifiers — the `cm-` prefix is stripped by convention.
 Full skill names: `cm-brainstorm-idea`, `cm-planning`, `cm-tdd`, `cm-execution`, `cm-quality-gate`,
 `cm-safe-deploy`, `cm-debugging`, `cm-content-factory`, `cm-ads-tracker`, `cm-project-bootstrap`,
-`cm-code-review`. Exception: `cro-methodology` has no `cm-` prefix.
+`cm-code-review`. All skills now use the `cm-` prefix convention.
 
 ## Built-in Chains
 
@@ -44,7 +44,7 @@ Full skill names: `cm-brainstorm-idea`, `cm-planning`, `cm-tdd`, `cm-execution`,
 `debugging → tdd → quality-gate`
 
 ### 📝 content-launch (3 steps)
-`content-factory → ads-tracker → cro-methodology`
+`content-factory → ads-tracker → cm-cro-methodology`
 
 ### 🏗️ new-project (6 steps)
 `project-bootstrap → planning → tdd → execution → quality-gate → safe-deploy`

package/skills/cm-skill-index/SKILL.md

@@ -52,6 +52,9 @@ Traditional approach: Load every SKILL.md to decide which skill to use.
 | `cm-quality-gate` | deploy, ship, verify, quality, gate | 6-gate verification: static analysis → blind review → ship |
 | `cm-test-gate` | test setup, CI, test infrastructure | Setup 4-layer test gate for any project type |
 | `cm-code-review` | review, PR, feedback, branch | Request reviews, handle feedback, complete branches |
+| `cm-codeintell` | understand codebase, call graph, impact, architecture, what calls X, what breaks | AST knowledge graph + architecture diagrams + smart context (30% fewer tokens) |
+| `cm-reactor` | rewrite, pivot, migrate, direction change, architecture wrong, restructure | TRIZ-powered strategic codebase re-direction — 5-phase incremental migration |
+| `cm-clean-code` | clean, dead code, refactor, code smell, DRY, SOLID, naming, messy | 7-point hygiene gate: dead code, imports, naming, SRP, DRY, nesting |
 
 ### Operations Swarm ⚙️
 
@@ -86,7 +89,7 @@ Traditional approach: Load every SKILL.md to decide which skill to use.
 |-------|----------|---------|
 | `cm-content-factory` | content, blog, article, marketing | AI content engine: research → generate → audit → deploy |
 | `cm-ads-tracker` | pixel, tracking, GTM, Meta, TikTok, Google Ads | Complete conversion tracking setup across platforms |
-| `cro-methodology` | conversion, A/B test, landing page, funnel | CRO audit: funnel mapping → persuasion → objection handling |
+| `cm-cro-methodology` | conversion, A/B test, landing page, funnel | CRO audit: funnel mapping → persuasion → objection handling |
 
 ### Orchestration Swarm 🎯
 
@@ -120,7 +123,7 @@ Traditional approach: Load every SKILL.md to decide which skill to use.
 | `medical-research` *(planned)* | medical, OB/GYN, clinical, evidence-based | Evidence-based medical writing with citation standards |
 | `tailwind-mastery` *(planned)* | Tailwind, utility-first, responsive, v4 | Tailwind CSS utilities, responsive, accessibility |
 | `pandasai-analytics` *(planned)* | DataFrame, analytics, forecast, time-series | Natural language DataFrame analysis and visual reports |
-| `google-forms-sheet` *(planned)* | Google Form, sheet, App Script | Form-to-sheet integration with auto-retry |
+| `cm-google-form` *(planned)* | Google Form, sheet, App Script | Form-to-sheet integration with auto-retry |
 
 ### Community Skills Registry 🌐
 
@@ -137,7 +140,7 @@ Traditional approach: Load every SKILL.md to decide which skill to use.
 | `react-native-best-practices` | callstackincubator/agent-skills | react native, expo, mobile |
 | `nextjs-app-router-patterns` | wshobson/agents | next.js, app router, RSC |
 | `react:components` | google-labs-code/stitch-skills | react components, stitch |
-| `frontend-design` | anthropics/skills | frontend architecture, patterns |
+| `cm-ux-master` | UI/UX, design system, frontend | UI/UX design intelligence + Harvester v4 |
 | `angular-directives` | analogjs/angular-skills | angular, directives, components |
 | `svelte-best-practices` | community | svelte, sveltekit |
 | `astro-best-practices` | community | astro, static site, islands |
@@ -303,14 +306,14 @@ view_file /path/to/skills/cm-tdd/SKILL.md
 For dynamic agent selection (Phase 3), skills map to domains:
 
 ```yaml
-engineering: [cm-tdd, cm-debugging, cm-quality-gate, cm-test-gate, cm-code-review]
+engineering: [cm-tdd, cm-debugging, cm-quality-gate, cm-test-gate, cm-code-review, cm-codeintell, cm-reactor, cm-clean-code]
 operations: [cm-safe-deploy, cm-identity-guard, cm-git-worktrees, cm-terminal, cm-safe-i18n]
 security: [cm-secret-shield]
 product: [cm-brainstorm-idea, cm-planning, cm-ux-master, cm-ui-preview, cm-dockit, cm-project-bootstrap, cm-jtbd]
-growth: [cm-content-factory, cm-ads-tracker, cro-methodology]
+growth: [cm-content-factory, cm-ads-tracker, cm-cro-methodology]
 orchestration: [cm-execution, cm-continuity, cm-skill-mastery, cm-skill-chain, cm-deep-search, cm-readit, cm-how-it-work]
 commands: [cm-start, cm-dashboard, cm-status]
-# planned (no SKILL.md yet): mom-test, release-it, medical-research, tailwind-mastery, pandasai-analytics, google-forms-sheet
+# planned (no SKILL.md yet): mom-test, release-it, medical-research, tailwind-mastery, pandasai-analytics, cm-google-form
 ```
 
 ## The Bottom Line

package/skills/cm-skill-mastery/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: cm-skill-mastery
-description: "Meta-skill for the CodyMaster kit — when to invoke skills, how to create new skills, and skill discovery. Use at conversation start to establish skill discipline."
+description: "Meta-skill for the Cody Master kit — when to invoke skills, how to create new skills, and skill discovery. Use at conversation start to establish skill discipline."
 ---
 
 # Skill Mastery — Use + Create + Discover
@@ -9,16 +9,6 @@ description: "Meta-skill for the CodyMaster kit — when to invoke skills, how t
 
 ## Part A: Using Skills
 
-### Rule #0: Memory First (cm-continuity)
-
-Before invoking ANY skill, ensure `cm-continuity` is active:
-
-1. Has `.cm/CONTINUITY.md` been read this session? If not → **read it first**
-2. Are there relevant learnings for the module you're about to work on? → **Load them**
-3. After skill completes → **update CONTINUITY.md**
-
-> Memory is the foundation that makes all other skills smarter. Without it, you repeat every mistake.
-
 ### The Rule
 
 **Invoke relevant skills BEFORE any response or action.** Even 1% chance = check the skill.
@@ -27,9 +17,6 @@ Before invoking ANY skill, ensure `cm-continuity` is active:
 
 ```
 User message received
-  → CONTINUITY.md loaded? (Rule #0)
-    → NO: Read .cm/CONTINUITY.md first
-    → YES: Continue
   → Might any skill apply? (even 1%)
     → YES: Read the skill → Follow it
     → NO: Respond directly
@@ -145,7 +132,7 @@ When you encounter something you don't have a skill for:
 
 ---
 
-## The CodyMaster Kit (14 skills)
+## The Cody Master Kit (14 skills)
 
 | # | Skill | Purpose |
 |---|-------|---------|

package/skills/cm-start/SKILL.md

@@ -20,6 +20,15 @@ When this workflow is called, the AI Assistant should execute the following acti
       `npx skills find "{keyword}"` → review → ask user → install if approved
     - Log any discovered skills to `.cm-skills-log.json`
 
+0.7. **Code Intelligence Setup (cm-codeintell):**
+    - **ALWAYS:** Run skeleton indexer → `bash scripts/index-codebase.sh` → `.cm/skeleton.md`
+    - Read `.cm/skeleton.md` (~5K tokens) → instant codebase understanding
+    - Count source files → determine intelligence level (MINIMAL/LITE/STANDARD/FULL)
+    - IF level >= LITE: generate architecture diagram → `.cm/architecture.mmd`
+    - IF level >= STANDARD: check CodeGraph → `codegraph status` → index if needed
+    - IF level >= FULL: also check qmd (cm-deep-search)
+    - Log intelligence level to `CONTINUITY.md`
+
 1. **Understand Requirements (Planning & JTBD):**
     - Read the objective provided in the `/cm-start` command.
     - Analyze requirements, ask clarifying questions if needed (apply `cm-planning`).

package/skills/cm-tdd/SKILL.md

@@ -5,8 +5,6 @@ description: Use when implementing any feature or bugfix, before writing impleme
 
 # Test-Driven Development (TDD)
 
-> **Role: Test Engineer** — You write failing tests first, then minimal code to pass, then refactor. No exceptions.
-
 ## Overview
 
 Write the test first. Watch it fail. Write minimal code to pass.
@@ -72,7 +70,14 @@ digraph tdd_cycle {
 
 ### Step 0: Check Working Memory
 
-Per `_shared/helpers.md#Load-Working-Memory` — focus on known edge cases and past failures for this module.
+Before writing ANY test, check `.cm/CONTINUITY.md`:
+
+- **"Mistakes & Learnings"** → Are there known edge cases for this area?
+- **"Working Context"** → What patterns/conventions are being followed?
+- **"Key Decisions"** → Any architecture choices that affect test design?
+
+> **Token savings:** Writes better tests on first try by knowing past failures.
+> **Quality boost:** Tests cover edge cases that caused bugs before.
 
 ### RED - Write Failing Test
 
@@ -360,44 +365,6 @@ Bug found? Write failing test reproducing it. Follow TDD cycle. Test proves fix
 
 Never fix bugs without a test.
 
-## Security TDD (Learned: March 2026)
-
-> **Security bugs get tests too.** Every XSS, path traversal, or injection fix starts with a failing test.
-
-### Example: XSS Prevention
-
-**RED**
-```javascript
-test('escapeHtml prevents script injection', () => {
-  const malicious = '<script>alert("xss")</script>';
-  const result = escapeHtml(malicious);
-  expect(result).not.toContain('<script>');
-  expect(result).toContain('&lt;script&gt;');
-});
-
-test('no unescaped innerHTML with dynamic data in JS files', () => {
-  const result = execSync(
-    `grep -rn 'innerHTML.*\\\${' public/js/*.js | grep -v 'esc\\|SecurityUtils' || true`,
-    { encoding: 'utf-8' }
-  );
-  expect(result.trim()).toBe('');
-});
-```
-
-### Example: Path Traversal Prevention
-
-**RED**
-```python
-def test_safe_resolve_blocks_traversal():
-    with pytest.raises(ValueError, match="Path traversal detected"):
-        safe_resolve("/app/data", "../../etc/passwd")
-```
-
-### Rule
-- **Every security fix = failing test first**
-- Test the ATTACK, not just the happy path
-- Security regression tests are permanent — never delete
-
 ## Final Rule
 
 ```

package/skills/cm-ui-preview/SKILL.md

@@ -1,12 +1,12 @@
 ---
 name: cm-ui-preview
-description: "Master Design Skill. Orchestrates AI-powered UI generation using Google Stitch MCP and Pencil.dev MCP, guided by cm-ux-master intelligence and professional prompt enhancement pipelines. Implements the 'Stitch Build Loop', 'Pencil Build Loop', 'Prompt Optimization Structure', and strict design system adherence to generate production-ready UI previews before coding."
+description: "Master Design Skill. Orchestrates AI-powered UI generation using Google Stitch MCP, guided by cm-ux-master intelligence and professional prompt enhancement pipelines. Implements the 'Stitch Build Loop', 'Prompt Optimization Structure', and strict design system adherence to generate production-ready UI previews before coding."
 ---
 
 # UI Preview — The Master Design Orchestrator
 
 > **See it before you build it.**
-> This skill transforms vague user requests into precise, structured 'Construction Blueprints' for AI design generators (Google Stitch or Pencil.dev), ensuring UI outputs are professional, consistent with project branding, and ergonomically sound.
+> This skill transforms vague user requests into precise, structured 'Construction Blueprints' for the Google Stitch AI generator, ensuring UI outputs are professional, consistent with project branding, and ergonomically sound.
 
 ## When to Use
 
@@ -15,9 +15,8 @@ description: "Master Design Skill. Orchestrates AI-powered UI generation using G
 - Building components (forms, cards, dashboards)
 - Restyling or beautifying existing UIs
 - Translating a wireframe or concept into high-fidelity UI
-- Working with `.pen` design files (Pencil.dev)
 
-**Trigger keywords:** build UI, design page, create screen, landing page, dashboard layout, UI designer, use stitch, stitch me a ui, use pencil, .pen file, redesign, restyle
+**Trigger keywords:** build UI, design page, create screen, landing page, dashboard layout, UI designer, use stitch, stitch me a ui, redesign, restyle
 
 ## Architecture & Workflow (End-to-End)
 
@@ -30,32 +29,25 @@ This skill operates as a pipeline. **Do not skip steps.**
   │                                                         │
   │  Step 1: PREFLIGHT & INTENT                             │
   │  ├── Detect task: New UI vs. Refine/Beautify            │
-  │  └── Detect tools: Stitch MCP / Pencil MCP / Both      │
+  │  └── Verify Stitch MCP tools availability               │
   │                                                         │
   │  Step 2: DESIGN SYSTEM EXTRACTION (The Source of Truth) │
-  │  ├── Check: .stitch/DESIGN.md, .pen files, css tokens   │
-  │  └── Fallback: Trigger `cm-design-system` to generate   │
+  │  ├── Check: .stitch/DESIGN.md, css tokens, etc.         │
+  │  └── Fallback: Trigger `cm-ux-master` to generate one   │
   │                                                         │
   │  Step 3: PROMPT ENHANCEMENT (The Build Blueprint)       │
   │  ├── Project Overview (What, who, style vibe)           │
   │  ├── Design System Specs (Colors, Typography, Layout)   │
   │  └── Page Structure (Core function + Specific areas)    │
   │                                                         │
-  │  Step 4a: STITCH EXECUTION (Quick Concept)              │
+  │  Step 4: STITCH EXECUTION (The Build Loop)              │
   │  ├── create_project()                                   │
   │  ├── generate_screen_from_text()                        │
   │  ├── Present link + AI insights to user                 │
   │  └── User Decision: Confirm / Edit / Skip               │
   │                                                         │
-  │  Step 4b: PENCIL EXECUTION (Precise Control)            │
-  │  ├── get_editor_state() / open_document()               │
-  │  ├── get_guidelines() + get_style_guide()               │
-  │  ├── batch_design() — Insert components & layout        │
-  │  ├── get_screenshot() — Visual verification             │
-  │  └── User Decision: Confirm / Edit / Skip               │
-  │                                                         │
   │  Step 5: FINALIZATION & BATON PASS                      │
-  │  ├── Save state (.stitch/next-prompt.md or .pen file)   │
+  │  ├── Save state to .stitch/next-prompt.md               │
   │  └── Hand off to cm-execution for actual coding         │
   │                                                         │
   └─────────────────────────────────────────────────────────┘
@@ -63,52 +55,27 @@ This skill operates as a pipeline. **Do not skip steps.**
 
 ## Step 1: Preflight & Intent Classification
 
-### 1a. Tool Detection (REQUIRED)
-
-Detect which design MCP tools are available:
-
-```
-┌──────────────┬──────────────┬───────────────────────────────┐
-│ Stitch only  │ Pencil only  │ Both available                │
-├──────────────┼──────────────┼───────────────────────────────┤
-│ Use Stitch   │ Use Pencil   │ Ask user preference:          │
-│ (quick       │ (detailed    │ - "Quick concept" → Stitch    │
-│  concept)    │  control)    │ - "Precise control" → Pencil  │
-│              │              │ - Default: Stitch (faster)    │
-└──────────────┴──────────────┴───────────────────────────────┘
-```
-
-- **Stitch MCP:** Check if `create_project` and `generate_screen_from_text` are available.
-- **Pencil MCP:** Check if `get_editor_state` and `batch_design` are available.
-- **Neither:** Proceed with Prompt-Only generation (output the blueprint for manual use).
-
-### 1b. Intent Classification
-
-- **New Screen:** Proceed with full generation (Step 4a or 4b).
-- **Refine/Beautify (edit):**
-  - Stitch: Use `edit_screens()` on existing screen IDs.
-  - Pencil: Use `batch_design()` with Update (U) operations on existing nodes.
+1. **Verify Stitch MCP:** Check if `create_project` and `generate_screen_from_text` are available. If not, inform the user they are missing the Stitch tools but proceed with Prompt-Only generation (output the blueprint for them to use manually).
+2. **Classify Intent:**
+   - **New Screen:** Proceed with full generation.
+   - **Refine/Beautify (edit):** Use `edit_screens()` on existing IDs instead of `generate_screen_from_text()`.
 
 ## Step 2: Design System Extraction (Source of Truth)
 
 Before assembly, you MUST establish the design constraints.
 
 **Look for:**
-- `DESIGN.md` or `.stitch/DESIGN.md` (Primary source for Stitch)
-- Existing `.pen` files in the project (Primary source for Pencil)
-- `design-system/MASTER.md` (Legacy format from `cm-ux-master`)
+- `.stitch/DESIGN.md` (Primary source for Stitch)
+- `design-system/MASTER.md` (From `cm-ux-master`)
 - `.cm/design-tokens.css` or Tailwind configs
 
-**CRITICAL STANDARD:**
-A valid Stitch design file MUST conform to the `skills/cm-ux-master/DESIGN_STANDARD_TEMPLATE.md` standard. It must include both:
-1. The Markdown structure (Overview, Colors, Typography, Spacing & Shapes, Components, Do's and Don'ts).
-2. The hidden JSON block delimited EXACTLY by `<!-- STITCH_TOKENS_START -->` and `<!-- STITCH_TOKENS_END -->`.
-
-**For Pencil.dev:** Design tokens from `DESIGN.md` can be translated to `.pen` file variables via `mcp_pencil_set_variables`. The Pencil MCP also provides built-in style guides via `get_style_guide_tags` and `get_style_guide`.
-
-**If no design system exists or it's in a legacy format:**
-You MUST fallback to the pre-built default design system: `skills/cm-design-system/resources/shadcn-default.md`. Read this file and inject its contents (including the `<!-- STITCH_TOKENS_START -->` block) into your prompt.
-*Suggest running `cm-design-system` if the user wants to extract a custom design instead of using the default Shadcn minimalist style.*
+**If no design system exists:**
+*Suggest running `cm-ux-master` or create a `.stitch/DESIGN.md` baseline.*
+A baseline MUST contain:
+- Platform (Web/Mobile)
+- Primary/Secondary Colors (with hex codes)
+- Typography (Font families)
+- Component constraints (Rounded vs Sharp, Shadow levels)
 
 ## Step 3: Prompt Enhancement Pipeline (CRITICAL)
 
@@ -121,7 +88,10 @@ Structure your prompt exactly like this:
 [Overall vibe, mood, and purpose of the page: e.g., "A modern fintech dashboard for B2B users. Professional, trustworthy, high data density, light mode."]
 
 **DESIGN SYSTEM (REQUIRED):**
-[Inject the full contents of DESIGN.md here. It MUST include the <!-- STITCH_TOKENS_START --> ... <!-- STITCH_TOKENS_END --> block so the Stitch engine ingests the design tokens properly.]
+- Platform: Web Desktop-first
+- Palette: Primary Blue (#0F62FE), Secondary Gray (#F4F4F4), Danger Red (#DA1E28)
+- Typography: Inter for UI, Roboto Mono for numbers
+- Styles: 4px border radius, subtle drop shadows on cards
 
 **PAGE STRUCTURE & FUNCTION:**
 ### 1. Dashboard Home
@@ -136,11 +106,7 @@ Structure your prompt exactly like this:
 
 *Refine UI terminology:* Replace "nice buttons" with "Primary CTA", replace "boxes" with "Cards". Apply relevant constraints from `cm-ux-master` (e.g., Miller's Law for chunking lists).
 
-> **Note for Pencil path:** The same prompt structure is used for your own reasoning. You will then translate the blueprint into `batch_design` operations (see Step 4b).
-
-## Step 4a: Stitch Execution (Quick Concept)
-
-> Use this path when Stitch MCP is available and user wants fast concept generation.
+## Step 4: Stitch Execution (The Build Loop)
 
 1. **Project Creation:**
    ```javascript
@@ -158,9 +124,10 @@ Structure your prompt exactly like this:
    Show the output, provide the URL, and present the **AI Insights** (from the tool's `outputComponents` response).
 
    ```markdown
-   🎨 **UI Preview Generated (Stitch)!**
+   🎨 **UI Preview Generated!**
 
-   - **View & Edit:** [Google Stitch Link]
+   - **Stitch Project ID:** `<id>`
+   - **View & Edit:** [Open in Google Stitch](https://stitch.withgoogle.com/projects/<id>)
    - **AI Insights:** [Any suggestions or notes returned by Stitch]
 
    What's next?
@@ -169,118 +136,11 @@ Structure your prompt exactly like this:
    3. ⏭️ **Skip** — Proceed straight to coding.
    ```
 
-## Step 4b: Pencil Execution (Precise Control)
-
-> Use this path when Pencil MCP is available and user wants pixel-level design control, or when working with existing `.pen` files.
-
-### 4b.1: Initialize
-
-```javascript
-// Check current editor state (or open existing .pen file)
-mcp_pencil_get_editor_state({ include_schema: true })
-
-// If no document is open, create a new one or open an existing .pen file
-mcp_pencil_open_document({ filePathOrTemplate: "new" })
-// OR
-mcp_pencil_open_document({ filePathOrTemplate: "/path/to/project/design.pen" })
-```
-
-### 4b.2: Load Design Guidelines & Style
-
-```javascript
-// Get design rules for the target platform
-mcp_pencil_get_guidelines({ topic: "web-app" })  // or "mobile-app", "landing-page"
-
-// Get style inspiration
-mcp_pencil_get_style_guide_tags()  // Returns available tags
-mcp_pencil_get_style_guide({ tags: ["modern", "dashboard", "dark", "website", "minimal"] })
-```
-
-### 4b.3: Apply Design Tokens (from DESIGN.md)
-
-If a `DESIGN.md` exists with tokens, map them to `.pen` variables:
-
-```javascript
-mcp_pencil_set_variables({
-  filePath: "design.pen",
-  variables: {
-    "primary": { "type": "color", "value": "#3B82F6" },
-    "secondary": { "type": "color", "value": "#10B981" },
-    "surface": { "type": "color", "value": "#FFFFFF" },
-    "text-primary": { "type": "color", "value": "#0F172A" },
-    "border-radius": { "type": "number", "value": 8 }
-  }
-})
-```
-
-### 4b.4: Build Layout with batch_design
-
-Use the prompt blueprint from Step 3 to construct the UI:
-
-```javascript
-// Read available design system components first
-mcp_pencil_batch_get({
-  filePath: "design.pen",
-  patterns: [{ reusable: true }],
-  readDepth: 2,
-  searchDepth: 3
-})
-
-// Then build the layout using Insert (I), Update (U), etc.
-mcp_pencil_batch_design({
-  filePath: "design.pen",
-  operations: `
-    screen=I(document,{type:"frame",name:"Dashboard",width:1440,height:900,fill:"#FFFFFF",layout:"horizontal"})
-    sidebar=I(screen,{type:"frame",name:"Sidebar",width:240,height:"fill_container",fill:"#0F172A",layout:"vertical",padding:16,gap:8})
-    main=I(screen,{type:"frame",name:"Main Content",width:"fill_container",height:"fill_container",layout:"vertical",padding:32,gap:24})
-    header=I(main,{type:"frame",name:"Header",width:"fill_container",height:64,layout:"horizontal"})
-    title=I(header,{type:"text",content:"Dashboard",fontSize:24,fontWeight:"bold"})
-  `
-})
-```
-
-### 4b.5: Verify with Screenshot
-
-```javascript
-mcp_pencil_get_screenshot({ filePath: "design.pen", nodeId: "<screen-id>" })
-```
-
-Analyze the screenshot for visual issues, then present to user:
-
-```markdown
-🎨 **UI Preview Generated (Pencil.dev)!**
-
-- **File:** `design.pen` (editable locally)
-- **Screenshot:** [embedded image]
-
-What's next?
-1. ✅ **Confirm** — I will write the code matching this design exactly.
-2. ✏️ **Edit** — Tell me what to change, I'll update the `.pen` file.
-3. 🔄 **Export** — Export to PNG/PDF for stakeholder review.
-4. ⏭️ **Skip** — Proceed straight to coding.
-```
-
-### Pencil Quick Reference
-
-| Operation | Use For | Example |
-|-----------|---------|---------|
-| `I(parent, data)` | Insert new node | `I(screen, {type:"frame", ...})` |
-| `U(path, data)` | Update existing node | `U("nodeId", {fill:"#FFF"})` |
-| `C(path, parent, data)` | Copy/duplicate | `C("screenId", document, {name:"V2"})` |
-| `R(path, data)` | Replace child in instance | `R("inst/slot", {type:"text",...})` |
-| `D(nodeId)` | Delete node | `D("oldNodeId")` |
-| `G(nodeId, type, prompt)` | Generate/stock image | `G(heroImg, "stock", "office")` |
-
 ## Step 5: Finalization & Baton Pass
 
-- **If Confirm:** Proceed to code implementation. You MUST follow the visual layout, spacing, and colors shown in the preview (Stitch or Pencil).
-- **If Edit:**
-  - Stitch: Call `mcp_StitchMCP_edit_screens()` with the specific element changes.
-  - Pencil: Call `mcp_pencil_batch_design()` with Update/Replace operations.
-- **Baton Update (Optional but Recommended):**
-  - Stitch: Maintain a `.stitch/next-prompt.md` for session continuity.
-  - Pencil: The `.pen` file itself serves as the persistent design artifact.
-- **Export (Pencil only):** Use `mcp_pencil_export_nodes()` to produce PNG/PDF assets for stakeholder review.
+- **If Confirm:** Proceed to code implementation. You MUST follow the visual layout, spacing, and colors shown in the Stitch preview.
+- **If Edit:** Call `mcp_StitchMCP_edit_screens()` with the specific element changes.
+- **Baton Update (Optional but Recommended):** Maintain a `.stitch/next-prompt.md` to feed into the next agent task or session for continuity.
 
 ## Anti-Patterns (Strict Prohibitions)
 
@@ -288,4 +148,6 @@ What's next?
 - ⛔ **NO FAKE SUCCESS:** If the MCP tool fails or isn't connected, do not hallucinate a success message or URL.
 - ⛔ **NO CODING (Yet):** This phase is purely for DESIGN PREVIEW. Do not write React/Vue code until the user clicks "Confirm" or "Skip".
 - ⛔ **NO APP SCAFFOLDING:** Do not initialize project codebases in this workflow.
-- ⛔ **NO RAW .PEN READS:** Never use `view_file` or `grep_search` on `.pen` files. Always use `mcp_pencil_batch_get`.
+
+## Future: Pencil.dev Support
+*Pencil MCP tools are available and will be integrated as an alternative execution engine in future updates (`batch_design`, `get_editor_state`).*