pixelcrew 0.2.2 → 0.2.6

package/skill/SKILL.md

@@ -0,0 +1,185 @@
+---
+name: pixelcrew
+description: Autonomous Multi-Agent Engineering Swarm & Retro Pixel-Art Startup Office. Orchestrates 24 specialized commands across Creative Director, UX Planner, Design System Architect, Frontend Engineer, Backend Engineer, Performance SRE, Security Sentinel, and QA Automation personas.
+version: 0.2.5
+author: Arnel (@hiroqt)
+---
+
+# 🏢 PixelCrew — Autonomous Multi-Agent Engineering Swarm
+
+> **Floor 42, Pixel Corps HQ**: Transform any codebase into an observable, choreographed engineering workspace with anti-AI design synthesis, mathematical fluid typography, and automated E2E testing.
+
+---
+
+## ⚡ Floor 42 Swarm Command Suite
+
+All commands can be invoked via `/pixelcrew <command>`, direct slash commands (e.g. `/<command>`), or the CLI (`npx pixelcrew <command>`):
+
+### 1. 🚀 Floor 42 Creation & Architecture
+- **`/assemble [prompt]`** *(aliases: `/craft`, `/sprint`)*: Full shape-then-build multi-agent sprint pipeline from brief to production code.
+- **`/blueprint [prompt]`** *(aliases: `/shape`, `/spec`)*: Plans UX section topologies, wireframes, and compiles dynamic DAG task graphs *before* writing code.
+- **`/boss-fight <issue>`** *(aliases: `/fix`, `/debug`)*: Targeted swarm bug blitz to isolate, repair, and verify breaking issues.
+- **`/manifest [--dry-run]`** *(aliases: `/document`, `/doc`)*: Reverse-engineers active project code into comprehensive `DESIGN.md` and `PRODUCT.md` architectural specifications.
+- **`/retrofit [--dry-run]`** *(aliases: `/extract`, `/tokens`)*: Extracts reusable UI primitives, Tailwind tokens, and CSS variables into the centralized design system.
+- **`/init [--dry-run]`**: One-time setup: scans codebase architecture, configures `.pixel-crew/`, and writes `PRODUCT.md` & `DESIGN.md`.
+
+### 2. 🎨 Pixel Aesthetic & Anti-AI Direction
+- **`/render`** *(aliases: `/critique`, `/review-ui`)*: 6-dimension Anti-AI design & UX review (Originality, Hierarchy, Typography, Layout, Brand, Slop Penalty $\ge 8.5/10$).
+- **`/8bit`** *(aliases: `/delight`, `/retro`, `/joy`)*: Adds retro arcade delight: procedural 8-bit Web Audio chimes, CRT phosphor scanlines, and tactile feedback.
+- **`/overdrive`** *(aliases: `/fx`, `/extreme`)*: Injects high-end technical effects: WebGL/Canvas shaders, interactive terminal console, reactive backgrounds.
+- **`/chromatic [palette]`** *(aliases: `/colorize`, `/palette`)*: Injects curated HSL color tokens, dark mode elevation surfaces, and atmospheric accent tiers.
+- **`/typeset [preset]`** *(aliases: `/typography`, `/fonts`)*: Fixes font pairings, applies mathematical fluid `clamp()` type scales, and establishes expressive typography.
+- **`/bento [section]`** *(aliases: `/layout`, `/grid`)*: Reorganizes sections into asymmetric Bento grids, dynamic viewport flow, and zero horizontal overflow.
+- **`/de-slop [section]`** *(aliases: `/clarify`, `/clean-copy`)*: Strips AI cliché copywriting (*"Elevate your workflow", "Seamlessly innovate"*) with grounded technical value propositions.
+- **`/bolder` / `/quieter`**: Amplifies visual energy with editorial contrast or restores clean minimalist balance.
+
+### 3. 🛡️ Production Hardening & SRE
+- **`/sentinel`** *(aliases: `/harden`, `/secure`)*: Security & resilience pass: OWASP checks, SQL injection prevention, RFC 7807 error envelopes, and rate limiting.
+- **`/audit`** *(aliases: `/sre-audit`)*: Runs technical quality checks: a11y WCAG AA/AAA, Core Web Vitals (LCP < 0.6s), and Playwright E2E journeys.
+- **`/warp`** *(aliases: `/optimize`, `/perf`)*: Full-stack performance tuning: streaming SSR, bundle minification, and AST prompt caching (~72% token savings).
+- **`/polish`** *(aliases: `/ship-ready`)*: Final shipping readiness pass: design system token alignment, type checks, and aesthetic cleanup.
+- **`/calibrate [viewport]`** *(aliases: `/adapt`, `/responsive`)*: Optimizes responsive layouts from 360px mobile to 4K ultra-wide with fluid viewports.
+- **`/onboard`** *(aliases: `/first-run`)*: Implements first-run onboarding flows, empty state illustrations, and user activation pathways.
+
+### 4. 🏢 Floor 42 Operations
+- **`/recap [count]`** *(aliases: `/summary`, `/changelog`, `/whatdone`)*: Generates a token-optimized recap of recent git changes, commits, diff stats, and categorized file operations.
+- **`/office`** *(aliases: `/live`, `/dashboard`)*: Launches Floor 42 live startup office dashboard (`http://localhost:4747`) and real-time site preview iframe.
+- **`/roster [spawn|list]`** *(aliases: `/crew`, `/agents`)*: Inspects active agent roster, workstations, and sprite telemetry.
+- **`/status`** *(aliases: `/progress`, `/info`)*: Shows orchestration sprint progress, active tasks, and swarm state.
+- **`/sync [--dry-run]`**: Synchronizes modular skills across all detected IDEs (`.claude`, `.cursor`, `.agents`, `.kiro`, etc.).
+- **`/doctor`**: Diagnoses local environment, LLM keys, and available coding agent runtimes.
+
+---
+
+## 👥 Floor 42 Personas & Squad Roles
+
+PixelCrew delegates tasks across 8 specialized agent personas:
+
+1. **Lead Orchestrator (`orchestrator`)**: DAG task decomposition, context extraction, and subagent synthesis.
+2. **Creative Director (`creativeDirector`)**: Aesthetic strategy, brand soul, and strict anti-AI constraints.
+3. **UX Planner (`uxPlanner`)**: Asymmetric section layouts, user flow, and interaction specs.
+4. **Design System Architect (`designSystem`)**: HSL tokens, mathematical `clamp()` typography, and surface tiers.
+5. **Frontend Engineer (`frontend`)**: Next.js 14/15 App Router, React 19, TypeScript, and Tailwind CSS.
+6. **Backend & Database Engineer (`backend`, `database`)**: Type-safe route handlers, RFC 7807 envelopes, Prisma/Postgres schemas.
+7. **Performance & Security SRE (`performance`, `security`)**: Core Web Vitals, CSP headers, OWASP audit, and token pruning.
+8. **QA Automation Engineer (`qa`)**: Playwright E2E user journeys, visual regression, and audit reports.
+
+---
+
+## 🛡️ The Impeccable 64-Pattern Anti-AI Slop Enforcement Matrix
+
+Whenever you generate ANY interface, portfolio, dashboard, or landing page (regardless of whether the user prompt is brief or complex), you MUST strictly avoid these 64 banned patterns and apply human-crafted craftsmanship:
+
+```
+🛡️ IMPECCABLE 64-PATTERN ANTI-AI CHECKLIST
+├── 1. VISUAL DETAILS (8 Rules)
+│   ├── ❌ 1. Decorative Grid-Line Background: No faint graph-paper grid lines (bg-grid) covering the page. Use solid surface tiers.
+│   ├── ❌ 2. Border Accent on Rounded Element: No thick colored border clashing with rounded corners.
+│   ├── ❌ 3. Glassmorphism Everywhere: No muddy backdrop-blur glass cards as decorative crutches.
+│   ├── ❌ 4. Side-Tab Accent Border: No thick colored stripe on one side of a card.
+│   ├── ❌ 5. Hairline Border with Wide Shadow: Never pair 1px border with wide diffuse shadow.
+│   ├── ❌ 6. Repeating-Gradient Stripes: No diagonal gradient stripes for surface decoration.
+│   ├── ❌ 7. Extreme Border-Radius (>24px): Small cards top out at 8–14px; reserve full-pill for buttons only.
+│   └── ❌ 8. Amateurish Hand-Drawn SVG: No hand-coded clip-art scene doodles or cartoon mascots.
+│
+├── 2. TYPOGRAPHY (11 Rules)
+│   ├── ❌ 9. Kicker / Eyebrow Label Above Headings: No tracked uppercase pill/label (✨ INTRODUCING) above headlines.
+│   ├── ❌ 10. Undersized Functional Text (<11px): Keep all functional text, labels, and table cells >= 12px.
+│   ├── ❌ 11. Flat Type Hierarchy (< 1.25x Ratio): Use dramatic modular scale (>= 1.33x or 1.414x) with clamp().
+│   ├── ❌ 12. Icon Tile Stacked Above Heading: No small rounded-square icon floating centered above every feature card.
+│   ├── ❌ 13. Italic Serif Startup Reflex: Don't default to oversized italic serif as an automatic landing page reflex.
+│   ├── ❌ 14. Hero Eyebrow Pill Chip: No floating pill badges (• Location: Cavite, Open to Engagements) in hero.
+│   ├── ❌ 15. Oversized 15-Word Headline: Tighten headlines to punchy 2–6 word value propositions.
+│   ├── ❌ 16. Crushed Letter-Spacing: Never use destructive tracking-tighter that character-collides.
+│   ├── ❌ 17. Overused Font Monoculture: Do not default to un-styled Inter for everything. Pair a distinctive display face with a readable body face.
+│   ├── ❌ 18. Single Font for Everything: Pair display headings with a monospace face for specs and code.
+│   └── ❌ 19. All-Caps Body Text: Never set running body sentences in uppercase.
+│
+├── 3. COLOR & CONTRAST (7 Rules)
+│   ├── ❌ 20. Radial-Gradient Background Halo: No fuzzy purple/cyan gradient blobs floating in hero center.
+│   ├── ❌ 21. Decorative Radial Spotlight Glow: Light compositions with physical surface tiers, not decorative hazes.
+│   ├── ❌ 22. AI Color Palette (Purple & Cyan-on-Black): Reject generic #10B981 / #00F0FF neon glow on flat black.
+│   ├── ❌ 23. Dark Mode with Colored Box-Shadows: Use subtle 1px borders and natural ambient lighting.
+│   ├── ❌ 24. Gradient Text on Headings/Metrics: Use solid high-contrast text (#FFFFFF, #0F172A).
+│   ├── ❌ 25. Gray Text on Colored Background: Never wash out light gray text over saturated containers.
+│   └── ❌ 26. Cream / Beige Reflex: Choose intentional, domain-grounded palettes, not safe cream defaults.
+│
+├── 4. LAYOUT & SPACE (12 Rules)
+│   ├── ❌ 27. Hero Metric Layout (4-Box Stat Strip): Never place 4 identical metric boxes (486h | 4+ | 3+ | 8+) across hero.
+│   ├── ❌ 28. Identical Card Grids: Never repeat identical tall cards across sections. Use Asymmetric Bento flow.
+│   ├── ❌ 29. Monotonous Spacing: Use tight groupings for related items (gap-2) and generous section padding (py-24).
+│   ├── ❌ 30. Nested Cards (Cardocalypse): Never put cards inside cards with identical borders and shadows.
+│   ├── ❌ 31. Tiny Numbered Section Labels: Let natural typography hierarchy sequence the page.
+│   ├── ❌ 32. Hashtag Pill Clouds: Never dump clouds of tags (#React #Nextjs). Group into architectural layers.
+│   ├── ❌ 33. Line Length Too Long (>80ch): Constrain running text containers with max-w-[65ch].
+│   ├── ❌ 34. Content Overflowing Container: Always wrap in responsive containers with px-6 mx-auto.
+│   ├── ❌ 35. Positioned Child Clipped by Overflow: Never cut off tooltips and dropdowns with overflow-hidden.
+│   ├── ❌ 36. Cards Flush Against Scroller Edge: Ensure consistent horizontal scroll padding and insets.
+│   ├── ❌ 37. Text Occluded by Overlapping Elements: Keep opaque layers decoupled from readable copy.
+│   └── ❌ 38. Modal Abuse: Complex multi-column workflows deserve dedicated pages or split-views, not cramped modals.
+│
+├── 5. MOTION (6 Rules)
+│   ├── ❌ 39. Decorative Pulsing Status Dot: Never animate pulsing dots on static, non-updating data.
+│   ├── ❌ 40. Decorative Blinking Caret in Hero: Fake typing carets in static copy are banned.
+│   ├── ❌ 41. Auto-Scrolling Infinite Marquee: Let people read at their own pace with clean static grids.
+│   ├── ❌ 42. Bounce / Elastic Easing: Use smooth, high-performance deceleration curves (ease-out).
+│   ├── ❌ 43. Layout Property Animation (width/height): Animate strictly transform and opacity to prevent layout jank.
+│   └── ❌ 44. Image Hover Scale-Up Reflex: Imagery should sit still; use purposeful subtle border brightness transitions.
+│
+├── 6. COPYWRITING (5 Rules)
+│   ├── ❌ 45. Marketing Buzzwords: Banned: streamline, empower, supercharge, world-class, enterprise-grade.
+│   ├── ❌ 46. Em-Dash Overuse (—): No more than 1 em-dash per section. Use periods, colons, or clean specs.
+│   ├── ❌ 47. Aphoristic Cadence: Banned: "Not a feature. A platform." / "Not just fast. Instant."
+│   ├── ❌ 48. Theater Framing Copy: Banned: Dismissing workflows as "growth theater".
+│   └── ❌ 49. Same Text Repeated Inside One Card: Say it once, say it well.
+│
+├── 7. IMAGERY & ASSETS (2 Rules)
+│   ├── ❌ 50. Shape-Assembled SVG Illustrations: No abstract floating geometric shapes pretending to be product art.
+│   └── ❌ 51. Broken / Missing Image Tags: Never ship img tags with empty or placeholder src.
+│
+└── 8. GENERAL QUALITY & ACCESSIBILITY (10 Rules)
+    ├── ❌ 52. Uncaught Script Errors: Zero null reference runtime errors.
+    ├── ❌ 53. Content Invisible at Rest: Never leave sections stuck at opacity: 0 due to failed scroll listeners.
+    ├── ❌ 54. Cramped Padding: Keep at least 12–16px padding inside containers.
+    ├── ❌ 55. Body Text Touching Viewport Edge: Ensure mobile container gutters (px-4 to px-6).
+    ├── ❌ 56. Justified Text on Screens: Use text-align: left to prevent whitespace rivers.
+    ├── ❌ 57. Low Contrast Text (<4.5:1): Verify WCAG AA compliance across all surfaces.
+    ├── ❌ 58. Skipped Heading Levels: Never jump from h1 directly to h3.
+    ├── ❌ 59. Tight Line Height (<1.3x): Use 1.5–1.7 leading on multi-line body text.
+    ├── ❌ 60. Tiny Body Text (<12px): Use 14–16px for body content.
+    ├── ❌ 61. Wide Tracking on Body (>0.05em): Reserve wide tracking strictly for short uppercase labels.
+    ├── ❌ 62. Missing :focus-visible Outline: Ensure full keyboard navigation compliance.
+    ├── ❌ 63. Non-Semantic Interactive Elements: Use real <button> and <a> tags, never un-focusable <div>.
+    └── ❌ 64. Layout Shifts on Load (CLS > 0.05): Set explicit dimensions or aspect ratios on media.
+```
+
+---
+
+## 🏛️ Concrete Human-Grade Component Blueprints (DO THIS, NOT THAT)
+
+### 1. HERO SECTION:
+- ❌ **NEVER GENERATE**: Faint gridlines background + fake macOS `🔴 🟡 🟢` terminal window + 4-box stat row + floating pill chips (`• Location: Cavite`).
+- ✅ **ALWAYS GENERATE**: Solid structured surface tier (`#090A0D`), massive typographic masthead (`clamp(2.5rem, 6vw, 5.5rem)`), concrete value proposition, and clean inline text links (`Flagship Deployments ↓`, `Email Directly →`).
+
+### 2. FLAGSHIP PROJECTS:
+- ❌ **NEVER GENERATE**: 2 identical tall cards side-by-side with 3 green checkmark bullets (`✓`) and pill tag rows.
+- ✅ **ALWAYS GENERATE**: Asymmetric narrative case study (8-column deep dive + 4-column live architecture specs) with real problems, technical decisions, and benchmark latency numbers.
+
+### 3. CAREER & EXPERIENCE:
+- ❌ **NEVER GENERATE**: Cloned cards with `Internship` pill badges and nested `INTERNSHIP DOSSIER` boxes with gold ribbons.
+- ✅ **ALWAYS GENERATE**: Clean editorial timeline table or ledger aligned to a typographic grid with dates, role, company, and engineering impact.
+
+### 4. TECHNICAL CAPABILITIES:
+- ❌ **NEVER GENERATE**: 4 identical cards with fake progress bars and `Expert`/`Advanced` pill badges, or a cloud of `#React #Nextjs` pills.
+- ✅ **ALWAYS GENERATE**: Structured domain architecture matrix grouped into functional layers (*01. GenAI & LPU Triage / 02. Full-Stack Systems / 03. Cloud & Security*).
+
+---
+
+## 🕹️ Live Floor 42 Dashboard Telemetry
+
+Whenever you execute ANY `/pixelcrew` command in chat (e.g. `/assemble`, `/blueprint`, `/render`, `/bolder`, `/quieter`, `/8bit`, `/warp`, `/sentinel`, `/audit`, `/polish`):
+1. **Emit Telemetry Events**:
+   - Write directly to `.pixel-crew/events.jsonl` or run:
+     `npx pixelcrew emit --agent <role> --type <type> --message "<action description>"`
+2. **Real-Time Live Mirroring**:
+   - The Floor 42 visual dashboard at `http://localhost:4747` automatically mirrors every tool execution, file edit, and reasoning step to the `#AI-SIDECHAT` feed and animates the corresponding squad workstation sprite.

