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-advice52
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
32%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
The description provides a basic understanding of the skill's domain but is too brief and lacks explicit trigger guidance. It names two capabilities without elaborating on their scope, and the absence of a 'Use when...' clause makes it difficult for Claude to know when to select this skill over others.
Suggestions
Add a 'Use when...' clause with trigger terms like 'wireframe', 'mockup', 'UI design', 'layout', 'user interface', 'screen design'
Expand the capabilities list to be more specific, e.g., 'Generates ASCII/text-based wireframes for web and mobile layouts, recommends component placement, suggests navigation patterns'
Include common user phrasings like 'sketch out a page', 'design a screen', 'plan the interface' to improve trigger term coverage
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI/UX design) and two actions (provides advice, generates wireframes), but lacks comprehensive detail about what specific advice or wireframe capabilities are offered. | 2 / 3 |
Completeness | Describes what the skill does but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. | 1 / 3 |
Trigger Term Quality | Includes relevant terms like 'UI/UX', 'design pattern', and 'wireframes' that users might say, but misses common variations like 'mockup', 'prototype', 'layout', 'user interface', or 'user experience'. | 2 / 3 |
Distinctiveness Conflict Risk | 'Text wireframes' is somewhat distinctive, but 'design pattern advice' is broad and could overlap with general coding/architecture skills or other design-related skills. | 2 / 3 |
Total | 7 / 12 Passed |
Implementation
44%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides a reasonable template for UI/UX advice output format with good wireframe examples, but lacks actionable workflow guidance. It tells Claude what to produce rather than how to analyze and decide. The content describes capabilities rather than providing concrete decision-making instructions.
Suggestions
Add a concrete workflow: 1) Extract key requirements (list what to identify), 2) Match against pattern criteria (provide decision matrix), 3) Generate wireframes, 4) Recommend based on specific factors
Replace vague guidelines like 'Consider usability, accessibility' with specific checkpoints: 'Verify pattern supports keyboard navigation, check color contrast requirements, ensure touch targets are 44px minimum'
Remove the 'What This Skill Provides' section - this describes output rather than instructing. Convert to actionable steps instead
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is reasonably efficient but includes some unnecessary sections like 'What This Skill Provides' which describes what Claude will do rather than instructing it. The guidelines and example are useful but could be tighter. | 2 / 3 |
Actionability | Provides a concrete wireframe format and example output structure, but lacks executable guidance. The 'Guidelines' are vague directives ('Consider usability') rather than specific instructions. No concrete steps for how to analyze requirements or select patterns. | 2 / 3 |
Workflow Clarity | No clear workflow or sequence is defined. The skill describes what outputs to produce but not the process to follow. Missing steps like: 1) Analyze requirements, 2) Identify constraints, 3) Select patterns, 4) Generate wireframes. The 'Usage' section just says 'describe requirements.' | 1 / 3 |
Progressive Disclosure | For a skill of this size (~60 lines), the structure is appropriate. Clear sections for guidelines, wireframe rules, and example output. No unnecessary external references or deeply nested content. Well-organized for a self-contained skill. | 3 / 3 |
Total | 8 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Reviewed
Table of Contents
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.