skills.rest
lucidlabs-hq
lucidlabs-hqOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-system-guard

Validate UI screens against Lucid Labs design system rules.

2|1|Updated Jan 27, 2026
Search Tags:#typography#layout#design-system#brand-colors#ui-validation#qa-checks
One-click install
npx skills add https://github.com/lucidlabs-hq/agent-kit --skill design-system-guard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-guard
Source: https://github.com/lucidlabs-hq/agent-kit/tree/main/.claude/skills/design-system-guard
Command: npx skills add https://github.com/lucidlabs-hq/agent-kit --skill design-system-guard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Validate UI screens against the Lucid Labs design system to ensure consistency in brand colors, typography, layout, and service board logic across projects.

Core Features & Use Cases

  • Rule-based validation against Lucid Labs design system rules.
  • Checks color usage (indigo-500/indigo-600), typography hierarchy, spacing, borders, and shadow usage.
  • Use Case: QA teams verify new UI components during handoff or design reviews.

Quick Start

Provide the UI screen component or screenshot to validate against the design system.

Frequently Asked Questions about design-system-guard

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

FAQPage Schema
How do I validate UI components against a design system during handoff?▼

To validate UI components during design handoff, provide the screen or component to check color usage, typography hierarchy, spacing, and borders against established design system rules.

What does a design system QA check cover for UI layouts?▼

A design system QA check verifies color usage like indigo-500/600, typography hierarchy using slate-900/700/500, spacing, borders, and confirms the absence of dark mode defaults or heavy shadows.

Can I use this tool to check brand colors and typography in my UI screens?▼

Yes, you can check brand colors and typography in UI screens. It validates exact color tokens like indigo-500 and typography hierarchy tokens to ensure visual consistency across projects.

How do I run a design audit to find dark mode defaults or heavy shadows?▼

To run a design audit for dark mode defaults or heavy shadows, input your UI screen for validation. The tool identifies and flags these specific design system rule violations during the review process.

What is the best way to ensure brand color consistency across multiple UI projects?▼

The best way to ensure brand color consistency is to run UI screens through rule-based validation checks that verify exact color usage, such as indigo-500 and indigo-600, against your design system.

Related Skills

Explore More Design & Creative Skills→
rmjamesrmjames
1

Brand Guidelines

Enforce design system tokens for spacing, color, and typography in web interfaces.

Community
Basic
1IssaMohamed1IssaMohamed

polish

Audit and fix visual alignment, spacing, typography, and interaction issues in web interfaces.

Community
Advanced
scanbottscanbott

frontend-theme

Apply Rawgrowth design system tokens, typography, and layout before writing UI code.

Community
Advanced
petbrainspetbrains
13

frontend-color-system

Generate accessible color palettes and themes from brand colors with WCAG contrast validation.

Official
Intermediate