Complete design system reference for any project - colors, typography, spacing, components, animations. Adapts to project theme and tech stack. Use when implementing UI, choosing colors, creating animations, or ensuring brand consistency. For new design systems, use ui-research skill first.
Design system reference adapting to any project's visual language.
When creating a NEW design system (not following an existing one):
Skill(ui-research) # Research modern patterns first
References:
Use for:
Don't use when:
generic-ux-designergeneric-feature-developergeneric-code-reviewer| Situation | Action | | ---------------------- | --------------------------------------- | | Existing design system | Follow it strictly | | No design system | Use this skill to establish foundations | | Partial system | Identify gaps, extend consistently |
| Layer | Example | Purpose |
| --------- | --------------------- | ---------- |
| Primitive | --color-blue-500 | Raw values |
| Semantic | --color-primary | Meaning |
| Component | --button-background | Context |
Decision: Use semantic tokens in code, primitive tokens as foundation only.
Every project should define:
| Use Case | Minimum | | ------------- | ---------- | | Body text | 4.5:1 (AA) | | Large text | 3:1 (AA) | | UI components | 3:1 (AA) |
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "SF Mono", Monaco, "Courier New", monospace;
| Name | Size | Use | | ---- | ---- | --------------- | | sm | 14px | Secondary text | | base | 16px | Body text | | lg | 18px | Lead paragraphs | | xl | 20px | Section headers | | 2xl | 24px | Page headers |
Base unit: 4px or 8px
| Token | 4px Base | Use | | ----- | -------- | ------------- | | 1 | 4px | Tight spacing | | 2 | 8px | Default gap | | 4 | 16px | Card padding | | 6 | 24px | Page margins |
DO animate: transform, opacity
AVOID: width, height, top, left, margin, padding
| Token | Duration | Use | | ------- | -------- | ------------------ | | fast | 100ms | Micro-interactions | | DEFAULT | 200ms | Most transitions | | slow | 300ms | Complex animations |
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
| State | Visual Treatment | Example | | -------- | ----------------- | ----------------------- | | Default | Base styling | Normal button | | Hover | Subtle feedback | Lighter/darker bg | | Active | Pressed state | Scaled down slightly | | Focus | Visible outline | 2px ring, offset | | Disabled | Reduced opacity | 50% opacity, no pointer | | Loading | Spinner/skeleton | Button with spinner | | Error | Destructive color | Red border/text |
| Variant | Use | Min Size | | ----------- | ------------------- | -------- | | Primary | Main actions | 44x44px | | Secondary | Alternative actions | 44x44px | | Ghost | Subtle actions | 44x44px | | Destructive | Delete actions | 44x44px |
| Token | Min Width | | ----- | --------- | | sm | 640px | | md | 768px | | lg | 1024px | | xl | 1280px |
:root {
--background: #ffffff;
--foreground: #000000;
}
[data-theme="dark"] {
--background: #000000;
--foreground: #ffffff;
}
generic-ux-designer - For UX flow and research decisionsCLAUDE.md - Project-specific design constraintsREAD references when:
npx skills add travisjneuman/generic-design-system下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer