skills.rest
wagnerra23
wagnerra23COMMUNITY
Explore all skills by this author →
GitHub

cowork-prototype-replication

Replicate Cowork prototype visuals into Inertia React pages with Tailwind styling.

Updated May 14, 2024
Search Tags:#tailwind#kanban#pest testing#ui replication#inertia react#prototype to code#usememo usecallback
One-click install
npx skills add https://github.com/wagnerra23/oimpresso.com --skill cowork-prototype-replication
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cowork-prototype-replication
Source: https://github.com/wagnerra23/oimpresso.com/tree/main/.claude/skills/cowork-prototype-replication
Command: npx skills add https://github.com/wagnerra23/oimpresso.com --skill cowork-prototype-replication

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about cowork-prototype-replication

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I replicate a prototype UI into Inertia React with pixel-faithful styling?▼

You can convert an HTML prototype to Inertia React by executing a multi-phase runbook that maps domain vocabulary, extracts CSS to Tailwind, builds component hierarchies, and adds Pest tests to ensure pixel-faithful UI replication.

How do I prevent React render-loop issues when building complex Kanban UI components?▼

Prevent React render-loops in complex Kanban UIs by applying useMemo and useCallback hook memoization patterns to avoid unnecessary re-renders during interactive drag-drop finite state machine behaviors.

Does this prototype replication workflow support Pest testing for Inertia React pages?▼

Yes, the workflow generates Pest structural tests with cross-tenant guards to validate expected backend payloads and verify interactive Inertia React page behaviors that unit tests might miss.

Can I use this to convert an HTML visual source to Tailwind CSS for a List or Detail layout?▼

Yes, you can convert an HTML visual source to Tailwind CSS by extracting canonical classes and mapping them to Tailwind equivalents for Kanban, List, and Detail layout structures within Inertia React pages.

What is the best way to ensure vertical vocabulary mapping when converting a prototype to code?▼

The best way to ensure vertical vocabulary mapping is to apply guardrails during the prototype-to-code phase, translating domain terms correctly to avoid critical confusions that break UI credibility.

Related Skills

Explore More Design & Creative Skills→
alyamenfactoryalyamenfactory

slides

Creates slide decks with React and Tailwind; exports to PowerPoint files.

Community
Advanced
wodsmithwodsmith
2

drag-and-drop

Implement drag-and-drop interactions for sortable lists and kanban boards.

Official
Advanced
george-popescugeorge-popescu

laravel-inertia-react

Enforce Laravel 12, Inertia 2, and React 19 conventions for web applications.

Community
Intermediate
lucifertrjlucifertrj
17

llm-arena-frontend

Prototype React frontends for LLM Arena game visualization with Vite and Tailwind.

Community
Advanced