skills.rest
Sjdjdiejdrirhdkjej
SjdjdiejdrirhdkjejCOMMUNITY
Explore all skills by this author →
GitHub

mockup-extraction

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

Updated Jan 5, 2026
Search Tags:#tailwind#mockups#design-to-code#ui-patterns#prototype-patterns#component-extraction
One-click install
npx skills add https://github.com/Sjdjdiejdrirhdkjej/Claude-code-conductor --skill mockup-extraction-sjdjdiejdrirhdkjej
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-extraction
Source: https://github.com/Sjdjdiejdrirhdkjej/Claude-code-conductor/tree/main/.claude/skills/mockup-extraction
Command: npx skills add https://github.com/Sjdjdiejdrirhdkjej/Claude-code-conductor --skill mockup-extraction-sjdjdiejdrirhdkjej

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the transition from approved UI mockups to reusable UI components by analyzing designs, extracting patterns, and documenting implementation-ready templates.

Core Features & Use Cases

  • Inventory and pattern detection across mockups
  • CSS to Tailwind mapping guidance
  • Prototype-patterns.md generation for visual fidelity
  • Extraction tasks creation in tasks.md for organized UI implementation
  • Use Case: When starting /implement in a UI-first feature, run this Skill to identify components and prepare a component library plan.

Quick Start

  1. Ensure UI mockups are stored under specs/NNN-slug/mockups/ or design/prototype/screens/.
  2. Confirm mockup approvals in state.yaml and theme files exist.
  3. Trigger the extraction workflow at the start of the /implement phase to populate prototype-patterns.md and generate extraction tasks.

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 UI components from HTML mockups?▼

Mapping mockup CSS to Tailwind utilities involves analyzing existing HTML designs and translating custom styles into corresponding Tailwind classes, enabling consistent visual fidelity during the component extraction process.

What is the best way to transition design-to-code using Tailwind?▼

Transitioning design-to-code is streamlined by generating a prototype-patterns.md file from mockups and creating structured extraction tasks, ensuring UI patterns are mapped to Tailwind utilities for seamless implementation.

When do I need to run component extraction for UI patterns?▼

You need to run component extraction at the start of the /implement phase for a UI-first feature, which identifies reusable components and prepares a structured component library plan for your development workflow.

What file formats do I need for UI pattern extraction?▼

For UI pattern extraction, you need HTML mockups stored under the specs/NNN-slug/mockups/ directory, existing theme files, and mockup approvals recorded in the state.yaml file.

Can I use this to generate a component library plan from prototype screens?▼

Yes, you can generate a component library plan by processing prototype screens, which inventories visual patterns and populates prototype-patterns.md with implementation-ready templates and component states.

Related Skills

Explore More Design & Creative Skills→
marcusgollmarcusgoll
91

mockup-extraction

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

Community
Advanced
DYAI2025DYAI2025

mockup-extraction

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

Community
Advanced
davidsteinbergerdavidsteinberger

code-architecture-tailwind-v4-best-practices

Guide Tailwind CSS v4 component styling with CSS-first configuration and variant abstraction strategies.

Community
Intermediate
sumik5sumik5
1

implementing-design

Generate React and Tailwind CSS code from Figma design files.

Community
Advanced