@minhduydev/mdpi 0.4.0 → 0.5.0

package/dist/index.js

@@ -10,7 +10,7 @@ import { spawn, spawnSync } from "node:child_process";
 import { fileURLToPath } from "node:url";
 import { mkdir, readdir } from "node:fs/promises";
 //#region package.json
-var version = "0.4.0";
+var version = "0.5.0";
 //#endregion
 //#region src/utils/manifest.ts
 /**

package/dist/template/.pi/VERSION

@@ -1 +1 @@
-0.4.0
+0.5.0

package/dist/template/.pi/extensions/templates-injector.ts

@@ -1,7 +1,6 @@
 /**
  * Templates Injector Extension
  *
- * Auto-injects project context files into system prompt.
  * Auto-injects project context files into system prompt via pi's before_agent_start hook.
  *
  * Resolution: prefer the LIVE file at `.pi/{name}` (filled by /init, the project's
@@ -9,12 +8,20 @@
  * when no live file exists. This keeps templates/ pristine as deliverables while
  * ensuring real project state is what the agent actually sees.
  *
- * Auto-injected (always, whichever resolves):
+ * Auto-injected (always, whichever resolves) — but ONLY when not placeholder-heavy:
  * - project.md
  * - tech-stack.md
  * - state.md   ← the "you are here" marker; live version injected once /init fills it
  *
- * User can opt-in to inject more via /inject-template command.
+ * Placeholder-skip: at before_agent_start, blank seed templates (still full of
+ * `[Criterion]`/`[URL]`/`<!-- ... -->` markers) are skipped so they don't tax the
+ * first message. A live file with real content (few markers) still injects.
+ *
+ * DESIGN.md is NOT auto-injected — load it on demand via `/inject-template DESIGN.md`
+ * (e.g. when starting UI work).
+ *
+ * User can opt-in to inject more via /inject-template command (placeholder-skip
+ * does not apply to explicit on-demand injection).
  */
 
 import * as fs from "node:fs";
@@ -23,7 +30,18 @@ import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
 
 const ALWAYS_INJECT = ["project.md", "tech-stack.md", "state.md"];
 
