@minhduydev/mdpi 0.3.2 → 0.4.1

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).
 
@@ -24,9 +24,10 @@ When the agent edits files matching these patterns, the listed skills auto-load.
 | `.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 |
 
 ---
 
@@ -43,11 +44,19 @@ 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` |
 | context, memory, token, agent quality, degraded | `context-engineering` |
+| memory_system, memory-search, memory_search, pi-hermes, /memory-insights, save memory, remember this, past failure, previous attempt | `memory-system` |
+| compress, dcp, context prune, cleanup context, context filling up | `context-engineering`, `dcp-hygiene` |
 | brainstorm, idea, design, concept, explore, ideate, refine | `brainstorming`, `idea-refine`, `spec-driven-development` |
 | interview, grill, are we sure, what do you want | `interview-me` |
 | plan, break down, decompose, tasks, roadmap | `planning-and-task-breakdown` |
@@ -58,6 +67,7 @@ When the user's prompt contains these keywords (case-insensitive), the listed sk
 | Jira, Confluence, Atlassian, issue, ticket | `jira` |
 | browser, e2e, screenshot, playwright, chrome | `playwright`, `chrome-devtools`, `browser-testing-with-devtools` |
 | dependency, package, library, npm, PyPI, source | `opensrc` |
+| scrape, crawl, webclaw, bot protection, 403, webfetch fail, extract web content, web scraping | `webclaw` |
 | loop, unattended loop, nightly triage, loop-readiness, loop-cost, loop-check, loop-review | `loop-engineering`, `loop-audit`, `loop-cost` |
 | Swift, iOS, macOS, actor, async/await, Sendable | `swift-concurrency`, `swiftui-expert-skill`, `core-data-expert` |
 
@@ -98,6 +108,8 @@ When the user's prompt contains these keywords (case-insensitive), the listed sk
 | `deprecation-and-migration` | Deprecating APIs, migrating library versions, removing legacy code | Ship | High |
 | `writing-skills` | Creating new skills, editing existing skills, verifying skills before deployment | Build | Low |
 | `context-engineering` | Optimizing agent context setup — rules files, selective loading, confusion management | All | Low |
+| `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 |
@@ -130,17 +142,23 @@ 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 |
+| `minimalist-ui` | Clean, editorial, or minimalist aesthetics | Build | Low |
+| `mockup-to-code` | Converting UI mockups, screenshots, Figma/Sketch designs into code | Build | 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/Next.js code for performance | Build | Medium |
 | `redesign-existing-projects` | Upgrading an existing website or app's visual design | Build | High |
-| `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 |
+| `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
 
@@ -214,6 +232,8 @@ Maps user intent to skill(s). `→` = sequential pipeline (execute in order). `+
 | "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 |
+| "remember this" / "memory-search" / "past failure" / "previous attempt" / "save to memory" | `memory-system` | All | Low |
+| "compress context" / "dcp" / "context filling up" / "cleanup context" | `dcp-hygiene` | All | Low |
 | "verify this approach" / "challenge this decision" / "doubt check" | `doubt-driven-development` | Build | Medium |
 | "security audit" / "auth setup" / "vulnerability" | `security-and-hardening` | Review | High |
 | "profile" / "too slow" / "bundle size" / "lighthouse" | `performance-optimization` | Review | Medium |
