Claude-skill-registry ds-pro-max

Design system intelligence. Search AntD, Material-UI, Figma, Bootstrap, Tailwind specs. Generate compliant CSS code. Audit for violations. Components, colors, typography, spacing, tokens. Actions: search, generate, audit, review, fix, implement, migrate. Projects: React, Vue, web apps, dashboards, admin panels.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/ds-pro-max" ~/.claude/skills/majiayu000-claude-skill-registry-ds-pro-max && rm -rf "$T"

manifest: skills/data/ds-pro-max/SKILL.md

DesignSystem-Pro-Max - Design System Intelligence

Searchable database of design system specifications, component guidelines, color tokens, typography scales, and framework-specific best practices.

Prerequisites

Check if Python is installed:

python3 --version || python --version

If Python is not installed, install it based on user's OS:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

How to Use This Skill

When user requests design system work (search specs, generate code, audit compliance), follow this workflow:

Step 1: Analyze User Requirements

Extract key information from user request:

Component type: Button, Input, Modal, Table, etc.
Framework: AntD, Material-UI, Bootstrap, Tailwind, Chakra, Elements, Figma
Task type: Search specs, generate code, audit violations
Output format: CSS (primary), component code

Step 2: Search Design Specifications

Use

search.py

to gather comprehensive information:

python3 .claude/skills/ds-pro-max/scripts/search.py "<keyword>" --domain <domain> [--max-results <n>]
python3 .claude/skills/ds-pro-max/scripts/search.py "<keyword>" --stack <stack> [--max-results <n>]

Available Domains:

Domain	Use For	Example Keywords
`component`	UI component specs	button, input, modal, table, card, select
`color`	Color tokens	primary, success, warning, error, theme
`typography`	Font specs	heading, body, font-size, weight, line-height
`spacing`	Spacing tokens	padding, margin, gap, spacing scale
`tokens`	Design tokens	design token, CSS variable, theme

Available Stacks:

Stack	Framework	Docs
`react-antd`	Ant Design (React)	https://ant.design
`material-ui`	Material-UI (MUI)	https://mui.com
`figma-tokens`	Figma Design Tokens	https://figma.com
`bootstrap`	Bootstrap CSS	https://getbootstrap.com
`tailwind`	Tailwind CSS	https://tailwindcss.com
`chakra`	Chakra UI	https://chakra-ui.com
`elements`	Adobe I/O Elements	https://opensource.adobe.com

Step 3: Generate Compliant Code

Use

generate.py

to generate CSS code based on specifications:

python3 .claude/skills/ds-pro-max/scripts/generate.py "<query>" --stack <stack> --output <file.css>

Example:

# Generate color token CSS for Ant Design
python3 .claude/skills/ds-pro-max/scripts/generate.py "primary color tokens" --stack react-antd --output colors.css

# Generate spacing scale for Tailwind
python3 .claude/skills/ds-pro-max/scripts/generate.py "spacing scale" --stack tailwind --output spacing.css

Step 4: Audit Code for Compliance

Use

audit.py

to check code for design system compliance:

python3 .claude/skills/ds-pro-max/scripts/audit.py <file.css> --stack <stack>

Audit checks include:

Naming conventions (kebab-case, CSS variables)
Property value validity (colors, spacing tokens)
Accessibility (color contrast, focus states)
Best practices (shorthands, specificity)

Example Workflows

Example 1: Create a Primary Button

User request: "Create a primary button using Ant Design"

AI should:

# 1. Search component specs
python3 .claude/skills/ds-pro-max/scripts/search.py "primary button" --domain component --stack react-antd

# 2. Search color specs
python3 .claude/skills/ds-pro-max/scripts/search.py "primary color" --domain color --stack react-antd

# 3. Generate CSS if needed
python3 .claude/skills/ds-pro-max/scripts/generate.py "primary button styles" --stack react-antd --output button.css

Then: Synthesize results and implement:

import { Button } from 'antd';

