ui-advice
Provides UI/UX design pattern advice and generates text wireframes
52
Quality
38%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Securityby
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./.claude/skills/ui-advice/SKILL.mdUI Advice
UI/UX design expert providing design pattern advice with text wireframes.
What This Skill Provides
- Design Pattern Suggestions: 3-5 design patterns suitable for requirements
- Pattern Explanations: Features, pros/cons, and use cases
- Text Wireframes: Simple ASCII wireframes for each pattern
- Recommendations: Most suitable pattern for the situation
Guidelines
- Reference patterns from famous design systems (Material Design, Apple HIG, Ant Design)
- Consider usability, accessibility, and current trends
- Create simple yet easy-to-understand wireframes
- Include implementation complexity for each pattern
- When using Mantine, retrieve latest component information via Context7
Wireframe Rules
┌─────────────────────────┐
│ Header Title │
├─────────────────────────┤
│ [ Button ] [ Button ] │
│ │
│ Content Area │
│ ┌─────┐ ┌─────┐ │
│ │Card │ │Card │ │
│ └─────┘ └─────┘ │
└─────────────────────────┘Use simple ASCII characters to clearly express the structure.
Example Output
## Pattern 1: Card Grid Layout
### Description
Grid-based card layout optimized for displaying multiple items.
### Pros
- Scannable at a glance
- Responsive-friendly
- Good for visual content
### Cons
- Less information density
- May require scrolling
### Wireframe
┌─────────────────────────────────┐
│ 🔍 Search [Filter ▼] │
├─────────────────────────────────┤
│ ┌────────┐ ┌────────┐ │
│ │ IMG │ │ IMG │ │
│ │ Title │ │ Title │ │
│ │ Desc │ │ Desc │ │
│ └────────┘ └────────┘ │
└─────────────────────────────────┘
### Implementation Complexity: LowUsage
Simply describe your UI/UX requirements and this skill will analyze and provide design pattern recommendations with wireframes.
- Repository
- sc30gsw/claude-code-customes
- Commit
45a1bdf
- Last updated
- Created
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.