菜单
Visual design patterns for design tokens, component specifications, color systems, typography, spacing, and WCAG accessibility compliance. Use proactively when working on design systems, UI components, CSS/SCSS styles, or reviewing visual design decisions for accessibility and consistency.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Validate and fix YAML frontmatter metadata in markdown documentation files. Covers required fields, field formats, and schema compliance for SKILL.md and knowledge-copilot files. Use proactively when auditing documentation frontmatter, reviewing SKILL.md files, or fixing YAML metadata errors.
Validate markdown links and cross-references to ensure documentation integrity. Detects broken links, missing anchors, and invalid cross-reference paths in markdown files. Use proactively when auditing documentation, reviewing PRs that touch markdown files, or checking knowledge-copilot for broken links.
Analyze markdown files for token budget compliance. Checks word count, section lengths, and overall file size against documentation guidelines. Use proactively when creating or reviewing documentation files, knowledge-copilot pages, or when a doc might be over-budget for agent context loading.
Code smell detection, refactoring triggers, and safe transformation patterns for extract, inline, and rename operations. Includes deterministic code-structure metrics analyzer (refactor_metrics.py) for long functions, deep nesting, long parameter lists, large files, and function count — covers TypeScript, JavaScript, Python, Go, Java, and Ruby. Use proactively when identifying refactoring opportunities, code-reviewing for structural complexity signals, prioritizing technical debt, or establishing a complexity baseline for a module. Run the metrics analyzer for deterministic scoring.
MailChimp Voice & Tone framework for UX copy, microcopy, error messages, and interface text — calibrates tone to user emotional state and context. Covers the four-quadrant tone map, plain-language rules, and anti-patterns for corporate or condescending copy. Use proactively when writing error messages, button labels, help text, onboarding flows, empty states, success confirmations, destructive action warnings, or any user-facing copy in product UI, or when reviewing copy for tone consistency.
Tutorial and how-to guide patterns for progressive learning experiences. Covers Diátaxis tutorial/how-to structure, quickstart design, step-by-step walkthrough writing, anti-patterns, and progressive disclosure. Use proactively when writing tutorials, how-to guides, getting-started docs, or README files.
| name | design-patterns |
| description | Visual design patterns for design tokens, component specifications, color systems, typography, spacing, and WCAG accessibility compliance. Use proactively when working on design systems, UI components, CSS/SCSS styles, or reviewing visual design decisions for accessibility and consistency. |
| version | 1.0.0 |
| allowed-tools | ["Read","Edit","Write","Glob","Grep"] |
| tags | ["design","tokens","visual","components","accessibility","pattern","anti-pattern"] |
Visual design patterns for creating consistent, accessible interfaces with proper design tokens and component specifications.
Provides patterns for:
When to use: Defining color systems that work across themes.
Implementation:
/* Base palette (reference only) */
--blue-500: #3b82f6;
--blue-700: #1d4ed8;
/* Semantic tokens (use these) */
--color-primary: var(--blue-500);
--color-primary-hover: var(--blue-700);
--color-text: #111827;
--color-text-muted: #6b7280;
--color-background: #ffffff;
--color-error: #ef4444;
--color-success: #10b981;
Benefits:
When to use: All spacing decisions (padding, margins, gaps).
Implementation:
--space-1: 0.25rem; /* 4px - tight */
--space-2: 0.5rem; /* 8px - compact */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px - default */
--space-6: 1.5rem; /* 24px - medium */
--space-8: 2rem; /* 32px - large */
--space-12: 3rem; /* 48px - section */
Benefits:
When to use: Defining all interactive component states.
Implementation:
| State | Background | Border | Text | Cursor |
|---|---|---|---|---|
| Default | --color-bg | --color-border | --color-text | default |
| Hover | --color-bg-hover | --color-border | --color-text | pointer |
| Focus | --color-bg | --color-focus-ring | --color-text | — |
| Active | --color-bg-active | --color-border | --color-text | pointer |
| Disabled | --color-bg | --color-border | --color-text-muted | not-allowed |
| Loading | --color-bg | --color-border | --color-text-muted | wait |
| Error | --color-bg | --color-error | --color-error | — |
| Aspect | Description |
|---|---|
| WHY | Breaks design system consistency, makes theme switching impossible |
| DETECTION | Raw hex colors, pixel values without tokens in CSS |
| FIX | Always use design tokens for colors, spacing, typography |
Bad Example:
.button {
background: #3b82f6;
padding: 12px 16px;
color: white;
}
Good Example:
.button {
background: var(--color-primary);
padding: var(--space-3) var(--space-4);
color: var(--color-on-primary);
}
| Aspect | Description |
|---|---|
| WHY | Creates incomplete interactions, accessibility failures |
| DETECTION | Components only define default + hover, missing focus/disabled/error |
| FIX | Define ALL states: default, hover, focus, active, disabled, loading, error |
| Aspect | Description |
|---|---|
| WHY | WCAG 2.1 AA violation, excludes users with visual impairments |
| DETECTION | Text contrast < 4.5:1, UI component contrast < 3:1 |
| FIX | Use contrast checker, ensure text 4.5:1, UI elements 3:1 minimum |
| Requirement | Threshold | Applies To |
|---|---|---|
| Text contrast | 4.5:1 | All text |
| Large text contrast | 3:1 | 18px+ or 14px bold |
| UI component contrast | 3:1 | Borders, icons, focus rings |
| Touch target | 44x44px | Mobile interactive elements |
| Focus visible | 2px outline | All focusable elements |
## Design Tokens: [System Name]
### Colors
| Token | Value | Usage |
|-------|-------|-------|
| --color-primary | #3b82f6 | Primary actions |
| --color-text | #111827 | Body text (4.54:1) |
### Typography
| Token | Value | Usage |
|-------|-------|-------|
| --text-base | 1rem | Body text |
| --font-sans | 'Inter', sans-serif | Primary font |
### Spacing
| Token | Value | Usage |
|-------|-------|-------|
| --space-4 | 1rem | Default padding |
## Component: [Name]
### Variants
| Variant | Use Case | Treatment |
|---------|----------|-----------|
| Primary | Main actions | Filled, brand |
| Secondary | Alternative | Outlined |
### States
| State | Background | Border | Text |
|-------|------------|--------|------|
| Default | --color-bg | --color-border | --color-text |
### Accessibility
- Contrast: X.X:1 (meets AA)
- Touch target: 44x44px
- Focus: 2px outline