ship frontend

Frontend development often suffers from inconsistent design systems, poor accessibility, and performance regressions. This skill provides a deterministic command-line interface and structured audit system to build, transplant, and harden production-grade pages. It moves away from vague prompting by enforcing a 100-gate quality gauntlet that covers Core Web Vitals, WCAG 2.2 AA compliance, and responsive integrity.

What it does

• Deterministic building generates tokenized scaffolds from text briefs or screenshots using a design-token law.
• Automated auditing runs a 100-gate gauntlet across accessibility, SEO, performance, and responsive layout.
• Visual transplanting creates component checklists and scaffolds from uploaded design screenshots.
• Monotonic ledgering tracks quality scores over time to ensure no regressions are committed to the codebase.
• Token enforcement mandates all styling flows through CSS custom properties, blocking hardcoded hex values.

How it works

1. Initialize the environment using colosseum build to generate a tokenized scaffold based on your project brief.
2. Execute colosseum audit to receive a detailed verdict table showing which of the 100 gates passed or failed.
3. Resolve violations by running colosseum fix <gate_id> to identify the specific squad responsible for the fix.
4. Finalize with colosseum gauntlet to verify the build meets binary ship-readiness criteria across all cohorts.

Frameworks & tools

This tool works with static HTML/CSS, React, and Next.js projects. It requires Node 18+ for measurement tooling and Python 3.10+ for the core CLI execution.

Why this beats prompting it yourself

Generic prompts often ignore accessibility standards or introduce inconsistent spacing and colors. This skill uses a rigid 100-gate gauntlet and a design-token law that forces the model to follow specific, measurable engineering constraints rather than aesthetic guesses.

Use cases

• Converting a whiteboard sketch or UI screenshot into a functional, accessible React component.
• Auditing an existing landing page to ensure it meets WCAG 2.2 AA and Core Web Vitals budgets.
• Hardening a dashboard layout to ensure it scales correctly across a 320px to 1920px responsive matrix.
• Refactoring legacy CSS into a clean, tokenized system with standardized themes.

Known limitations

Requires Python 3.10+ and Node 18+ for full measurement capabilities. The gauntlet does not support dynamic backend-rendered logic beyond static or client-side React codebases.