Pixelcrew

🏢 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 , direct slash commands (e.g. /), or the CLI (npx pixelcrew ):

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 (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 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 (= 12px. │ ├── ❌ 11. Flat Type Hierarchy (= 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 (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 and tags, never un-focusable . └── ❌ 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  --type  --message ""`
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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [hiroqt](https://github.com/hiroqt)
- **Source:** [hiroqt/PixelCrew](https://github.com/hiroqt/PixelCrew)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.