skills.rest
DYAI2025
DYAI2025COMMUNITY
Explore all skills by this author →
GitHub

mockup-extraction

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

Updated Feb 14, 2026
Search Tags:#tailwind#design-system#mockups#ui-patterns#prototype-patterns#component-extraction
One-click install
npx skills add https://github.com/DYAI2025/MOD_shark-engine --skill mockup-extraction-dyai2025
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-extraction
Source: https://github.com/DYAI2025/MOD_shark-engine/tree/main/sharkengine/.claude/skills/mockup-extraction
Command: npx skills add https://github.com/DYAI2025/MOD_shark-engine --skill mockup-extraction-dyai2025

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extracts reusable UI components from approved HTML mockups during implementation to accelerate UI-first development and ensure consistency.

Core Features & Use Cases

  • Identifies recurring UI patterns across mockup screens
  • Maps CSS classes to Tailwind utilities
  • Generates a prototype-patterns.md documenting variants, states, and extraction tasks for handoff
  • Produces actionable extraction tasks for design-to-development pipelines

Quick Start

Analyze approved HTML mockups and generate a prototype-patterns.md along with extraction tasks to kick off UI-first implementation.

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 for a design system?▼

To extract reusable UI components from HTML mockups, this Skill inventories approved screens, classifies recurring UI patterns, and documents component variants and states in a prototype-patterns.md file for production implementation.

Can I automatically map custom CSS classes to Tailwind utility classes during component extraction?▼

Yes, you can map custom CSS classes to Tailwind utility classes during component extraction. The workflow translates existing styles into Tailwind utilities while cataloging UI patterns to ensure design system consistency.

What is the best way to document UI pattern variants and states for design-to-development handoff?▼

The best way to document UI pattern variants for handoff is generating a prototype-patterns.md file. This documentation details component states, extraction tasks, and mapped Tailwind utilities to accelerate UI-first development.

Does this component extraction workflow require any specific dependencies or external libraries?▼

No specific dependencies or external libraries are required to run this component extraction workflow. It operates deterministically on approved HTML mockups to identify patterns and generate actionable implementation tasks.

How do I generate actionable extraction tasks from approved UI mockups?▼

You generate actionable extraction tasks from approved UI mockups by analyzing the screens to identify recurring UI patterns, mapping styles to Tailwind utilities, and outputting a structured task list for the development pipeline.

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
SjdjdiejdrirhdkjejSjdjdiejdrirhdkjej

mockup-extraction

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

Community
Intermediate
whimzyLivewhimzyLive
3

tailwind-design-system

Configure Tailwind CSS v4 themes with CSS variables and dark mode.

Community
Advanced
gkswls5006-webgkswls5006-web

moai-design-tools

Automate design-to-code workflows from Figma to React and Tailwind.

Community
Advanced