package/skill/references/anti-ai-rubric.md

@@ -0,0 +1,30 @@
+# PixelCrew — 6-Dimension Anti-AI Rubric
+
+Used by the **Anti-AI Visual Critic** during `/pixelcrew critique` and `/pixelcrew craft` to grade human-level aesthetic quality (Minimum passing score: $\ge 8.5/10.0$).
+
+---
+
+### Rubric Dimensions:
+
+1. **Originality & Soul (Weight: 20%)**:
+   - Absence of generic AI template markers (purple gradient mesh blobs, fake sparkle icons).
+   - Authentic, bespoke visual archetype tailored to the domain.
+
+2. **Typographic Hierarchy (Weight: 20%)**:
+   - Fluid mathematical `clamp()` scales from mobile to desktop.
+   - Distinct display serif/mono and geometric sans pairing with intentional weight contrast.
+
+3. **Layout Dynamics & Asymmetry (Weight: 20%)**:
+   - Asymmetric Bento grids and dynamic section rhythm.
+   - Rejection of monotonous repeating 3-card rows and nested cards-in-cards.
+
+4. **Brand Consistency & Palette (Weight: 15%)**:
+   - Harmonious HSL color tokens with structured surface elevation tiers.
+   - Intentional dark mode with subtle border glows and high contrast text.
+
+5. **Grounded Copywriting (Weight: 15%)**:
+   - Zero cliché marketing fluff (*"Supercharge your workflow", "Unlock AI power"*).
+   - Concrete technical specifications, real architecture terms, and verifiable numbers.
+
+6. **Technical Ergonomics & A11y (Weight: 10%)**:
+   - WCAG 2.1 AA/AAA contrast compliance, keyboard focus states, zero horizontal overflow.

