Agent-Skills.md

Agent Skills: DesignSystem-Pro-Max - Design System Intelligence

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.

UncategorizedID: kyirexy/DesignSystem-Pro-Max-skill/ds-pro-max
1

Install this agent skill to your local

pnpm dlx add-skill https://github.com/kyirexy/DesignSystem-Pro-Max-skill/tree/HEAD/.claude/skills/ds-pro-max

Skill Files

Browse the full folder contents for ds-pro-max.

Download Skill

Loading file tree…

.claude/skills/ds-pro-max/SKILL.md

Skill Metadata

Name
ds-pro-max
Description
"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."

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

  1. Be specific - "AntD primary button" > "button"
  2. Use stack flag - Get framework-specific guidelines
  3. Search multiple domains - Component + Color + Typography = Complete spec
  4. Generate before implementing - Get CSS structure from generate.py
  5. Audit your code - Check for violations before delivery
  6. 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