designer-frontend-contract
OfficialEnsure design fidelity across web development
Software Engineering#web development#visual regression#UI consistency#design verification#design handoff
Authorendorphin-ai
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill ensures that the design of a web application is accurately replicated in the frontend development process, preventing visual regressions and maintaining consistency across different devices and states.
Core Features & Use Cases
- Design Handoff: Freeze approved mockups into a canonical oracle and register it for reference.
- Frontend Porting: Consume the design contract and port the oracle 1:1 without altering its structure.
- Verification: Perform a visual regression test to compare the built UI against the design oracle.
- Use Case: When a new design is approved, use this Skill to create an oracle and ensure that the frontend development accurately replicates the design for all page states and breakpoints.
Quick Start
Create an oracle for the 'homepage' design and verify the frontend implementation against it using the 'designer-frontend-contract' skill.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferencesassets
💻 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: designer-frontend-contract Download link: https://github.com/endorphin-ai/hasbrains-agent-kit/archive/main.zip#designer-frontend-contract 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.