# Design System

Audit, document, or extend your design system.

- Repository: https://github.com/TencentCloud/Octop (11420 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add TencentCloud/Octop --skill design-system -g -a claude-code -y`
Codex: `npx skills add TencentCloud/Octop --skill design-system -g -a codex -y`
Cursor: `npx skills add TencentCloud/Octop --skill design-system -g -a cursor -y`
Gemini CLI: `npx skills add TencentCloud/Octop --skill design-system -g -a gemini-cli -y`

## Description

Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# /design-system

> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).

Manage your design system, audit for consistency, document components, or design new patterns.

## Usage

```
/design-system audit                    # Full system audit
/design-system document [component]     # Document a component
/design-system extend [pattern]         # Design a new component or pattern
```

## Components of a Design System

### Design Tokens
Atomic values that define the visual language:
- Colors (brand, semantic, neutral)
- Typography (scale, weights, line heights)
- Spacing (scale, component padding)
- Borders (radius, width)
- Shadows (elevation levels)
- Motion (durations, easings)

### Components
Reusable UI elements with defined:
- Variants (primary, secondary, ghost)
- States (default, hover, active, disabled, loading, error)
- Sizes (sm, md, lg)
- Behavior (interactions, animations)
- Accessibility (ARIA, keyboard)

### Patterns
Common UI solutions combining components:
- Forms (input groups, validation, submission)
- Navigation (sidebar, tabs, breadcrumbs)
- Data display (tables, cards, lists)
- Feedback (toasts, modals, inline messages)

## Principles

1. **Consistency over creativity**, The system exists so teams don't reinvent the wheel
2. **Flexibility within constraints**, Components should be composable, not rigid
3. **Document everything**, If it's not documented, it doesn't exist
4. **Version and migrate**, Breaking changes need migration paths

## Output, Audit

```markdown
## Design System Audit

### Summary
**Components reviewed:** [X] | **Issues found:** [X] | **Score:** [X/100]

### Naming Consistency
| Issue | Components | Recommendation |
|-------|------------|----------------|
| [Inconsistent naming] | [List] | [Standard to adopt] |

The rest: https://github.com/TencentCloud/Octop/blob/HEAD/src/octop/infra/agents/experts/library/design/skills/design-system/SKILL.md