align-design
CommunityMatch UI to mockups exactly
Software Engineering#frontend#visual regression#ui styling#design qa#mockup alignment#css comparison
Authoris-ivanov
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill helps you bring a frontend component into pixel-accurate alignment with its HTML mockup when the implemented UI differs in spacing, typography, layout, borders, or other visual details.
Core Features & Use Cases
- Mockup-to-component comparison: Locates the relevant story mockup and frontend component, then checks visual styling differences systematically.
- Design token alignment: Compares CSS values from the mockup against the live component and fixes mismatches using a defined checklist and styling guidance.
- Safe UI refinement: Preserves behavior and testing hooks while updating only presentation details, making it useful for polishing registration forms, story-based pages, and other feature screens before review or QA.
Quick Start
Ask the AI to use the align-design skill to update a named component or story so its styling matches the corresponding mockup exactly.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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: align-design Download link: https://github.com/is-ivanov/rpm-ddd/archive/main.zip#align-design 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 620,000+ vetted skills library on demand.