skills.rest
endorphin-ai
endorphin-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

designer-frontend-contract

Freeze design mockups, port them to frontend, and verify visual parity.

4|Updated Mar 26, 2026
Search Tags:#web development#visual regression#UI consistency#design verification#design handoff
One-click install
npx skills add https://github.com/endorphin-ai/hasbrains-agent-kit --skill designer-frontend-contract
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designer-frontend-contract
Source: https://github.com/endorphin-ai/hasbrains-agent-kit/tree/main/web-dev/skills/designer-frontend-contract
Command: npx skills add https://github.com/endorphin-ai/hasbrains-agent-kit --skill designer-frontend-contract

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

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.

Frequently Asked Questions about designer-frontend-contract

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I ensure design fidelity during frontend web development?▼

To ensure design fidelity, freeze approved mockups into a canonical oracle, port the design contract 1:1 into frontend code, and perform visual regression tests to verify the built UI against the design oracle across all states and breakpoints.

What is a design oracle and how does it prevent visual regressions?▼

A design oracle is a frozen, canonical reference of approved mockups used to prevent visual regressions. It acts as a strict baseline for visual regression testing, ensuring token parity and UI consistency when porting designs to the frontend.

How do I handle design handoff and verify UI consistency across breakpoints?▼

Handle design handoff by registering approved mockups as a visual acceptance contract. Verify UI consistency across breakpoints by consuming this contract, porting the oracle 1:1, and running visual regression tests against the baseline rendering.

Do I need a design system to use a visual acceptance contract for frontend porting?▼

Yes, using a visual acceptance contract for frontend porting requires design system knowledge. You need a design inventory and token parity to accurately replicate the oracle and pass verification without altering its canonical structure.

What's the best way to verify frontend implementation against approved mockups?▼

The best way to verify frontend implementation is to create a design inventory from approved mockups, port the oracle 1:1, and execute a visual regression test to compare the built UI against the baseline rendering for token parity.

Related Skills

Explore More Software Engineering Skills→
AlexandrePontesjrAlexandrePontesjr

reversa-screen-translator

Convert legacy UI screens into executable target specifications with human-approved modes.

Community
Advanced
alekspetrovalekspetrov
196

visual-regression

Automate visual-regression testing setup for Storybook components with CI workflows.

Community
Advanced
lync-cyberlync-cyber
133

penpot-bridge

Bridge Penpot design data with frontend code generation and token synchronization.

Community
Advanced
fy538fy538

visual-qa

Compare rendered image stills against POLISH.md design specifications and generate markdown reports.

Community
Intermediate