design/validator

Compare HTML output against a Design Contract and write a findings-only validation report.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/f-campana/bifrost --skill design-validator
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design/validator
Source: https://github.com/f-campana/bifrost/tree/main/skills/design/design-validator
Command: npx skills add https://github.com/f-campana/bifrost --skill design-validator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often produce HTML that diverges from the Design Contract, causing inconsistencies and rework.

Core Features & Use Cases

  • HTML vs Contract Validation: Compares the produced HTML with the Design Contract rules.
  • Findings-only Report: Generates a concise report listing all violations without altering the contract or HTML.
  • Failure Handling: Alerts when HTML or Contract is missing or when violations are detected.

Quick Start

Submit the HTML output and the Design Contract to generate a findings-only validation report.

Frequently Asked Questions about design/validator

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

FAQPage Schema
How do I validate HTML output against a Design Contract?

To validate HTML output against a Design Contract, submit both artifacts to generate a concise findings-only report listing violations without altering the original files.

What is a findings-only validation report for HTML design?

A findings-only validation report for HTML design lists all detected contract violations. It strictly identifies discrepancies without modifying the submitted HTML output or the Design Contract.

What happens if my HTML or Design Contract is missing during validation?

If your HTML or Design Contract is missing during validation, the process triggers failure handling alerts. It specifically catches missing artifacts and contract mismatches to prevent silent errors.

Can I use a validator to automatically fix HTML that violates design rules?

You cannot use this validator to automatically fix HTML that violates design rules. It generates a findings-only report identifying violations across common scenarios, leaving the actual HTML correction to the developer.

When do I need to check HTML for Design Rune violations?

You need to check HTML for Design Rune violations during typical review workflows, specifically after design-build produces the HTML output, to catch divergences from the Design Contract early.

Does the design validator work without any external dependencies?

Yes, the design validator works without external dependencies. It independently compares the submitted HTML output and Design Contract inputs to detect rule violations and output a report.