Can I use this for mobile applications?

Yes, the skill supports specific configurations for Web, iOS, Android, React Native, and Flutter platforms.

How does Claude use these guidelines?

Once generated in the .claude/skills/ directory, Claude can automatically reference these design rules when writing CSS, styling components, or making UI decisions.

What files does this skill generate?

It generates a main SKILL.md along with a references folder containing specialized documentation for colors, typography, spacing, component patterns, and a design-tokens.json file.

Does it support accessibility standards?

Yes, it allows you to define WCAG 2.1 AA or AAA compliance levels to ensure your generated UI components meet industry accessibility standards.

UI Design Guideline Creator

Name: UI Design Guideline Creator
Author: titabash

bytitabash

Design Tools

Generates comprehensive, project-specific UI design systems and style guides as reusable Claude Code skills.

About

This skill automates the creation of professional design guidelines by generating a structured repository of design tokens, color palettes, typography scales, and component specifications tailored to your project. It enables Claude to maintain visual consistency across your codebase by registering a custom design skill that references standardized spacing, accessibility levels (WCAG), and platform-specific patterns for Web, iOS, Android, and cross-platform frameworks.

Key Features

Detailed specifications for 20+ UI components
Automated design system generation for .claude/skills
Platform-specific UI patterns and typography scales
Customizable design tokens in JSON format
WCAG 2.1 AA/AAA accessibility compliance integration
0 GitHub stars

Use Cases

Documenting design systems for improved team consistency
Standardizing UI across a new React, Flutter, or mobile project
Ensuring accessibility compliance in automated frontend development

About

Key Features

Detailed specifications for 20+ UI components
Automated design system generation for .claude/skills
Platform-specific UI patterns and typography scales
Customizable design tokens in JSON format
WCAG 2.1 AA/AAA accessibility compliance integration
0 GitHub stars

Use Cases

Documenting design systems for improved team consistency
Standardizing UI across a new React, Flutter, or mobile project
Ensuring accessibility compliance in automated frontend development