npx claudepluginhub nguyenthienthanh/aura-frog --plugin aura-frogThis skill uses the workspace's default tool permissions.
**Category:** Reference Skill
Creates UI/UX designs, wireframes, design systems; applies user research, accessibility standards, design tokens, component libraries for inclusive interfaces and user flows.
Builds accessible, responsive, performant frontend components using design systems, modern CSS, WCAG patterns, and React/Vue/Svelte examples.
Guides building design systems with tokens (typography, colors, spacing, shadows), components, documentation, governance, and best practices. Use for UI consistency across teams.
Share bugs, ideas, or general feedback.
Category: Reference Skill Used By: frontend agent
| File | Purpose |
|---|---|
component-design.md | Atomic design, component anatomy, specs |
design-system.md | Design tokens, theming, consistency |
responsive-design.md | Mobile-first, breakpoints, layouts |
figma-analysis.md | Figma file analysis techniques |
Atomic Design:
Atoms → Molecules → Organisms → Templates → Pages
Design Tokens:
Responsive Breakpoints:
For implementation with specific design system libraries, use:
Design System Library: skills/design-system-library/
| System | File |
|---|---|
| Material UI | material-ui.md |
| Ant Design | ant-design.md |
| Tailwind CSS | tailwind-css.md |
| shadcn/ui | shadcn-ui.md |
| Chakra UI | chakra-ui.md |
| NativeWind | nativewind.md |
| Bootstrap | bootstrap.md |
| Mantine | mantine.md |
| Radix UI | radix-ui.md |
| Headless UI | headless-ui.md |
Load sub-skills as needed for detailed guidance.