<Button type="primary">Primary Button</Button>

Example 2: Migrate Bootstrap to Tailwind

User request: "Convert Bootstrap button to Tailwind"

AI should:

# 1. Search Bootstrap button spec
python3 .claude/skills/ds-pro-max/scripts/search.py "button" --stack bootstrap

# 2. Search Tailwind button spec
python3 .claude/skills/ds-pro-max/scripts/search.py "button utility classes" --stack tailwind

# 3. Generate Tailwind CSS
python3 .claude/skills/ds-pro-max/scripts/generate.py "button styles" --stack tailwind --output tailwind-button.css

Then: Provide migration:

<!-- Before (Bootstrap) -->
<button class="btn btn-primary">Click</button>

<!-- After (Tailwind) -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Click</button>

Example 3: Audit CSS for Compliance

User request: "Check this CSS for Ant Design compliance"

AI should:

# Audit the CSS file
python3 .claude/skills/ds-pro-max/scripts/audit.py styles.css --stack react-antd

Then: Report violations with fixes:

/* Violation: Using non-standard color */
.btn-primary { background: #1890; }
/* Fix: Use standard color token */
.btn-primary { background: var(--primary-color); }

Common Design System Rules

Naming Conventions

Rule Do Don't

CSS variables

--primary-color

--spacing-md

$primaryColor

PRIMARY_COLOR

Kebab-case

primary-button

font-size-lg

primaryButton

font_size_lg

Semantic names

--color-success

--spacing-content

--color-green

--spacing-16px

Color Tokens

Rule Do Don't

Use variables

color: var(--primary-color)

color: #1890ff

Semantic names

--color-primary

--color-error

--color-blue

--color-red

Contrast ratios 4.5:1 minimum for text Low contrast colors

Spacing Scale

Rule Do Don't

Consistent base 4px, 8px, 12px, 16px, 24px 5px, 7px, 9px, 11px

Use tokens

padding: var(--spacing-md)

padding: 16px

Semantic names

--spacing-content

--spacing-section

--spacing-16

Accessibility

Rule	Do	Don't
Focus states	Always define `:focus` styles	Skip focus indicators
Color contrast	4.5:1 for normal text, 3:1 for large	Low contrast ratios
ARIA labels	Add `aria-label` for icon buttons	Rely on visuals only
Keyboard nav	Ensure all interactive elements work	Mouse-only interactions

Pre-Delivery Checklist

Before delivering design system code, verify:

Compliance

All colors use CSS variables/tokens
Spacing follows the defined scale
Naming follows framework conventions
Component props match framework API

Accessibility

Color contrast meets WCAG AA (4.5:1)
Focus states are visible
ARIA labels present where needed
Keyboard navigation works

Best Practices

No hardcoded values (use tokens)
Consistent naming across files
Proper component composition
Framework-specific patterns followed

Tips for Better Results

Be specific - "AntD primary button" > "button"
Use stack flag - Get framework-specific guidelines
Search multiple domains - Component + Color + Typography = Complete spec
Generate before implementing - Get CSS structure from generate.py
Audit your code - Check for violations before delivery
Reference official docs - Always link to framework documentation

CLI Reference

search.py

python3 scripts/search.py "<query>" [options]

Options:
  --domain, -d    Domain to search (component, color, typography, spacing, tokens)
  --stack, -s     Stack to search (react-antd, material-ui, figma-tokens, etc.)
  --max-results, -n  Maximum results (default: 3)
  --json          Output as JSON
  --list-domains  List available domains
  --list-stacks   List available stacks

generate.py

python3 scripts/generate.py "<query>" [options]

Options:
  --stack, -s     Stack for code generation (required)
  --output, -o    Output file path (required)
  --format, -f    Output format (default: css)

audit.py

python3 scripts/audit.py <file.css> [options]

Options:
  --stack, -s     Stack for compliance check (required)
  --format, -f    Output format (default: text)
  --fixes         Include suggested fixes