skills.rest
calcosmic
calcosmicCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design-contract

Generate a UI-SPEC.md contract defining visual tokens, breakpoints, and accessibility criteria.

9|1|Updated Feb 1, 2026
Search Tags:#accessibility#frontend#prototyping#design-system#responsive-design#ui-spec#design-contract
One-click install
npx skills add https://github.com/calcosmic/Aether --skill frontend-design-contract
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-contract
Source: https://github.com/calcosmic/Aether/tree/main/.aether/skills-codex/colony/frontend-design-contract
Command: npx skills add https://github.com/calcosmic/Aether --skill frontend-design-contract

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often encounter drift between design intent and implementation. This contract locks visual tokens, interaction patterns, accessibility requirements, and responsive behavior into a single source of truth to prevent inconsistencies during development.

Core Features & Use Cases

  • UI Spec generation: Generates a comprehensive UI-SPEC.md that documents component inventories, visual tokens, breakpoints, accessibility contracts, and performance budgets before coding begins.
  • Design-system alignment: Ensures alignment with an existing design system or pattern library.
  • Use Case: When starting a new frontend phase, run this contract to produce a contract that builders reference to implement UI consistently across web and mobile.

Quick Start

Generate a UI-SPEC.md in the phase directory describing the UI contract prior to development.

Frequently Asked Questions about frontend-design-contract

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

FAQPage Schema
How do I prevent design drift between UI mockups and frontend implementation?▼

A UI design contract prevents drift by locking visual tokens, interaction patterns, accessibility requirements, and responsive behavior into a single source of truth before coding begins. This ensures strict consistency across web and mobile development.

What is a UI-SPEC.md artifact and when do I need it for frontend development?▼

A UI-SPEC.md is a comprehensive frontend design contract document specifying component inventories, visual tokens, breakpoints, accessibility criteria, and performance budgets. You need it before starting frontend development to establish strict UI consistency.

How do I create a frontend design contract that aligns with an existing design system?▼

To create a frontend design contract aligned with your design system, generate a UI-SPEC.md in your phase directory. This artifact maps your existing pattern library to specific interaction patterns, responsive behavior, and accessibility criteria for builders to reference.

Can I use a frontend design contract for both web and mobile responsive design?▼

Yes, a frontend design contract applies to both web and mobile frontend phases requiring strict UI consistency. It specifies responsive behavior by defining breakpoints, visual tokens, and interaction patterns that ensure consistent implementation across platforms.

What should be included in an accessibility and performance budget for frontend prototyping?▼

An accessibility and performance budget for frontend prototyping should include specific accessibility criteria and performance thresholds defined within your UI-SPEC.md. These requirements are locked into the design contract to ensure visual tokens and interaction patterns meet standards before code implementation.

Related Skills

Explore More Design & Creative Skills→
cmbayscmbays
1

design-mockup

Translate breadboard affordances into visual mockups with Storybook and Paper MCP.

Community
Advanced
a7gardena7garden

design-guide

Document and enforce CoHalo's frontend design language across components, tokens, typography, and patterns.

Community
Advanced
muzhicaomingwangmuzhicaomingwang
3

ui

Translate UX concepts into wireframe-level UI specifications with design tokens and accessibility checklists.

Community
Intermediate
SylphxAISylphxAI
4

uiux

Generate design system documentation with tokens and WCAG AA accessibility criteria.

Official
Basic