frontend-design
Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
Install with Tessl CLI
npx tessl i github:lchenrique/politron-ide --skill frontend-design79
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
82%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a solid description that clearly communicates its purpose and includes explicit trigger guidance. The main weakness is that it describes categories of design work rather than specific actions Claude can perform. The clarification about teaching principles rather than fixed values is helpful for setting expectations.
Suggestions
Replace category nouns with action verbs to improve specificity (e.g., 'Guides component design decisions, recommends color palettes, evaluates typography choices').
Add more distinctive triggers to reduce overlap with CSS/frontend skills (e.g., 'design rationale', 'visual hierarchy', 'UX decisions').
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (web UI design) and lists several areas (components, layouts, color schemes, typography, aesthetic interfaces), but these are categories rather than concrete actions. Missing specific verbs like 'create', 'analyze', 'generate'. | 2 / 3 |
Completeness | Clearly answers both what ('Design thinking and decision-making for web UI', 'Teaches principles, not fixed values') and when ('Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces'). | 3 / 3 |
Trigger Term Quality | Good coverage of natural terms users would say: 'designing components', 'layouts', 'color schemes', 'typography', 'aesthetic interfaces'. These are terms users naturally use when seeking UI design help. | 3 / 3 |
Distinctiveness Conflict Risk | Reasonably specific to web UI design, but could overlap with skills focused on CSS, frontend development, or specific frameworks. The 'principles, not fixed values' clarification helps distinguish it somewhat. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
70%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured design thinking skill with excellent progressive disclosure and clear workflow. The main weaknesses are moderate verbosity in explaining concepts Claude likely knows (dark patterns, basic psychology) and a lack of concrete, executable examples - the guidance is principled but abstract. The anti-pattern warnings, while valuable, are repetitive across sections.
Suggestions
Add 1-2 concrete CSS/Tailwind code snippets demonstrating principles (e.g., actual 60-30-10 color implementation, 8-point grid spacing classes)
Consolidate the anti-pattern warnings into a single section rather than repeating across multiple sections
Remove explanations of concepts Claude knows (e.g., what dark patterns are, basic color psychology definitions) and keep only the actionable guidance
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is reasonably efficient with tables and structured content, but includes some unnecessary verbosity like the extensive 'anti-patterns' section explaining what Claude should already know (dark patterns, lazy design indicators) and repetitive warnings about AI tendencies. | 2 / 3 |
Actionability | Provides principles and decision frameworks rather than executable code, which is appropriate for a design skill. However, guidance remains somewhat abstract - tables list concepts but lack concrete examples of actual CSS/component implementations that would be copy-paste ready. | 2 / 3 |
Workflow Clarity | Clear decision process with explicit sequence (Constraints → Content → Style Direction → Execution → Review). The 'ASK BEFORE ASSUMING' section provides clear checkpoints, and the constraint analysis table gives explicit questions to answer before proceeding. | 3 / 3 |
Progressive Disclosure | Excellent structure with clear overview in main file and well-signaled one-level-deep references to specialized files (color-system.md, typography-system.md, etc.). The selective reading table clearly indicates required vs optional files with specific use cases. | 3 / 3 |
Total | 10 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
allowed_tools_field | 'allowed-tools' contains unusual tool name(s) | Warning |
Total | 10 / 11 Passed | |
- 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.