-function readTemplate(cwd: string, name: string): string | null {
+// Placeholder markers that indicate a template is still a blank seed (not filled).
+// Counted to decide whether an auto-injected file would just add noise to the
+// first message. Threshold is intentionally low (>5) so a genuinely filled live
+// file (a handful of incidental bracket occurrences) still injects.
+const PLACEHOLDER_MARKER_RE = /\[(?:e\.g\.|Criterion|URL|Title|Date|slug)[^\]]*\]|<slug>|<!-- /g;
+const PLACEHOLDER_MARKER_THRESHOLD = 5;
+
+function readTemplate(
+	cwd: string,
+	name: string,
+	skipPlaceholders = false,
+): string | null {
 	// Prefer live file at .pi/{name} (filled by /init — real project state);
 	// fall back to blank seed at .pi/templates/{name} when no live file exists.
 	const livePath = path.join(cwd, ".pi", name);
@@ -33,7 +51,17 @@ function readTemplate(cwd: string, name: string): string | null {
 	const content = fs.readFileSync(filePath, "utf-8");
 	// Strip frontmatter for injection
 	const fmMatch = content.match(/^---\n[\s\S]*?\n---\n([\s\S]*)$/);
-	return (fmMatch ? fmMatch[1] : content).trim();
+	const body = (fmMatch ? fmMatch[1] : content).trim();
+	// Auto-inject only: skip placeholder-heavy files so unfilled templates don't
+	// tax the first message. On-demand /inject-template bypasses this (default).
+	// Anchored to a closing `]` so real markdown links like `[Vercel](...)` don't
+	// count; only placeholder-shaped tokens (`[URL]`, `[Criterion 1]`, `[e.g., ...]`,
+	// `<slug>`, `<!-- `) do.
+	if (skipPlaceholders) {
+		const markers = body.match(PLACEHOLDER_MARKER_RE);
+		if (markers && markers.length > PLACEHOLDER_MARKER_THRESHOLD) return null;
+	}
+	return body;
 }
 
 export default function templatesInjector(pi: ExtensionAPI) {
@@ -41,7 +69,7 @@ export default function templatesInjector(pi: ExtensionAPI) {
 		const injected: string[] = [];
 
 		for (const name of ALWAYS_INJECT) {
-			const content = readTemplate(ctx.cwd, name);
+			const content = readTemplate(ctx.cwd, name, /* skipPlaceholders */ true);
 			if (content && content.length > 0) {
 				injected.push(`### ${name}\n\n${content}`);
 			}

package/dist/template/.pi/prompts/INDEX.md

@@ -4,7 +4,7 @@ purpose: Index of slash commands with purpose, when-to-use, and lifecycle positi
 
 # Prompts Index
 
-14 slash commands. Lifecycle is canonical; utilities attach at any phase.
+11 slash commands. Lifecycle is canonical; utilities attach at any phase.
 
 ## Canonical Lifecycle
 
@@ -39,9 +39,6 @@ Status:                 /status
 | `/gc` | Fallow analysis + quality grades + optional cleanup PRs | Maintenance cadence; not during active feature work | `[--dry-run] [--apply] [--scope <dir>]` | Maintenance |
 | `/status` | Show active feature, progress tail, blockers | Orient at session start or when unsure | `[--full]` | Any (read-only) |
 | `/close` | Finalize active feature, clear `.active` | Feature done/blocked/abandoned, or recover dangling `.active` | `[--done\|--blocked\|--abandoned] [--note <text>]` | Ship/Recovery |
-| `/loop-check` | NO-GO qualification gate — refuse-list + 2-condition test + 30s checklist | Before scheduling a task as an unattended loop | `<task description> [--help]` | Define |
-| `/loop-init` | Scaffold `.pi/loops/<name>/` from templates (VISION/STATE/SKILL) | Once a task passes /loop-check | `<name> [--help]` | Define |
-| `/loop-review` | Maker/checker gate — verifier subagent runs the gate, emits ACCEPT/REJECT | After a maker run, before ship | `<loop-name> [--help]` | Review |
 
 ## When to use what
 
@@ -57,9 +54,6 @@ Status:                 /status
 | "Where am I / what's the state" | `/status` |
 | Feature done but `/ship` left `.active` dangling | `/close --done` |
 | Maintenance / dead code sweep | `/gc --dry-run` |
-| Qualify a task as an unattended loop (refuse-list + 2-condition test) | `/loop-check "<task>"` (Define) |
-| Scaffold a loop after /loop-check returns GO | `/loop-init <name>` (Define) |
-| Maker/checker gate on a loop run before shipping | `/loop-review <name>` (Review) |
 
 ## Conventions (shared across commands)
 
@@ -73,6 +67,6 @@ Status:                 /status
 
 ## Related
 
-- `skills/INDEX.md` — task → skill routing (70 skills)
+- `skills/INDEX.md` — task → skill routing (67 skills)
 - `workflows/INDEX.md` — 6 DAG workflows invoked by commands
-- `templates/` — 19 template files (PRD, plan body, state, roadmap, loop-vision, loop-state, orchestrators, etc.)
+- `templates/` — 12 template files (PRD, plan body, state, roadmap, etc.)

package/dist/template/.pi/skills/INDEX.md

@@ -5,7 +5,7 @@ description: "Task-to-skill routing table with File Match + Keyword triggers, Ph
 
 # Skills Index — Task → Skill Mapping
 
-This file helps the agent (and humans) discover which skill to load for a given task. Skills are auto-loaded into the system prompt at startup (Tier 1), triggered by File/Keyword Match rules, or loaded on-demand via `/skill:<name>` (Tier 2). All 70 skills are available directly in `.pi/skills/`.
+This file helps the agent (and humans) discover which skill to load for a given task. Skills are auto-loaded into the system prompt at startup (Tier 1), triggered by File/Keyword Match rules, or loaded on-demand via `/skill:<name>` (Tier 2). All skills are available directly in `.pi/skills/`.
 
 **How routing works:** File Match → Keyword Match → Quick Routing Table → Decision Tree (if ambiguous).
 
@@ -17,16 +17,22 @@ When the agent edits files matching these patterns, the listed skills auto-load.
 
 | File pattern | Auto-load skill(s) | Why |
 |-------------|-------------------|-----|
-| `*.ts,*.tsx,*.jsx` | `react-best-practices`, `deep-module-design` | TypeScript/React best practices + structural quality |
+| `*.ts,*.tsx,*.jsx` | `react-best-practices`, `deep-module-design`, `react-compiler` | TypeScript/React best practices + structural quality |
+| `**/actions.ts`, `**/actions/**` | `react-server-actions` | Server Actions + useActionState patterns |
+| `**/app/**/page.tsx`, `**/app/**/layout.tsx` | `nextjs-app-router`, `nextjs-cache` | App Router conventions + caching |
+| `**/stores/**`, `**/store.ts` | `zustand` | Zustand state management patterns |
+| `**/hooks/use-query*.ts`, `**/queries/**` | `tanstack-query` | TanStack Query hooks and patterns |
+| `**/forms/**` with `useForm`, `zodResolver` | `react-hook-form` | React Hook Form + Zod patterns |
 | `*.swift,*.swiftui` | `swift-concurrency`, `swiftui-expert-skill` | Swift patterns + concurrency safety |
 | `*.test.*,*.spec.*,__tests__/**` | `test-driven-development`, `testing-anti-patterns` | Test-first discipline + mock hygiene |
 | `*.sql,migrations/**` | `supabase-postgres-best-practices` | Query performance + RLS |
 | `.github/workflows/**,Dockerfile,docker-compose*.yml` | `ci-cd-and-automation` | Pipeline design + caching |
 | `.pi/skills/*/SKILL.md` | `writing-skills` | Skill authoring best practices |
-| `.pi/loops/**`,`loop-orchestrator.*`,`loop-guard.ts` | `loop-engineering`, `loop-audit` | Loop design/qualification + readiness scoring |
-| `*.css,*.scss,*.less` | `frontend-design`, `design-taste-frontend` | Design system consistency |
-| `*.tsx,*.jsx` | `frontend-ui-engineering` | Production-quality UI standards |
+
+| `*.css,*.scss,*.less` | `baseline-ui`, `frontend-design`, `design-taste-frontend` | Deslop pass + design system consistency |
+| `*.tsx,*.jsx` | `baseline-ui`, `frontend-ui-engineering` | Deslop pass + production-quality UI standards |
 | `*.md,docs/**,ADR*.md` | `documentation-and-adrs` | Doc structure + ADR format |
+| `.pi/**/DESIGN.md` | `frontend-design`, `design-taste-frontend` | Project design identity — load aesthetic skills when DESIGN.md is edited. NOTE: DESIGN.md is no longer auto-injected; load it into context on demand via `/inject-template DESIGN.md` when starting UI work. |
 
 ---
 
@@ -43,7 +49,13 @@ When the user's prompt contains these keywords (case-insensitive), the listed sk
 | refactor, cleanup, simplify, clean code, complex | `code-cleanup`, `code-simplification`, `deep-module-design` |
 | test, spec, verify, assert, coverage, TDD | `test-driven-development`, `testing-anti-patterns` |
 | review, audit, quality, check, PR | `code-review-and-quality`, `agent-code-quality-gate` |
-| design, UI, component, style, layout, CSS, tailwind | `frontend-design`, `design-taste-frontend` |
+| design, UI, component, style, layout, CSS, tailwind, DESIGN.md, design identity, design token, brand identity | `frontend-design`, `design-taste-frontend` |
+| accessibility, a11y, WCAG, ARIA, keyboard, focus, fix a11y | `fixing-accessibility` |
+| craft, polish, detail, micro-interaction, concentric, optical, border-radius | `ui-craft-principles` |
+| i18n, internationalization, RTL, edge case, error state, empty state, harden, text overflow | `production-hardening` |
+| audit, quality score, UI audit, anti-pattern detection, P0 P1 P2 | `ui-quality-audit` |
+| OKLCH, color system, color palette, color space, gamut, color conversion | `oklch-color-workflow` |
+| deslop, quick fix, baseline, fix AI patterns, auto-fix UI | `baseline-ui` |
 | database, query, SQL, postgres, supabase, RLS, migration | `supabase`, `supabase-postgres-best-practices` |
 | docs, documentation, README, ADR, changelog | `documentation-and-adrs` |
 | commit, branch, merge, rebase, git, worktree | `git-workflow-and-versioning`, `using-git-worktrees` |
@@ -58,9 +70,19 @@ When the user's prompt contains these keywords (case-insensitive), the listed sk
 | payment, subscription, license, billing, checkout | `polar` |
 | Figma, design token, mockup, screenshot to code | `figma`, `mockup-to-code` |
 | Jira, Confluence, Atlassian, issue, ticket | `jira` |
+| v0, v0.sh, v0.dev, AI UI generator, Vercel v0, v0 component, v0 generate | `v0` |
+| shadcn, shadcn/ui, shadcn-ui, shadcn ui, shadcn component, shadcn add | `shadcn-ui` |
+| Server Actions, useActionState, useOptimistic, useFormStatus, 'use server', form action, progressive enhancement | `react-server-actions` |
+| App Router, layout.tsx, page.tsx, parallel routes, intercepting routes, route groups, async params, template.tsx, loading.tsx | `nextjs-app-router` |
+| use cache, cacheLife, cacheTag, revalidateTag, revalidatePath, Next.js cache, connection() | `nextjs-cache` |
+| React Compiler, auto-memoize, babel-plugin-react-compiler, useMemo, useCallback, memoization | `react-compiler` |
+| TanStack Query, React Query, useQuery, useMutation, optimistic update, infinite query, prefetch | `tanstack-query` |
+| Zustand, state management, global state, create store, useShallow, immer, persist, devtools | `zustand` |
+| React Hook Form, useForm, zodResolver, Controller, useFieldArray, form validation, conditional fields | `react-hook-form` |
 | browser, e2e, screenshot, playwright, chrome | `playwright`, `chrome-devtools`, `browser-testing-with-devtools` |
 | dependency, package, library, npm, PyPI, source | `opensrc` |
-| loop, unattended loop, nightly triage, loop-readiness, loop-cost, loop-check, loop-review | `loop-engineering`, `loop-audit`, `loop-cost` |
+| scrape, crawl, webclaw, bot protection, 403, webfetch fail, extract web content, web scraping | `webclaw` |
+
 | Swift, iOS, macOS, actor, async/await, Sendable | `swift-concurrency`, `swiftui-expert-skill`, `core-data-expert` |
 
 ---
@@ -103,9 +125,7 @@ When the user's prompt contains these keywords (case-insensitive), the listed sk
 | `dcp-hygiene` | At command/phase closure — compress closed exploratory work-streams via pi-dcp when `compress` is available; no-ops if DCP absent | All | Low |
 | `memory-system` | Understanding/leveraging pi-hermes-memory — auto-flywheel, tools, commands, when to use memory_search vs vcc_recall | All | Low |
 | `doubt-driven-development` | In-flight adversarial review of non-trivial decisions before they stand | Build | Medium |
-| `loop-engineering` | Designing/qualifying/running unattended coding loops; 2-condition test + VISION/state + confidence-gated action | All | Medium |
-| `loop-audit` | Scoring a project's loop-readiness 0-100 + L0/L1/L2/L3; L3 gated on proven run | Review | Low |
-| `loop-cost` | Estimating tokens/day + daily cap + early-exit flag before approving a loop budget | Plan | Low |
+
 
 ### Implementation
 
@@ -134,17 +154,30 @@ When the user's prompt contains these keywords (case-insensitive), the listed sk
 
 | Skill | Use when | Phase | Risk |
 |-------|----------|-------|------|
-| `frontend-ui-engineering` | Production-quality UIs — component architecture, design systems, WCAG 2.1 AA, avoid AI aesthetic | Build | Medium |
-| `frontend-design` | Building any web UI with React-based frameworks | Build | Medium |
+| `accessibility-audit` | ⚠️ DEPRECATED — use `fixing-accessibility` instead | Review | Medium |
+| `baseline-ui` | Quick deslop pass — fixes common AI-generated UI anti-patterns automatically | Build | Low |
+| `design-system-audit` | Auditing an existing design system for consistency | Review | Medium |
 | `design-taste-frontend` | BASE aesthetic layer to override default LLM design biases | Build | Low |
+| `fixing-accessibility` | Actionable WCAG 2.1 AA accessibility fixes — before/after code examples | Build + Review | Medium |
+| `frontend-design` | Building any web UI with React-based frameworks | Build | Medium |
+| `frontend-ui-engineering` | Production-quality UIs — component architecture, design systems, WCAG 2.1 AA, avoid AI aesthetic | Build | Medium |
 | `high-end-visual-design` | Premium, agency-quality, or luxury visual design | Build | Low |
-| `minimalist-ui` | Clean, editorial, or minimalist aesthetics | Build | Low |
 | `industrial-brutalist-ui` | Brutalist, military-terminal, or raw mechanical aesthetics | Build | Low |
-| `react-best-practices` | Writing, reviewing, or refactoring React/Next.js code for performance | Build | Medium |
-| `redesign-existing-projects` | Upgrading an existing website or app's visual design | Build | High |
+| `minimalist-ui` | Clean, editorial, or minimalist aesthetics | Build | Low |
 | `mockup-to-code` | Converting UI mockups, screenshots, Figma/Sketch designs into code | Build | Medium |
-| `accessibility-audit` | Auditing UI components or pages for accessibility compliance | Review | Medium |
-| `design-system-audit` | Auditing an existing design system for consistency | Review | Medium |
+| `oklch-color-workflow` | Complete OKLCH color system — syntax, palette generation, contrast, Tailwind v4 | Build | Low |
+| `production-hardening` | Production hardening — i18n, error states, edge cases, cross-browser | Ship | High |
+| `react-best-practices` | Writing, reviewing, or refactoring React 19 / Next.js 16 code for performance | Build | Medium |
+| `react-server-actions` | Building forms, mutations, data writes with React 19 Server Actions | Build | Medium |
+| `nextjs-app-router` | Building Next.js App Router pages — layouts, routes, RSC boundaries | Build | Medium |
+| `nextjs-cache` | Next.js 16 caching — `use cache`, cacheLife, cacheTag, revalidation | Build | Medium |
+| `react-compiler` | Enabling, debugging, optimizing with the React Compiler | Build | Low |
+| `tanstack-query` | Data fetching, caching, mutations with TanStack Query v5 | Build | Medium |
+| `zustand` | Global/shared state management with Zustand v5 | Build | Medium |
+| `react-hook-form` | Building forms with React Hook Form v7 + Zod v3 | Build | Medium |
+| `redesign-existing-projects` | Upgrading an existing website or app's visual design | Build | High |
+| `ui-craft-principles` | 16 craft principles — concentric radius, optical alignment, interruptible animations | Build | Low |
+| `ui-quality-audit` | 5-dimension UI quality scoring (0-4) with P0-P3 severity tags | Review | Medium |
 
 ### Platform / Infrastructure
 
@@ -183,6 +216,8 @@ When the user's prompt contains these keywords (case-insensitive), the listed sk
 | `opensrc` | Understanding how a library works internally, debugging dependency issues | Build | Low |
 | `pdf-extract` | Extracting text, images, tables, or metadata from PDF files | Build | Low |
 | `webclaw` | When webfetch returns 403 or bot protection errors | Build | Low |
+| `v0` | Using v0 (v0.app by Vercel) for AI-powered UI generation, prompt engineering, CLI/SDK integration | Build | Medium |
+| `shadcn-ui` | Setting up, configuring, or adding shadcn/ui components — CLI v4, presets, skills, registries | Build | Medium |
 | `gemini-large-context` | Analyzing large codebases, comparing multiple files exceeding typical context limits | Plan | Low |
 | `fallow` | Codebase intelligence — quality, dead code, duplication, complexity hotspots | Review | Low |
 
@@ -213,8 +248,18 @@ Maps user intent to skill(s). `→` = sequential pipeline (execute in order). `+
 | "I'm stuck" / "not sure what to do" | `behavioral-kernel` + `using-agent-skills` | All | Low |
 | "which skill to use" / "what skill for" | `using-agent-skills` | Define | Low |
 | "create UI" / "build component" / "design page" | `frontend-design` + `design-taste-frontend` | Build | Medium |
+| "generate with v0" / "v0 component" / "v0 prompt" / "AI generate UI" | `v0` + `frontend-design` | Build | Medium |
+| "add shadcn components" / "shadcn init" / "setup shadcn" / "shadcn/ui setup" | `shadcn-ui` + `frontend-design` | Build | Medium |
+| "Server Action" / "useActionState" / "useOptimistic" / "'use server'" | `react-server-actions` + `nextjs-app-router` | Build | Medium |
+| "App Router" / "layout.tsx" / "parallel route" / "intercepting route" | `nextjs-app-router` + `react-best-practices` | Build | Medium |
+| "use cache" / "revalidateTag" / "cacheLife" / "Next.js cache" | `nextjs-cache` + `nextjs-app-router` | Build | Medium |
+| "React Compiler" / "auto-memoize" / "useMemo unnecessary" | `react-compiler` + `react-best-practices` | Build | Low |
+| "useQuery" / "useMutation" / "TanStack Query" / "optimistic update" | `tanstack-query` + `zustand` | Build | Medium |
+| "Zustand" / "create store" / "useShallow" / "global state" | `zustand` + `tanstack-query` | Build | Medium |
+| "React Hook Form" / "useForm" / "zodResolver" / "useFieldArray" | `react-hook-form` + `react-server-actions` | Build | Medium |
 | "deploy to Cloudflare" | `cloudflare` | Ship | High |
 | "deploy to Vercel" | `vercel-deploy-claimable` | Ship | High |
+| "animate" / "animation" / "motion" / "framer" / "transition" | `frontend-design` (references/animation/) | Build | Low |
 | "set up database" / "Supabase" | `supabase` + `supabase-postgres-best-practices` | Build | High |
 | "add logging" / "monitoring" / "observability" | `observability-and-instrumentation` | Ship | Medium |
 | "optimize context" / "agent quality degraded" / "too many tokens" | `context-engineering` | All | Low |
@@ -227,8 +272,15 @@ Maps user intent to skill(s). `→` = sequential pipeline (execute in order). `+
 | "add payment" / "subscription" / "checkout" | `polar` | Build | High |
 | "Figma to code" / "mockup to code" / "design to code" | `figma` → `mockup-to-code` → `frontend-design` | Build | Medium |
 | "redisign" / "visual upgrade" / "restyle" | `redesign-existing-projects` | Build | High |
-| "accessibility" / "a11y" / "WCAG" | `accessibility-audit` | Review | Medium |
+| "color system" / "OKLCH" / "color palette" | `oklch-color-workflow` | Build | Low |
+| "fix accessibility" / "a11y fix" / "WCAG fix" | `fixing-accessibility` | Build | Medium |
+| "make it feel better" / "craft details" / "UI polish" | `ui-craft-principles` | Build | Low |
+| "production ready" / "harden UI" / "edge cases" | `production-hardening` | Ship | High |
+| "quick polish" / "deslop" / "baseline fix" | `baseline-ui` | Build | Low |
+| "UI audit" / "quality score" / "score my UI" | `ui-quality-audit` | Review | Medium |
+| "accessibility" / "a11y" / "WCAG" | `fixing-accessibility` | Review | Medium |
 | "dependency issue" / "how does library X work" | `opensrc` | Build | Low |
+| "scrape this" / "extract from" / "webclaw" / "crawl site" / "webfetch failed" | `webclaw` | Build | Low |
 | "browser test" / "e2e test" / "playwright" | `playwright` \| `browser-testing-with-devtools` | Verify | Medium |
 | "migrate" / "deprecate" / "remove old API" | `deprecation-and-migration` | Ship | High |
 | "create skill" / "write skill" / "edit skill" | `writing-skills` | Build | Low |
@@ -246,6 +298,7 @@ Execute skills in order — output of one feeds the next.
 brainstorming → spec-driven-development → planning-and-task-breakdown → incremental-implementation
 figma → mockup-to-code → frontend-design
 root-cause-tracing → debugging-and-error-recovery → verification-before-completion
+baseline-ui → frontend-design → ui-craft-principles → production-hardening → ui-quality-audit
 ```
 
 ### Parallel Load (`+`)
@@ -253,7 +306,7 @@ Load multiple skills simultaneously for independent concerns.
 
 ```
 code-review-and-quality + performance-optimization + security-and-hardening
-frontend-design + design-taste-frontend + accessibility-audit
+frontend-design + design-taste-frontend + fixing-accessibility
 test-driven-development + testing-anti-patterns + defense-in-depth
 ```
 
@@ -267,6 +320,15 @@ Phase 3 (Review):  code-review-and-quality + code-simplification
 Phase 4 (Ship):    verification-before-completion → shipping-and-launch
 ```
 
+```
+Phase 1 (Deslop):   baseline-ui
+Phase 2 (Design):   design-taste-frontend → frontend-design  
+Phase 3 (Craft):    ui-craft-principles + oklch-color-workflow
+Phase 4 (Build):    frontend-ui-engineering + incremental-implementation
+Phase 5 (Harden):   production-hardening + fixing-accessibility
+Phase 6 (Audit):    ui-quality-audit
+```
+
 ### Choose One (`|`)
 Pick the best single skill when options are context-dependent.
 

package/dist/template/.pi/skills/accessibility-audit/SKILL.md

@@ -1,9 +1,15 @@
 ---
 name: accessibility-audit
-description: Use when auditing UI components or pages for accessibility compliance, checking WCAG conformance, identifying keyboard navigation issues, color contrast problems, and pre-launch accessibility verification
+description: ⚠️ DEPRECATED — Use fixing-accessibility instead. Previously used for auditing UI components or pages for accessibility compliance.
 ---
 
-# Accessibility Audit Skill
+> **⚠️ DEPRECATED — This skill has been replaced by [`fixing-accessibility`](../fixing-accessibility/SKILL.md).**
+> 
+> `fixing-accessibility` provides actionable WCAG 2.1 AA fixes with before/after code examples, not just audit checklists. It covers 9 priority categories with concrete fix recipes.
+> 
+> This file is retained for backward compatibility. All references should redirect to `fixing-accessibility`.
+
+# Accessibility Audit Skill (Deprecated)
 
 ## When to Use
 

package/dist/template/.pi/skills/baseline-ui/SKILL.md

@@ -0,0 +1,211 @@
+---
+name: baseline-ui
+description: Auto-load when editing *.tsx,*.jsx,*.css — quick deslop pass that fixes common AI-generated UI anti-patterns before any design work begins
+---
+
+# Baseline UI
+
+## When to Use
+
+- Auto-load when editing `*.tsx`, `*.jsx`, `*.css`, `*.scss` — runs a quick deslop pass first
+- Before loading any aesthetic overlay (`design-taste-frontend`, `minimalist-ui`, etc.)
+- When reviewing or cleaning up existing UI that looks "AI-generated"
+- First step in any frontend implementation pipeline
+
+## When NOT to Use
+
+- When `design-taste-frontend` or a specific aesthetic overlay is already loaded (they supersede these rules)
+- When building non-UI code (backend, CLI, data processing, APIs)
+- When working with an established design system that already bakes in these rules
+
+---
+
+## Quick Deslop Pass — Three Rule Tiers
+
+Apply these rules in order. **MUST** rules are hard errors — fix before proceeding. **SHOULD** rules are warnings — fix unless there's a deliberate exception. **NEVER** rules are blocking patterns — rewrite entirely.
+
+### MUST Rules (Hard Errors)
+
+Patterns that are never acceptable in production UI. Fix before any other work.
+
+| Rule | Anti-pattern | Fix |
+|------|-------------|-----|
+| **No purple gradients** | `bg-gradient-to-r from-purple-500 to-indigo-600` | Use a single flat accent color from the project palette, or a subtle tonal gradient within the same hue |
+| **No Inter/Roboto/Arial** | `font-['Inter']`, `font-['Roboto']`, or bare `sans-serif` fallback to Arial | Use `Geist`, `Outfit`, `Satoshi`, `Cabinet Grotesk`, or system font stack (`-apple-system, BlinkMacSystemFont`) |
+| **No emojis in code** | `🎉`, `🚀`, `✨` in React components, headings, or alt text | Replace with SVG icons (Phosphor, Radix) or clean primitives |
+| **No `h-screen`** | `h-screen` on hero sections or full-page layouts | Use `min-h-[100dvh]` to prevent mobile browser chrome layout jump |
+| **No `div` onClick as button** | `<div onClick={...} className="cursor-pointer">` | Use `<button type="button">` or `<button type="submit">` with proper styling |
+| **No lorem ipsum** | `Lorem ipsum dolor sit amet...` or any lorem ipsum variant | Use real or realistic domain-appropriate text. For placeholder text, use context-aware content (e.g., "Product launch strategy Q3 2026" not "Lorem ipsum"). |
+| **No generic data** | "Jane Doe", "John Smith", "$99/mo", "amazing", "powerful" | Use realistic names, numbers, and domain-appropriate language. No filler testimonials, no startup slop words. |
+
+**Before/After examples:**
+
+```tsx
+// BEFORE — MUST fix: purple gradient + emoji + h-screen
+<section className="h-screen bg-gradient-to-r from-purple-500 to-indigo-600">
+  <h1>🚀 Launch Your App</h1>
+</section>
+
+// AFTER
+<section className="min-h-[100dvh] bg-zinc-900">
+  <h1 className="text-white">Launch Your App</h1>
+</section>
+```
+
+```tsx
+// BEFORE — MUST fix: div as button
+<div onClick={handleSubmit} className="cursor-pointer rounded px-4 py-2 bg-blue-500 text-white">
+  Submit
+</div>
+
+// AFTER
+<button type="button" onClick={handleSubmit} className="rounded px-4 py-2 bg-blue-500 text-white">
+  Submit
+</button>
+```
+
+---
+
+### SHOULD Rules (Warnings)
+
+Patterns that signal low-quality AI output. Fix unless you have a specific reason not to.
+
+| Rule | Anti-pattern | Fix |
+|------|-------------|-----|
+| **Use 4pt spacing scale** | Arbitrary spacing: `p-3`, `gap-3`, `m-5` | Use 4pt increments: `p-2` (8px), `p-4` (16px), `p-6` (24px), `p-8` (32px), `p-12` (48px) |
+| **Use semantic color tokens** | Raw hex: `text="#3B82F6"`, `bg="#1E40AF"` | Use Tailwind semantic tokens: `text-primary`, `bg-primary-700`, `text-muted-foreground` |
+| **Max 1 accent color** | Two+ accent colors competing: blue buttons + green badges + orange links | Pick one accent hue. Use it for all interactive elements. Use neutrals for everything else. |
+| **Skeleton loaders, not spinners** | Full-page spinner: `<div className="flex justify-center"><Spinner /></div>` | Match the layout with skeleton bars: `<div className="space-y-4"><div className="h-4 w-3/4 rounded bg-zinc-200 animate-pulse" />...` |
+| **Left-align content by default** | Every section centered (`text-center`, `mx-auto`) | Left-align content blocks. Reserve center for short hero headlines only. |
+| **Use CSS Grid for layouts** | `flex-wrap` with `w-[calc(33%-1rem)]` math | Use `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6` |
+| **Consistent border-radius** | Mixed: `rounded-sm` on cards, `rounded-2xl` on inputs, `rounded-full` on buttons | Pick one radius tier: `rounded-md` (6px) for cards/buttons, `rounded-lg` (8px) for modals. Don't mix. |
+
+**Before/After examples:**
+
+```tsx
+// BEFORE — SHOULD fix: arbitrary spacing, raw hex, flex percentage
+<div className="flex flex-wrap p-3 gap-3">
+  {items.map(i => (
+    <div className="w-[calc(50%-6px)] bg="#F3F4F6" p-2.5">
+      {i.name}
+    </div>
+  ))}
+</div>
+
+// AFTER
+<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4">
+  {items.map(i => (
+    <div className="bg-muted p-4 rounded-md">
+      {i.name}
+    </div>
+  ))}
+</div>
+```
+
+```tsx
+// BEFORE — SHOULD fix: spinner loading state
+{loading && <div className="flex justify-center py-12"><Spinner /></div>}
+
+// AFTER
+{loading && (
+  <div className="space-y-4 p-4">
+    <div className="h-4 w-3/4 rounded bg-zinc-200 animate-pulse" />
+    <div className="h-4 w-1/2 rounded bg-zinc-200 animate-pulse" />
+    <div className="h-4 w-5/6 rounded bg-zinc-200 animate-pulse" />
+  </div>
+)}
+```
+
+---
+
+### NEVER Rules (Blocking — Rewrite Entirely)
+
+Patterns that signal complete design failure. Block the output and rewrite.
+
+| Rule | Why it's blocked |
+|------|-----------------|
+| **Pure black `#000`** | Never looks good in UI. Destroys depth. Use `#111`, `#18181b`, or `#1c1c1e` instead. |
+| **Centered hero with low variance** | Forces boring landing pages. Use split-screen or left-aligned content. Establish a layout variance baseline (see `design-taste-frontend` for DESIGN_VARIANCE dial if loaded). |
+| **3-column identical cards** | Three identical feature cards is the #1 sign of AI-generated UI. Vary layout: 2-col then 1-col, or 4-col grid, or asymmetric bento. |
+| **Glassmorphism as decoration** | `backdrop-blur-xl bg-white/10` applied to elements with no functional need for depth. Use flat surfaces or layered shadows instead. |
+| **Bounce/elastic easing** | `cubic-bezier(0.68, -0.55, 0.265, 1.55)` or CSS `bounce` animation on UI elements. Use `ease-out` or spring-based motion instead. |
+| **Gray text on colored backgrounds** | White text on pastel backgrounds or gray text on white. Always meet 4.5:1 contrast. |
+
+**Before/After examples:**
+
+```tsx
+// BEFORE — NEVER: pure black + 3 identical cards + glassmorphism
+<div className="bg-black text-white">
+  <div className="backdrop-blur-xl bg-white/10 rounded-2xl p-8">
+    <div className="grid grid-cols-3 gap-4">
+      <div className="text-center p-6"><h3>Feature 1</h3><p>Description</p></div>
+      <div className="text-center p-6"><h3>Feature 2</h3><p>Description</p></div>
+      <div className="text-center p-6"><h3>Feature 3</h3><p>Description</p></div>
+    </div>
+  </div>
+</div>
+
+// AFTER
+<div className="bg-[#111] text-zinc-100">
+  <div className="max-w-7xl mx-auto px-6 py-24">
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+      <div className="lg:col-span-2 bg-zinc-900 border border-zinc-800 rounded-lg p-8">
+        <h3 className="text-xl font-semibold">Feature 1</h3>
+        <p className="text-zinc-400 mt-2">Description</p>
+      </div>
+      <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-8">
+        <h3 className="text-xl font-semibold">Feature 2</h3>
+        <p className="text-zinc-400 mt-2">Description</p>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+---
+
+## Pipeline Position
+
+```
+baseline-ui ──► design-taste-frontend ──► frontend-design ──► frontend-ui-engineering
+   ↑
+   Quick deslop pass before any design or implementation work
+```
+
+Run `baseline-ui` first when starting any frontend work. It catches the most common AI-generation artifacts so downstream skills can focus on real design quality.
+
+## Don't
+
+| Pattern | Replacement | Because |
+|---------|-------------|---------|
+| Purple/indigo gradients as primary palette | Single flat accent color from project palette | Purple gradient is the #1 AI-generation fingerprint |
+| Inter, Roboto, Arial fonts | Geist, Outfit, Satoshi, or system font stack | Overused fonts signal generic AI output |
+| Emojis in JSX/TSX or CSS content | SVG icons (Phosphor, Radix) or clean primitives | Emojis look unprofessional in production UI |
+| `h-screen` on hero sections | `min-h-[100dvh]` | h-screen causes layout jump on mobile browsers |
+| `<div onClick>` as interactive element | `<button type="button">` with proper styling | div onClick breaks keyboard and screen reader access |
+| Pure black `#000` in UI | Off-black (`#111`, Zinc-950, or `#1c1c1e`) | Pure black destroys visual depth |
+| 3-column identical card grids | Varied 2-col, asymmetric bento, or alternating layouts | Three identical cards is the #1 AI UI tell |
+| Glassmorphism without functional purpose | Flat surfaces or layered shadows | Decorative glassmorphism adds visual noise |
+| Bounce/elastic CSS easing on UI elements | `ease-out` or spring-based motion | Bounce easing feels unnatural for UI |
+
+## Verification
+
+- [ ] No `h-screen` — all full-height containers use `min-h-[100dvh]`
+- [ ] No `div` with `onClick` used as a button — all interactive elements use `<button>`, `<a>`, or proper ARIA roles
+- [ ] No emojis in any JSX/TSX or CSS content
+- [ ] No purple/indigo-blue gradients
+- [ ] No Inter, Roboto, or Arial font references
+- [ ] No pure black (`#000`/`#000000`) color values
+- [ ] Spacing uses 4pt scale (multiples of 4: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96)
+- [ ] No 3-column identical card patterns
+- [ ] No glassmorphism (`backdrop-blur` + semi-transparent bg) used purely decoratively
+- [ ] No bounce/elastic CSS easing curves on UI elements
+- [ ] Skeleton loaders used instead of spinners for content loading states
+
+### Self-Critique (Run Before Output)
+
+1. **Contrast Check:** Are all text/background combinations ≥ 4.5:1 ratio? No low-contrast gray text on colored backgrounds.
+2. **Data Check:** Is every text string real or realistic? No "Lorem ipsum", "Jane Doe", "$99", or filler words ("amazing", "powerful").
+3. **Grid Check:** Do all spacing values use the 4pt scale (4, 8, 12, 16, 24, 32, 48, 64)? No arbitrary pixel values.
+4. **Font Check:** No Inter, Roboto, Arial, or other AI-default fonts. No oversized H1 (>40px without explicit design reason).
+5. **Color Check:** No pure black `#000`, no purple/indigo gradients, no oversaturated accents like `#FF4500`.

package/dist/template/.pi/skills/dcp-hygiene/SKILL.md

@@ -16,7 +16,7 @@ description: "Use at command/phase closure points to compress closed exploratory
 - The `compress` tool is not registered (DCP extension not installed, or `compress.permission: "deny"`) — see No-op clause below.
 - The work-stream is still in-flight or spans your most recent turn — DCP turn protection (last 3 turns) already refuses these; don't try.
 - The user just asked about the content you'd be compressing — they still need it verbatim.
-- The command is read-only/scaffold and produced almost no tool output (`/status`, `/close`, `/loop-init`, `/loop-check`, `/loop-review`) — compressing near-empty streams wastes more tokens than it saves.
+- The command is read-only/scaffold and produced almost no tool output (`/status`, `/close`) — compressing near-empty streams wastes more tokens than it saves.
 - Inside orchestrator workflows' phase prompts — subagents carry their own context; only the orchestrator's accumulated summaries matter, and those are bounded by "Keep under N words" per prompt.
 
 ## Core Principle