mockup-extraction

Extract reusable UI components from approved HTML mockups and map CSS to Tailwind utilities.

91|10|Updated Oct 4, 2025

Search Tags:#components #extraction #Tailwind #design-system #mockups

Ready to run

npx skills add https://github.com/marcusgoll/Spec-Flow --skill mockup-extraction

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mockup-extraction
Source: https://github.com/marcusgoll/Spec-Flow/tree/main/.codex/skills/mockup-extraction
Command: npx skills add https://github.com/marcusgoll/Spec-Flow --skill mockup-extraction

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Bridges visual mockups to production code by extracting reusable components and mapping CSS to Tailwind utilities.

Core Features & Use Cases

Inventory mockup components across screens
Map CSS to Tailwind tokens
Document component variants and states
Generate prototype-patterns.md for visual fidelity

Quick Start

Analyze approved HTML mockups in specs/NNN-slug/mockups/ and populate prototype-patterns.md.

Frequently Asked Questions about mockup-extraction

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

FAQPage Schema

How do I extract reusable components from HTML mockups?▼

Extract reusable components by scanning approved HTML mockups in specs/NNN-slug/mockups/ or design/prototype/screens, identifying recurring UI patterns, mapping CSS to Tailwind utilities, and documenting variants and states in prototype-patterns.md for the /implement phase.

Can I map CSS to Tailwind tokens when extracting components from mockups?▼

Yes. The extraction process automatically scans your theme files (theme.yaml and theme.css) and converts CSS declarations to Tailwind utility classes, documenting the mapping in your component documentation.

What mockup format and structure does component extraction require?▼

Component extraction requires approved HTML mockups stored in specs/NNN-slug/mockups/ or design/prototype/screens directories, along with theme files (theme.yaml and theme.css) and an approval gate configured in state.yaml.

How do I document component variants and states during mockup extraction?▼

Document variants and states by running the extraction process, which inventories components across screens and generates prototype-patterns.md with component documentation including all identified variants and interaction states.

When should I use mockup extraction in my design-to-code workflow?▼

Use mockup extraction at the start of the /implement phase for UI-first features after mockups are approved, to inventory components, establish Tailwind mappings, and generate extraction tasks before production implementation.

What happens if theme files are missing during component extraction?▼

Theme files (theme.yaml and theme.css) are required for accurate Tailwind utility mapping. The extraction process requires these files to convert CSS properties and generate proper component documentation.