mockup-extraction

Name: mockup-extraction
Availability: InStock
Author: DYAI

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

Ready to run

npx skills add https://github.com/DYAI2025/MOD_shark-engine --skill mockup-extraction-dyai2025

💬 Prompt for ChatGPT / Claude Chat▼

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.