メニュー
Explains how to use the installed Universal Design System skills, pick which ones to use, and add or customize skills in your project. Use when the user asks about getting started with UDS or which skill to use.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | uds-getting-started |
| description | Explains how to use the installed Universal Design System skills, pick which ones to use, and add or customize skills in your project. Use when the user asks about getting started with UDS or which skill to use. |
| version | 0.5.0 |
| triggers | ["uds getting started","how to use uds","which skills are installed","add my own skill","customize uds skills","uds install","use design system skills","pick skills","uds quick start"] |
This skill explains what was installed when you ran uds install (or npx @mkatogui/universal-design-system install) and how to get the most from it: picking skills, using MCP and scripts, and adding or improving skills.
.cursor/skills/, .claude/skills/). The AI uses them when your prompts match their triggers./pre-pr-review, /palette-sync, /a11y-fix, /new-component, /docs-sync, /align-metrics) when supported.search_design_system, get_palette, get_component, generate_tokens, list_palettes, list_components.universal-design-system skill: CSV databases and Python scripts (search, design_system, palette) for local use.tokens/ folder at project root (if not already present) with design token sources.| Skill | When to use |
|---|---|
| universal-design-system (MAIN) | Design system generator — use when the user wants to build, design, or implement any UI (landing page, dashboard, app). Full flow: domain detection → BM25 search → rules → palette, components, patterns, typography, anti-patterns, pre-delivery checklist. Tailwind/React/Vue/Svelte output. |
| brand-identity | Brand systems: color psychology, typography pairings, visual identity rules mapped to UDS palettes. |
| design-audit | Audit UIs for WCAG, contrast, typography, spacing, anti-patterns; scored reports and fixes. |
| ui-styling | Concrete CSS help with UDS tokens: snippets, dark mode, responsive breakpoints, no hardcoded values. |
| slides-design | Presentation design: slide templates, typography, colors mapped to UDS palettes. |
| pre-pr-review | Deep review before PR: TypeScript, lint, tests, SonarCloud-style checks that would run in CI. |
| i18n-and-rtl | RTL and i18n: logical CSS (localization.csv), dir=rtl, text expansion, rtl_mapper.py for existing CSS. |
| figma-handoff | Figma to code: align Figma variables with design-tokens.json, naming conventions, Dev Mode, token sync. |
| component-docs | Component documentation and Storybook: stories, MDX, props tables, usage guidelines from UDS component specs. |
| design-system-governance | Governance and scaling: centralized vs federated, lifecycle, contribution model, multi-team adoption. |
| multi-brand-theming | Customize colors: palette generated from user input (hex). Multi-brand, custom palettes (palette.py), data-theme, white-label UI. |
| ui-spec-prd | UI spec/PRD before building: product type, sector, palette, key components, anti-patterns; design_system.py --persist. |
The AI picks skills by triggers: when the user says things like “design system”, “brand colors”, “accessibility audit”, “button style”, “slides”, or “review before PR”, the matching skill is used. You don’t have to “enable” them one by one; they are all available and the model chooses based on the conversation.
/pre-pr-review, /palette-sync, /a11y-fix, /new-component, /docs-sync, /align-metrics if your IDE supports them.search_design_system, get_palette, get_component, generate_tokens, etc., directly.python3 .cursor/skills/universal-design-system/scripts/search.py "fintech dashboard"python3 .cursor/skills/universal-design-system/scripts/design_system.py "saas landing" --format tailwind.claude/skills/... for Claude Code.).cursor/skills/design-audit if you don’t want the audit skill)..cursor/skills/my-product-brand/SKILL.md). Add a SKILL.md with:
name, description, version, triggers (list of phrases that should invoke this skill).triggers.SKILL.md (e.g. .cursor/skills/universal-design-system/SKILL.md). Add project-specific rules, examples, or constraints. These changes are local to your repo.data/ or scripts/ and reference them in the skill text so the AI knows when to use them.uds install to overwrite with the latest UDS skills; back up any local edits first or merge manually.python3 <skillDir>/universal-design-system/scripts/search.py "your query"python3 <skillDir>/universal-design-system/scripts/design_system.py "product description" [--format tailwind] [--framework react|vue|svelte]/pre-pr-review, /palette-sync, /a11y-fix, /align-metrics, /new-component, /docs-syncsearch_design_system, get_palette, get_component, generate_tokens, list_palettes, list_componentsReplace <skillDir> with your platform’s skill base (e.g. .cursor/skills or .claude/skills).
Generates complete brand identity systems with color psychology, typography pairings, and visual identity rules mapped to Universal Design System palettes. Use when the user asks for brand identity, brand design, brand colors, style guide, or visual identity.
Component documentation and Storybook: stories, MDX, props tables, usage guidelines from UDS component specs.
Audits existing UIs for WCAG accessibility, color contrast, typography hierarchy, spacing consistency, and industry anti-patterns. Generates scored reports with actionable fixes. Use when the user asks for design audit, UI audit, accessibility audit, or design review.
Design system governance and scaling: centralized vs federated, lifecycle, contribution model, multi-team adoption.
Figma to code handoff using UDS tokens. Align Figma variables with design-tokens.json, naming conventions, Dev Mode, and token sync.
Internationalization and right-to-left layout using UDS localization data. Logical CSS properties, dir="rtl", text expansion, and RTL mapper for existing CSS.