skills.rest
marcusgoll
marcusgollCOMMUNITY
Explore all skills by this author →
Website𝕏@marcusgollGitHub

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
One-click install
npx skills add https://github.com/marcusgoll/Spec-Flow --skill mockup-extraction
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
mohamed-g-shoaibmohamed-g-shoaib
2

tailwind-design-system

Standardize UI development with Tailwind CSS v4 design tokens and CSS-first theming.

Community
Advanced
DYAI2025DYAI2025

mockup-extraction

Analyzes HTML mockups to extract reusable UI components into Tailwind utilities and documentation.

Community
Advanced
nicanacnicanac

tailwind-design-system

Create scalable design systems with Tailwind CSS v4 using CSS-first configuration and design tokens.

Community
Advanced
yonatangrossyonatangross
217

figma-design-handoff

Extract Figma design tokens and generate TypeScript component interfaces.

Community
Advanced