@@ -221,8 +241,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 |
@@ -240,6 +267,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 (`+`)
@@ -247,7 +275,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
 ```
 
@@ -261,6 +289,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

@@ -0,0 +1,106 @@
+---
+name: dcp-hygiene
+description: "Use at command/phase closure points to compress closed exploratory work-streams via the pi-dcp `compress` tool, preserving file:line refs, root causes, decisions, and verification results in the summary. No-ops gracefully when DCP is not installed."
+---
+
+# DCP Hygiene
+
+## When to Use
+
+- A slash command's Report/Closure phase just finished writing its artifact (spec.md, plan.md, progress.md, fix.md, audit.md, research.md, etc.) — the exploratory tool output (reads, greps, bash) that produced it is now closed.
+- A long command transitions between phases and the previous phase's detailed output is captured in the next phase's input or an artifact.
+- A workflow loop iteration (e.g. quality-loop) finishes a fix cycle and is about to re-review — accumulated output can be compressed before the next round.
+
+## When NOT to Use
+
+- 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.
+- 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
+
+**Compress closed work, preserve the facts that produced it.**
+
+A compress call only pays off when (a) the tool output is genuinely closed and (b) the summary keeps every fact a later turn might need. A lossy summary that drops a file:line or a root cause is worse than no compression — it forces a re-read.
+
+## The Compress Protocol (range mode)
+
+DCP's default `compress.mode` is `"range"` — pass the FIRST and LAST tool-call IDs of the closed span.
+
+1. **Identify the closed span** — the contiguous block of tool calls from the start of the just-completed phase/section up to (but not including) the current in-flight turn.
+2. **Pick endpoints** — `startToolCallId` = first call of the span, `endToolCallId` = last call of the span. Everything between (inclusive) is summarized, except protected tools (write/edit/todo/task/skill/compress) which are appended verbatim.
+3. **Never pick endpoints inside your most recent turn or in-flight work** — DCP refuses these upfront; respect the boundary.
+4. **Write a lossless-but-terse summary** in the `summary` argument. Include:
+   - What was accomplished (one line)
+   - **Concrete facts**: file paths, line numbers, error messages, decisions made
+   - Root cause / diagnosis (for `/fix`)
+   - Verification results (for `/verify`, `/ship`)
+   - What is still open / unresolved
+5. **The replacement applies on the next LLM request** — your current turn still sees the originals, so you can read them while writing the summary.
+
+## What to Preserve (per command)
+
+| Command | Must keep in summary |
+|---------|----------------------|
+| `/fix` | root cause with file:line, fix applied, verification results |
+| `/verify` | gate results (typecheck/lint/test pass/fail), completeness score, phantom score |
+| `/ship` | tasks completed/total, commits made, verification gate results, review summary |
+| `/gc` | quality grades (before→after), issue counts by severity, PRs opened |
+| `/audit` | pattern, occurrence count, issues by severity with file:line, recommended fixes |
+| `/research` | questions, answer status + confidence, key insights, sources |
+| `/plan` | discovery level, observable truths, required artifacts, dependency waves |
+| `/init` | detected tech stack, validated commands, created files |
+
+## What NEVER to Compress
+
+- Your most recent turn (turn protection: last 3 turns are immune anyway).
+- In-flight work — anything you're still actively reading/editing.
+- Content the user just referenced in their last message.
+- Protected tools' output (write/edit/todo/task/skill/compress) — DCP appends these verbatim regardless, so don't exclude them from your span; just know they survive.
+
+## No-op Clause (portability)
+
+This skill must work whether or not DCP is installed:
+
+- If the `compress` tool is **not available** in the current tool set, **skip compression entirely**. The artifact (spec.md/plan.md/progress.md/etc.) already captures the durable facts — skipping is correct, not a failure.
+- If `compress` is available but the closed span is tiny (< ~5 tool calls, < ~2k tokens of output), the compress call costs more than it saves — skip.
+- Never error or retry on a missing `compress` tool. Treat it as an optional optimization.
+
+## Procedure
+
+### At a closure point
+
+1. Confirm the work-stream is actually closed (artifact written OR next phase already has the summary it needs).
+2. Check: is `compress` available? If no → stop here, report "DCP not installed — skipped, artifact captures facts."
+3. Check: is the span worth it? (≥ ~5 tool calls, ≥ ~2k tokens). If no → skip.
+4. Call `compress({ startToolCallId, endToolCallId, topic, summary })` with a terse, lossless summary preserving the table above.
+5. Continue to the next phase/command. The compression applies on the next request.
+
+### At a mid-command phase transition (long commands only: `/ship`, `/fix`, `quality-loop`)
+
+1. Confirm the previous phase's output is fully consumed by the next phase's input (the next prompt references `{phase_N_output}` or the artifact).
+2. Compress the previous phase's exploratory calls (reads/greps/bash), NOT the phase output summary itself if it's about to be passed forward.
+3. Proceed to the next phase.
+
+## Pitfalls
+
+- **Compressing too early** — before the artifact is written — loses the facts with nowhere captured. Always write the artifact first, then compress what produced it.
+- **Lossy summaries** — dropping file:line or "because" clauses forces expensive re-reads. Terse ≠ incomplete.
+- **Compressing the phase output you're about to pass forward** — the next phase needs it. Compress the *exploratory calls* that produced the output, not the output itself.
+- **Forcing compress when DCP is absent** — errors and wastes a turn. The no-op is the correct behavior.
+- **Compressing inside turn protection** — DCP refuses; don't try to work around it.
+- **Over-compressing short commands** — a 3-call `/status` has nothing worth compressing.
+
+## Verification
+
+Before claiming a compress was done correctly:
+
+- [ ] `compress` tool was available (else no-op was the correct outcome)
+- [ ] The compressed span was genuinely closed (artifact written or output consumed)
+- [ ] Summary preserves file:line, root cause/decisions, verification results per the table above
+- [ ] No endpoint landed inside the most recent turn or in-flight work
+- [ ] The next phase/command still has everything it needs (no forced re-reads)
+
+If `compress` was unavailable and you skipped — that's a successful no-op, not a failure. Report "DCP not installed — artifact captures facts; skipped compression."