package/skill/references/anti-ai-slop-encyclopedia.md

@@ -0,0 +1,181 @@
+# 🛡️ The Complete Anti-AI Slop Web Design Catalog (2026 Reference Guide)
+
+> **Sources & Frameworks**: Reviewed with research from *925Studios* (*"AI Slop Web Design: Complete Guide to Spotting and Fixing Generic Websites 2026"*), *Second Talent* (2026 Code & Security Flaw Benchmark), *Neil Patel* (Human Content Performance Index), and the *Impeccable 64-Pattern Anti-AI Slop Detector*.
+
+---
+
+## 🏛️ 1. The Core Philosophy: Defeating "Distributional Convergence"
+
+### What is AI Slop in Web Design?
+AI Slop in web design describes websites built with AI tools where no human designer or engineer overrode the statistical defaults. LLMs and automated site generators produce output by predicting the most statistically probable next token based on training data.
+
+This creates **"distributional convergence"**—AI naturally gravitates toward the mathematical average of the internet:
+- The default **Inter** font
+- Safe **purple-to-blue / cyan-on-dark** gradients
+- Oversized hero sections with vague headlines (*"Build the future of work"*)
+- Monotonous **16px rounded-corner identical card grids**
+- **4-box metric strips** and **hashtag pill clouds**
+
+### The Business Impact of AI Slop:
+- **38% of visitors bounce** immediately from generic, uninspired websites (Figma, 2026).
+- **Human-written content outperforms AI copy 94.12% of the time** in engagement, time-on-page, and conversion (Neil Patel, 2025).
+- **40% to 62% of AI-generated codebases contain structural, security, or maintainability flaws** (Second Talent, 2026).
+- **AI Search Engines** (Google AI Overviews, Perplexity) actively penalize and ignore generic boilerplate.
+
+---
+
+## 📋 2. The 64 Banned AI Slop Patterns Catalog (Grouped by Category)
+
+### A. Visual Details (8 Banned Patterns)
+1. **Decorative Grid-Line Background**: Faint graph-paper grid lines covering an entire page without a canvas, map, or measurement task.
+   - *Fix*: Use crisp, deliberate surface tokens or clean solid fields.
+2. **Border Accent on Rounded Element**: Thick colored border clashing with rounded corners (e.g. 3px solid border on `rounded-2xl`).
+   - *Fix*: Remove the thick border or use a sharp/subtle 1px border with matching corner radius.
+3. **Side-Tab Accent Border**: Thick colored vertical stripe on one side of a card (e.g. `border-l-4 border-cyan-500`). The single most recognizable tell of AI-generated UI.
+   - *Fix*: Use subtle accent text, badges, or clean typography hierarchy instead of side-stripes.
+4. **Hairline Border with Wide Diffuse Shadow**: A 1px translucent border paired with `shadow-2xl` / `shadow-[0_0_30px_...]`.
+   - *Fix*: Commit to one: either a crisp defined edge OR a natural elevation shadow—never both at once.
+5. **Repeating-Gradient Stripes**: Diagonal repeating gradient stripes used as surface decoration.
+   - *Fix*: Reach for authentic textures, code blocks, or clean solid surfaces.
+6. **Glassmorphism Everywhere**: Overused `backdrop-blur-md`, semi-transparent glass cards, and glowing borders as gratuitous decoration rather than functional layering.
+   - *Fix*: Reserve `backdrop-filter: blur()` strictly for sticky headers and modal overlays. Use opaque layered surface tiers.
+7. **Extreme Border-Radius on Small Cards (>24px)**: Rounding small cards and inputs into puffy soft blobs.
+   - *Fix*: Cards top out at 8px–14px radius; reserve pill-radius (`9999px`) strictly for tags and buttons.
+8. **Amateurish Hand-Drawn SVG Mascots**: Hand-coded crude SVG scenes or mascot doodles that read as amateur clip-art.
+   - *Fix*: Use real product screenshots, technical system diagrams, or clean typography.
+
+---
+
+### B. Typography (11 Banned Patterns)
+9. **Kicker / Eyebrow Label Above Headings**: Tracked uppercase pill/label (`✨ THE FUTURE OF XYZ ✨` or `FEATURES`) borrowing unearned editorial authority.
+   - *Fix*: Work key words directly into the headline or eliminate the eyebrow entirely.
+10. **Undersized Functional Text (<11px)**: Micro-copy below 11px that is unreadable on mobile/high-DPI screens.
+    - *Fix*: Keep all functional text, labels, and table cells at $\ge 12\text{px}$ (ideally 13–14px).
+11. **Flat Type Hierarchy (< 1.25x Ratio)**: Headings, subheadings, and body copy all set at nearly the same size.
+    - *Fix*: Use a dramatic modular scale ($\ge 1.33\text{x}$ or $1.414\text{x}$) with CSS `clamp()`.
+12. **Icon Tile Stacked Above Heading**: A small rounded-square icon tile floating centered above every feature heading.
+    - *Fix*: Place icons inline, side-by-side with heading, or let typography lead without icon crutches.
+13. **Italic Serif Hero Headline Reflex**: An oversized italic serif headline used as an automatic startup landing page reflex.
+    - *Fix*: Choose deliberate type pairings that match the domain (e.g. *Space Grotesk* for technical systems, *Plus Jakarta Sans* for modern SaaS).
+14. **Full-Sentence Oversized Hero Headline**: A 15-word full sentence set at 72px dominating the viewport and pushing all content below the fold.
+    - *Fix*: Tighten headlines to punchy 2–6 word value propositions; set long explanations in readable body text (`18–20px`).
+15. **Crushed Letter-Spacing (`tracking-tighter` on everything)**: Letter-spacing pulled destructively tight causing characters to collide.
+    - *Fix*: Tighten display headings optically (`-0.02em` to `-0.03em`), never destructively.
+16. **The Inter Default / Overused Fonts**: Using default `Inter` for headings, body, buttons, and labels with zero typographic personality.
+    - *Fix*: Pair a distinctive display font (*Instrument Serif*, *Syne*, *Space Grotesk*, *Bricolage Grotesque*, *Geist*, *Outfit*) with a high-legibility body font.
+17. **Single Font Family Everywhere**: Zero contrast between editorial display and technical metadata.
+    - *Fix*: Pair display headings with a monospace face (*JetBrains Mono*, *Fira Code*) for specs, metrics, and code.
+18. **All-Caps Body Text**: Long running sentences set in uppercase.
+    - *Fix*: Reserve uppercase strictly for short 1–2 word category badges and metadata labels.
+19. **Tight Leading (<1.3x) & Wide Body Tracking (>0.05em)**: Multi-line body text crammed together vertically or spaced unnaturally horizontally.
+    - *Fix*: Set body text line-height to `1.5–1.7` and tracking to `normal` / `0`.
+
+---
+
+### C. Color & Contrast (7 Banned Patterns)
+20. **Radial-Gradient Background Halo / Spotlight**: Saturated purple/cyan fuzzy radial gradient blobs floating in the center of the hero.
+    - *Fix*: Surface depth through structured dark/light elevation tiers (`#090A0D` $\to$ `#111318` $\to$ `#181B22`).
+21. **AI Palette Monoculture (Purple/Indigo & Cyan-on-Black)**: Defaulting to generic neon cyan `#00f0ff` or purple `#6366f1` glow.
+    - *Fix*: Choose curated, brand-specific palettes (e.g. *Architectural Obsidian & Amber*, *Swiss High-Contrast Monochrome & Signal Cobalt*, *Warm Terracotta & Slate*).
+22. **Dark Mode with Colored Box-Shadow Glows**: `box-shadow: 0 0 25px rgba(0, 240, 255, 0.4)` on inputs and cards.
+    - *Fix*: Subtle, crisp 1px borders and natural multi-layered ambient light physics.
+23. **Gradient Text on Headings and Metrics**: `bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent` destroying legibility.
+    - *Fix*: Use high-contrast solid text colors (`#FFFFFF`, `#0F172A`).
+24. **Gray Text on Colored Background**: Light gray `#94a3b8` text washed out over saturated cards.
+    - *Fix*: Use high-contrast white or deep dark shades matching the background luminance.
+25. **Safe Cream / Beige Reflex**: Reaching for warm off-white cream as an unearned "tasteful" AI reflex.
+    - *Fix*: Choose intentional, domain-grounded backgrounds with clear contrast tokens.
+26. **Low Contrast Text Failing WCAG AA**: Text contrast falling below 4.5:1 for body and 3:1 for large text.
+    - *Fix*: Test all color pairs against WCAG 2.1 AA / AAA standards.
+
+---
+
+### D. Layout & Space (12 Banned Patterns)
+27. **Monotonous 4-Column Stat Box Rows**: `486+ Hours | 4+ Platforms | 3+ Credentials | 100% Ownership`.
+    - *Fix*: Embed metrics inline within case studies, timeline milestones, or asymmetric telemetry rails.
+28. **Hashtag & Pill Badge Spam**: Row of 8 `#React #Nextjs #Tailwind #Groq` badges.
+    - *Fix*: Group capabilities into structured architectural layers (*01. GenAI / 02. Full-Stack / 03. Cloud*).
+29. **Card-in-a-Card Syndrome (Cardocalypse)**: Triple-nested cards with identical dark backgrounds and borders.
+    - *Fix*: Use whitespace grouping, 1px divider lines, or tabular layouts.
+30. **Predictable Split Hero**: Headline on left, dark box on right, 4 stat cards on bottom.
+    - *Fix*: Asymmetric Bento Grid (`8-column` case study + `4-column` live telemetry) or full-width editorial hero.
+31. **Identical Card Grids Repeated Endlessly**: Every section is just another grid of 3 identical rounded cards.
+    - *Fix*: Vary section topology (Hero $\to$ Bento Grid $\to$ Live Terminal $\to$ Data Table $\to$ Editorial Narrative).
+32. **Monotonous Spacing Everywhere**: Using `gap-4` or `p-6` on every element with zero rhythmic variation.
+    - *Fix*: Tight groupings for related items (`gap-2`), generous separations between major sections (`py-24` to `py-32`).
+33. **Tiny Numbered Section Labels (`01 Discover`, `02 Design`)**: Numbers added decoratively without structural purpose.
+    - *Fix*: Let natural typographic hierarchy and section rhythm guide the user.
+34. **Line Length > 80ch**: Running body text spanning full-width across wide monitors.
+    - *Fix*: Constrain text containers with `max-w-[65ch]` or `max-w-prose`.
+35. **Horizontal Content Overflow**: Text or cards spilling past viewport edges and forcing horizontal scrollbars.
+    - *Fix*: Wrap in responsive containers with `w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`.
+36. **Clipped Dropdowns & Tooltips**: Absolute elements cut off by `overflow-hidden` containers.
+    - *Fix*: Ensure positioning context and z-index layers are properly decoupled.
+37. **Cards Flush Against Scroller Edges**: Missing matching horizontal inset on scroll containers.
+    - *Fix*: Apply consistent scroll padding and gutter insets.
+38. **Modal Abuse**: Cramming 3-column complex workflows into cramped floating modals.
+    - *Fix*: Give complex workflows dedicated pages, split-views, or slide-over sheets.
+
+---
+
+### E. Motion & Interactions (6 Banned Patterns)
+39. **Decorative Pulsing Status Dot**: A green/cyan pulsing dot next to static, non-updating data.
+    - *Fix*: Animate pulsing indicators ONLY when real-time WebSocket/SSE data is actively changing.
+40. **Decorative Blinking Terminal Caret on Non-Editable Text**: Fake typing carets in static hero copy.
+    - *Fix*: Reserve carets for real interactive CLI inputs or live terminal playgrounds.
+41. **Auto-Scrolling Infinite Marquee**: Continuously scrolling logos or text that prevent users from reading.
+    - *Fix*: Clean static logo grid or interactive drag-to-scroll carousel.
+42. **Bounce / Elastic Easing on UI Dialogs**: Modals that spring in with tacky overshoot physics.
+    - *Fix*: Smooth, high-performance deceleration curves (`cubic-bezier(0.16, 1, 0.3, 1)` / `ease-out`).
+43. **Layout Property Animation (`width`, `height`, `margin`)**: Animating geometry causing layout thrashing and dropped frames.
+    - *Fix*: Animate strictly GPU-composited properties (`transform`, `opacity`) or `grid-template-rows`.
+44. **Image Scale-Up / Rotate on Hover Reflex**: Gratuitous zoom on hover without purpose.
+    - *Fix*: Subtle border brightness shifts, clean link reveals, or magnetic button physics.
+
+---
+
+### F. Copywriting & Voice (5 Banned Patterns)
+45. **Generic Marketing Buzzwords**: *Streamline, empower, supercharge, world-class, enterprise-grade, elevate, next-generation, seamlessly*.
+    - *Fix*: Use concrete nouns and active verbs describing what the system literally does (*"Sub-second triage for 480+ clinical beds"*).
+46. **Em-Dash Overuse (`—`)**: Sprinkling 3+ em-dashes across a single paragraph (a dead-giveaway of LLM cadence).
+    - *Fix*: Use crisp commas, periods, colons, or clean bulleted specs.
+47. **Aphoristic Cadence**: *"Not a tool. A revolution."* / *"Not just fast. Instant."*
+    - *Fix*: State the technical capabilities directly without manufactured contrast formulas.
+48. **Vague Aspirational Headlines**: *"Build the future of work"*, *"Your all-in-one platform"*.
+    - *Fix*: State the exact product category (*"Plan and build software"*, *"Financial infrastructure for the internet"*).
+49. **Growth "Theater" Framing**: Dismissing competitors or existing workflows as "theater".
+    - *Fix*: Describe your concrete performance advantages and architectural benchmarks.
+
+---
+
+### G. Imagery & Assets (2 Banned Patterns)
+50. **Generic SVG Shape-Assembled Illustrations**: Abstract floating geometric shapes pretending to be product art.
+    - *Fix*: Real interactive component previews, real system architecture diagrams, or real photography.
+51. **Broken or Placeholder Image Tags (`src=""`, `src="placeholder.png"`)**: Shipping unverified image boxes.
+    - *Fix*: Verified assets, generated SVG architecture diagrams, or clean typography-led designs.
+
+---
+
+### H. General Engineering Quality (13 Banned Patterns)
+52. **Uncaught Script Errors on Page Load**: Unhandled null reference breaking page hydration.
+53. **Content Invisible at Rest**: Elements stuck at `opacity: 0` because a scroll reveal trigger failed to fire.
+54. **Cramped Padding**: Buttons with 2px vertical padding or cramped text touching container borders.
+55. **Body Text Touching Viewport Edges**: Missing container gutters on mobile.
+56. **Justified Text on Web Screens**: Uneven rivers of whitespace created by justified web text without hyphenation.
+57. **Skipped Heading Levels**: Jumping from `<h1>` directly to `<h3>` or `<h4>` breaking screen readers.
+58. **Tight Line Height on Multi-Line Headers**: Display titles colliding with their own descenders.
+59. **Low Accessibility Contrast on Focus Rings**: Focus outlines invisible against dark backgrounds.
+60. **Missing `:focus-visible` Keyboard Affordance**: Interactive controls unreachable via Tab key navigation.
+61. **Non-Semantic `<div onClick>` Buttons**: Interactive buttons built with un-focusable `<div>` tags lacking ARIA roles.
+62. **Layout Shifts During Asset Loading (CLS > 0.05)**: Missing explicit `width`/`height` or aspect-ratio on imagery.
+63. **Un-optimized Blocking Web Fonts**: Long FOIT (Flash of Invisible Text) delaying First Contentful Paint.
+64. **Missing Reduced-Motion Support**: Ignoring `@media (prefers-reduced-motion: reduce)`.
+
+---
+
+## 🎯 3. The 4 Golden Rules of Authentic Human Web Design
+
+1. **Distinctive Typography as Brand Signal**: Replace default Inter with a pairing of a distinctive display face + clean monospace/sans.
+2. **Semantic Color Systems Over Decorative Gradients**: Build with CSS custom properties (`--surface-base`, `--surface-raised`, `--border-subtle`, `--accent-primary`) that serve functional purposes.
+3. **Real Architecture & Interactive Visuals**: Show real product data, live terminal shells, or interactive diagrams rather than fake pastel screenshots.
+4. **Content in a Specific Human Voice**: Write with opinionated, concrete technical specifics (*"Would our founder actually say this?"*).

