CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-advice

Provides UI/UX design pattern advice and generates text wireframes

Install with Tessl CLI

npx tessl i github:sc30gsw/claude-code-customes --skill ui-advice
What are skills?

52

Review — 38%

Does it follow best practices?

Validation — 11 / 11 Passed

Validation for skill structure

SKILL.md
Review
Evals

UI Advice

UI/UX design expert providing design pattern advice with text wireframes.

What This Skill Provides

  1. Design Pattern Suggestions: 3-5 design patterns suitable for requirements
  2. Pattern Explanations: Features, pros/cons, and use cases
  3. Text Wireframes: Simple ASCII wireframes for each pattern
  4. 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: Low

Usage

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.

Claim skill