cowork-prototype-replication

What problem does it solve?

This Skill removes the guesswork of rebuilding a “state-of-the-art” Cowork prototype UI by turning the provided visual source into a pixel-faithful Inertia React implementation with correct domain vocabulary and performance-safe React patterns.

Core Features & Use Cases

• Prototype-to-UI replication workflow: follows the 7-phase runbook from prototype sync to final smoke test.
• Vertical vocabulary mapping guardrails: ensures domain terms are translated to the correct vertical (avoids critical confusions that break credibility).
• CSS-to-Tailwind visual fidelity: extracts canonical classes from the Cowork HTML visual source and maps them to Tailwind equivalents.
• Component hierarchy + React render-loop prevention: builds the intended page/column/card/sheet structure and applies memoization (useMemo/useCallback) to avoid re-render loops.
• Structural Pest coverage + interactive smoke validation: generates/uses tests for expected backend payloads and verifies interactive behavior (filters, drawers, drag-drop) that unit tests might miss.

Quick Start

Ask the AI: Replicate the Cowork prototype layout for my module screen so it matches the visual-source.html for the target page in resources/js/Pages, including correct vocabulary mapping, Tailwind styling, tests, and an interactive smoke check.