Skills
.Work. You
Rest

design-system-guard

Official

Validate UI against Lucid Labs design system.

Design & Creative#typography#layout#design-system#brand-colors#ui-validation#qa-checks
Authorlucidlabs-hq
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-system-guard
Download link: https://github.com/lucidlabs-hq/agent-kit/archive/main.zip#design-system-guard

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.