# Pixelcrew > 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. - **Type:** Skill - **Install:** `agentstack add skill-hiroqt-pixelcrew-pixelcrew` - **Verified:** Yes β€” security-reviewed for prompt injection and unsafe behavior - **Seller:** [hiroqt](https://agentstack.voostack.com/s/hiroqt) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** Apache-2.0 - **Upstream author:** [hiroqt](https://github.com/hiroqt) - **Source:** https://github.com/hiroqt/PixelCrew/tree/main/.hermes/skills/pixelcrew ## Install ```sh agentstack add skill-hiroqt-pixelcrew-pixelcrew ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # 🏒 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. ## Pricing - **Free** β€” Free ## Security capabilities Automated source analysis of v0.1.0 β€” what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source β€” more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** β€” security scan: passed β€” Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-hiroqt-pixelcrew-pixelcrew - Seller: https://agentstack.voostack.com/s/hiroqt - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack β€” the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.