package/skill/references/commands-reference.md

@@ -0,0 +1,135 @@
+# PixelCrew — Floor 42 Swarm Commands Reference
+
+Complete reference for all subcommands available under `/pixelcrew <command>` or direct `/<command>`.
+
+---
+
+## 1. `/assemble <prompt>` (Aliases: `/craft`, `/sprint`, `/ship`)
+**Assigned Agent**: All Personas (Full Swarm)  
+**Description**: Runs the complete multi-agent sprint pipeline from brief to verified code synthesis, visual review, and Playwright E2E tests.
+
+---
+
+## 2. `/blueprint <prompt>` (Aliases: `/shape`, `/spec`, `/plan`)
+**Assigned Agent**: UX Planner & Lead Architect  
+**Description**: Formulates UX section topologies, user journeys, schema contracts, and compiles a dynamic DAG task graph *before* writing code.
+
+---
+
+## 3. `/boss-fight <issue>` (Aliases: `/fix`, `/debug`, `/repair`)
+**Assigned Agent**: Security Sentinel, QA & Frontend  
+**Description**: Targeted swarm bug blitz to isolate root causes, synthesize atomic repair tasks, and verify with Playwright E2E checks.
+
+---
+
+## 4. `/manifest [--dry-run]` (Aliases: `/document`, `/doc`)
+**Assigned Agent**: Lead Orchestrator & Creative Director  
+**Description**: Reverse-engineers active repository components, styles, and routes into full `DESIGN.md` design system documentation and `PRODUCT.md` specifications.
+
+---
+
+## 5. `/retrofit [--dry-run]` (Aliases: `/extract`, `/tokens`)
+**Assigned Agent**: Design System Architect  
+**Description**: Scans project files and extracts recurring UI elements, color literals, and typography rules into centralized Tailwind tokens and CSS variables.
+
+---
+
+## 6. `/render` (Aliases: `/critique`, `/review-ui`)
+**Assigned Agent**: Anti-AI Visual Critic  
+**Description**: Executes a 6-dimension visual rubric review scoring Originality, Hierarchy, Typography, Layout, Brand, and AI Slop Penalty ($\ge 8.5/10.0$).
+
+---
+
+## 7. `/8bit` (Aliases: `/delight`, `/retro`, `/joy`)
+**Assigned Agent**: Creative Director & Motion Specialist  
+**Description**: Injects retro arcade Web Audio API chimes, CRT phosphor scanline toggles, and tactile micro-interactions.
+
+---
+
+## 8. `/overdrive` (Aliases: `/fx`, `/extreme`)
+**Assigned Agent**: Motion & Frontend SRE  
+**Description**: Injects GPU-accelerated WebGL/Canvas shaders, interactive terminal console, and live hardware HUD telemetry meters.
+
+---
+
+## 9. `/chromatic [palette]` (Aliases: `/colorize`, `/palette`)
+**Assigned Agent**: Design System Architect  
+**Description**: Injects curated HSL color tokens, dark mode elevation surfaces, and atmospheric accent tiers with ultra-high contrast (17.5:1).
+
+---
+
+## 10. `/typeset [preset]` (Aliases: `/typography`, `/fonts`)
+**Assigned Agent**: Design System Architect  
+**Description**: Applies mathematical fluid `clamp()` typography scales and editorial/geometric font pairings with tight optical tracking.
+
+---
+
+## 11. `/bento [section]` (Aliases: `/layout`, `/grid`)
+**Assigned Agent**: UX Planner & Frontend  
+**Description**: Reorganizes section into 12-column asymmetric Bento topologies with dynamic vertical rhythm and zero horizontal overflow.
+
+---
+
+## 12. `/de-slop [section]` (Aliases: `/clarify`, `/clean-copy`, `/copy`)
+**Assigned Agent**: Content Strategist & UX  
+**Description**: Strips generic AI marketing clichés (*"Unlock the power of next-gen AI"*) and injects grounded, technical value propositions.
+
+---
+
+## 13. `/sentinel` (Aliases: `/harden`, `/secure`, `/defense`)
+**Assigned Agent**: Security Sentinel & Backend  
+**Description**: Enforces RFC 7807 error envelopes, Zod schema validation, sliding-window rate limiting, and OWASP security headers.
+
+---
+
+## 14. `/audit` (Aliases: `/sre-audit`, `/quality`)
+**Assigned Agent**: QA Automation & Performance SRE  
+**Description**: Runs deep technical audits: WCAG 2.1 AA/AAA accessibility compliance, Core Web Vitals profiling (LCP < 0.6s), and Playwright E2E smoke tests.
+
+---
+
+## 15. `/warp` (Aliases: `/optimize`, `/perf`, `/speed`)
+**Assigned Agent**: Performance SRE & Token Engine  
+**Description**: Configures Next.js Streaming SSR, asset minification, and AST symbol graph extraction for 72% context reduction across LLMs.
+
+---
+
+## 16. `/polish` (Aliases: `/ship-ready`, `/finalize`)
+**Assigned Agent**: Frontend Engineer & QA  
+**Description**: Performs a final shipping readiness pass: token alignment, TypeScript compilation check, CSS cleanup, and visual consistency tuning.
+
+---
+
+## 17. `/calibrate [viewport]` (Aliases: `/adapt`, `/responsive`)
+**Assigned Agent**: Responsive Specialist  
+**Description**: Calibrates layout, padding, font scales, and tap targets for seamless viewing from 360px mobile up to 4K ultra-wide.
+
+---
+
+## 18. `/onboard` (Aliases: `/first-run`, `/empty-states`)
+**Assigned Agent**: UX Planner & Frontend  
+**Description**: Builds interactive zero-data empty states, progressive feature tours, and clear user activation paths.
+
+---
+
+## 19. `/office [--port 4747]` (Aliases: `/live`, `/dashboard`, `/preview`)
+**Assigned Agent**: Floor 42 Visual Office Lead  
+**Description**: Boots Floor 42 real-time startup office visual dashboard (`http://localhost:4747`), live SSE telemetry stream, and site preview iframe.
+
+---
+
+## 20. `/roster [spawn|list]` (Aliases: `/crew`, `/agents`, `/squad`)
+**Assigned Agent**: Lead Orchestrator  
+**Description**: Inspects active Floor 42 workstations, assigned tasks, sprite animations, and multi-agent health metrics.
+
+---
+
+## 21. `/doctor` (Aliases: `/diagnose`, `/health`)
+**Assigned Agent**: Lead Orchestrator  
+**Description**: Diagnoses environment health, local LLM provider availability (Claude Code, Cursor, Codex, Grok, Gemini), and API keys.
+
+---
+
+## 22. `/sync [--dry-run]` (Aliases: `/sync-providers`, `/mirror`)
+**Assigned Agent**: Capability Lead  
+**Description**: Synchronizes workspace skills across all detected IDE directories (`.claude`, `.cursor`, `.agents`, `.kiro`, `.opencode`, `.hermes`, `.pi`, etc.).

