skills.rest
brandonavant
brandonavantCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-check

Validate UI components against a 27-item brand-alignment checklist.

2|1|Updated Mar 15, 2026
Search Tags:#quality-assurance#ui-design#aesthetics#design-system#brand-consistency#design-enforcement
One-click install
npx skills add https://github.com/brandonavant/harness-engineering-guide --skill design-check-brandonavant
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-check
Source: https://github.com/brandonavant/harness-engineering-guide/tree/main/templates/.claude/skills/design-enforcement
Command: npx skills add https://github.com/brandonavant/harness-engineering-guide --skill design-check-brandonavant

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Anti-generic design enforcement helps teams catch AI-generated visual antipatterns and verify brand compliance across components and pages, reducing design drift and ensuring consistency.

Core Features & Use Cases

  • Catalogs common design antipatterns (Tailwind Default Syndrome, Typography Flatness, Layout Monotony, Missing Personality, Dark Mode Failures) and provides a 27-item checklist to enforce on every change.
  • Provides actionable guidelines for design tokens, typography, spacing, radii, and elevation to sustain a cohesive brand system.
  • Use Case: when implementing or updating a UI component, run this skill to ensure visuals conform to brand voice and design system constraints before ship.

Quick Start

Use the design-check skill to validate a component against the brand-alignment checklist before deployment.

Frequently Asked Questions about design-check

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

FAQPage Schema
How do I enforce brand consistency and check UI components for design antipatterns?▼

Brand consistency enforcement validates UI components against a 27-item checklist to catch visual antipatterns like Tailwind Default Syndrome, Typography Flatness, and Dark Mode Failures before deployment. It ensures typography, color, spacing, and layout match your design tokens.

What are common AI-generated UI design antipatterns and how do I fix them?▼

AI-generated UI design antipatterns include Tailwind Default Syndrome, Typography Flatness, Layout Monotony, Missing Personality, and Dark Mode Failures. A 27-item brand-alignment checklist identifies these issues by validating design tokens, spacing scales, radii, and elevation cues for cohesive outputs.

How do I validate design tokens and spacing scales before shipping a UI component?▼

Validating design tokens and spacing scales requires checking UI updates against a 27-item checklist covering typography, color, radii, and elevation. This process verifies accessibility considerations and design system constraints to produce reliable, ship-ready outputs.

Can I use a design system checklist for both component and page-level updates?▼

Yes, design system validation applies to both component and page-level updates across projects. It guides designers and engineers to verify brand voice, visual aesthetics, and accessibility considerations, ensuring consistent design enforcement at any scale.

What is the best way to prevent design drift across multiple UI projects?▼

Preventing design drift requires cataloging visual antipatterns and applying a 27-item checklist on every UI change. This enforces brand-consistent visuals by specifying design tokens, spacing scales, radii, and elevation cues for reliable outputs.

Why does my UI component layout look flat and lack brand personality?▼

Flat layouts lacking brand personality often stem from Typography Flatness and Missing Personality antipatterns. Validating your component against a 27-item brand-alignment checklist clarifies on-brand visuals by checking elevation cues, radii, and design tokens.

Related Skills

Explore More Design & Creative Skills→
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced
einargudnigeinargudnig

design

Generate distinctive UI designs with accessibility and production-ready handoff checklists.

Community
Advanced
Kael-DeanKael-Dean

extract

Identify and consolidate reusable UI patterns, components, and design tokens into a design system.

Community
Intermediate
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced