ui-mockup-fidelity
CommunityBuild pixel-perfect UIs from mockups.
AuthorSebKay
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill ensures that website UIs are built with high visual fidelity, precisely matching provided mockups in layout, spacing, colors, and backgrounds, especially when using utility-first CSS frameworks.
Core Features & Use Cases
- Fidelity-First Implementation: Prioritizes exact replication of mockup designs.
- Component Extraction: Identifies and abstracts repeated UI patterns into reusable components.
- Structured Workflow: Guides implementation through four distinct passes: structure, extraction, styling, and review.
- Deviation Reporting: Mandates clear documentation for any intentional deviations from the mockup.
- Use Case: When a designer provides a Figma mockup for a new landing page, this Skill helps developers translate it into code with minimal visual discrepancies, ensuring brand consistency and a polished user experience.
Quick Start
Implement the provided UI mockup by following the four-pass implementation process and reporting any deviations.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: ui-mockup-fidelity Download link: https://github.com/SebKay/skills/archive/main.zip#ui-mockup-fidelity Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.