メニュー
UI/UX design expertise — component design, design system selection, responsive layout. Includes auto-detection from package.json and Context7 integration for library docs.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/nguyenthienthanh/aura-frog --skill design-expertコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
SOC 職業分類に基づく
| name | design-expert |
| description | UI/UX design expertise — component design, design system selection, responsive layout. Includes auto-detection from package.json and Context7 integration for library docs. |
| autoInvoke | false |
| priority | medium |
| triggers | ["design component","design system","component library","Material UI","Tailwind","shadcn","responsive layout"] |
| user-invocable | false |
AI-consumed reference. Optimized for Claude to read during execution. Human-readable explanation: see docs/architecture/HIERARCHICAL_PLANNING.md or docs/getting-started/ depending on topic.
Component design, design system selection/setup, responsive layouts, Figma analysis.
Read the design SoT first. If .claude/design/design-system.md exists, it is the project's committed
design system — honor its library / palette / type choices instead of re-recommending. Only run the selection
logic below when no SoT file exists yet (then persist the choice — see ).
rules/agent/design-system-persistence.mdprinciples[4]{principle}:
Atomic design: Atoms → Molecules → Organisms → Templates → Pages
Mobile-first: design for smallest then enhance
Design tokens: colors/spacing/typography as variables not magic values
Consistency: one library per project — don't mix
selection[4]{use_case,recommendation}:
Enterprise,"Ant Design, MUI, Mantine"
Modern Web,"Tailwind + shadcn/ui"
Mobile (RN),NativeWind
Prototyping,"Bootstrap, Tailwind"
Detect from package.json: @mui/material → MUI, antd → Ant Design, tailwindcss → Tailwind, @chakra-ui/react → Chakra, nativewind → NativeWind, @mantine/core → Mantine.
Use Context7 for current library docs. Add "use context7" to fetch version-specific API.
Mobile: <768px | Tablet: 768-1024px | Desktop: >1024px
The installed figma MCP is figma-developer-mcp (Framelink) — it exposes get_figma_data
(layout + styles + text + component tree) and download_figma_images. It does not expose the
Dev-Mode-MCP tools get_variable_defs / get_code_connect_map — don't call those; they error on this server.
Treat Figma as a source, not a regenerator:
get_figma_data, read the colors/typography/spacing out of its
style + node data, and feed them INTO the design-tokens skill's OKLCH system + .claude/design/design-system.md
(one source of truth) — never hand-copy hexes into components. Figma styles → --brand-hue/semantic tokens.src/components/ and compose the existing
component if one matches. Regenerating existing components is the #1 source of design-system drift.download_figma_images rather than re-tracing them.