ReddRadar
Agent skill
design-expert
UI/UX design expertise - component design, design systems, responsive design, Figma analysis
Install this agent skill to your Project
npx add-skill https://github.com/nguyenthienthanh/aura-frog/tree/main/aura-frog/skills/design-expert
SKILL.md
Skill: Design Expert
Category: Reference Skill Used By: frontend agent
Sub-Skills
| 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 |
When to Use
- Phase 3 (UI Breakdown) - Component design decisions
- UI/UX design tasks
- Design system setup
- Responsive layout planning
Quick Reference
Atomic Design:
Atoms → Molecules → Organisms → Templates → Pages
Design Tokens:
- Colors, spacing, typography, shadows, borders
Responsive Breakpoints:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
Related Skills
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
nguyenthienthanh/aura-frog
scalable-thinking
Design for scale while keeping implementation simple (KISS).
nguyenthienthanh/aura-frog
debugging
Systematic debugging with root cause investigation. NO fixes without understanding cause first.
nguyenthienthanh/aura-frog
migration-helper
Guide safe database and code migrations with zero-downtime strategies.
nguyenthienthanh/aura-frog
testing-patterns
Unified testing patterns across all frameworks. Provides consistent test structure, naming, and best practices for Jest, Vitest, Pytest, PHPUnit, Go testing, and more.
nguyenthienthanh/aura-frog
phase1-lite
Ultra-compact Phase 1 requirements output. HARD CAP: 500 tokens.
nguyenthienthanh/aura-frog
stitch-design
Generate UI designs using Google Stitch AI with optimized prompts
Didn't find tool you were looking for?