How does the iteration strategy work?

The skill follows a three-phase strategy: Explore (iterations 1-5), Exploit (6-12), and Pivot (13-20), ensuring that Claude continues to refine the design or try new directions if quality plateaus.

What is the minimum score required to pass the quality gate?

All designs must achieve an overall score of at least 9.5/10 (95%) across all dimensions, including spatial, color, and typography, to pass the gate.

Does this skill check for web accessibility?

Yes, it requires 100% compliance with WCAG 2.1 Level AA standards, including mandatory checks for contrast ratios, keyboard navigation, and semantic HTML.

What is 'vibe-code' in this context?

Vibe-code refers to generic, low-effort AI design patterns like default gradients or unstyled framework components; this skill requires a probability of less than 1% to ensure originality.

UI Quality Standards & Design Gates

Name: UI Quality Standards & Design Gates
Author: Claude-Code-Community-Ireland

byClaude-Code-Community-Ireland

•

Design Tools

Enforces high-fidelity UI design standards through automated quality gates, accessibility checks, and scoring rubrics.

The Quality Standards skill provides a comprehensive framework for maintaining exceptional design quality within the Agentic UI Designer system. It establishes strict quality gates requiring 95% minimum compliance across spatial layout, color harmony, typography, and originality. By integrating WCAG 2.1 AA standards and a structured iteration strategy (Explore, Exploit, Pivot), it ensures that AI-generated designs move beyond generic 'vibe-code' to become production-ready, accessible, and brand-aligned interfaces.

Key Features

01Structured iteration phases to prevent design plateaus and regressions

023 GitHub stars

03Strict quality gates with a 95% minimum passing threshold

04Automated WCAG 2.1 Level AA accessibility compliance validation

05Anti-vibe-code detection to ensure unique and intentional design patterns

06Multi-dimensional scoring for Spatial, Color, Typography, and Originality

Use Cases

01Automating design reviews for AI-generated frontend components

02Maintaining consistent design system adherence across complex UI iterations

03Ensuring accessible and WCAG-compliant UI development in Claude Code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claude-code-community-ireland/claude-code-resources quality-standards

For use in Claude.ai and ChatGPT

Download Skill