design-contract

A design contract ensures frontend UI work aligns with product goals by requiring PRODUCT.md and DESIGN.md files before coding. This skill validates contract presence and generates missing documents using templates to prevent misaligned implementation.

A design contract defines your product brief and UI design language through PRODUCT.md and DESIGN.md. You need it before any frontend implementation to align team goals, validate readiness, and reduce rework caused by undefined requirements.

To generate missing PRODUCT.md and DESIGN.md files, the skill inspects your frontend project directory and provides document templates. It guides creation of these contract documents to establish a defined design language before touching UI code.

A design contract approach applies to frontend projects where teams need a defined design language and product brief. It validates contract readiness and serves as a guardrail to ensure UI work proceeds only with established documentation.

Your UI implementation requires a product definition document to prevent misaligned design work. Enforcing a contract ensures product goals and design language are aligned from the start, reducing rework and validating that documentation is up to date.

Using templates for design contract generation provides structural guidance but requires manual refinement to fit specific product needs. The skill enforces document presence and offers templates, but teams must populate the product brief and design language details.