package/skill/references/testing-and-qa-strategy.md

@@ -0,0 +1,25 @@
+# Modern QA Testing Strategy & Test Maintainability Guide
+
+## 1. The Practical Testing Pyramid
+
+```
+        ▲
+       / \      E2E User Journeys (Playwright / Cypress)
+      /───\     - Critical business flows: Auth, Checkout, Billing
+     /     \    Component / Integration Tests (React Testing Library / MSW)
+    /───────\   - Form validation, state mutations, accessibility checks
+   /         \  Unit Tests (Vitest / Jest / Node.js Test Runner)
+  /───────────\ - Pure utility functions, state reducers, domain business rules
+```
+
+---
+
+## 2. Writing Resilient, Non-Flaky Tests
+
+1. **Query by Accessibility Role First**:
+   - `screen.getByRole('button', { name: /save changes/i })`
+   - Never query by brittle CSS classes (`.btn-primary-2`) or dynamic test IDs unless strictly necessary.
+2. **Mock at the Network Boundary with MSW**:
+   - Mock HTTP requests using **Mock Service Worker (MSW)** rather than mocking internal fetch libraries, ensuring network contracts are tested faithfully.
+3. **Automated Accessibility Testing with axe-core**:
+   - Run `@axe-core/playwright` on all critical pages to ensure zero WCAG AA violations.

package/skill/references/token-efficiency.md

@@ -0,0 +1,20 @@
+# PixelCrew — Cross-IDE Token Optimization Protocols
+
+Universal token conservation engine across Claude Code, Google Antigravity, Cursor, Kiro, Windsurf, and Copilot.
+
+---
+
+### Key Conservation Strategies:
+
+1. **AST Symbol Graph Extraction**:
+   - Extract function signatures, type interfaces, and route contracts instead of dumping raw 10,000-line files.
+   - Slashes context window consumption by 60%–75%.
+
+2. **Prefix Prompt Cache Anchoring**:
+   - Anchors static system prompts and skill manuals at $\ge 1024$ tokens for Anthropic Claude Code, triggering a **90% cache read discount**.
+
+3. **Multi-Turn Context Pruning**:
+   - Prunes resolved subagent traces and temporary error logs between sprint phases.
+
+4. **Line-Range Targeted Diffs**:
+   - Generates compact replacement chunks (`replace_file_content`) rather than rewriting whole files.