ui-component-patterns
Build reusable, maintainable UI components following modern design patterns. Use when creating component libraries, implementing design systems, or building scalable frontend architectures. Handles React patterns, composition, prop design, TypeScript, and component best practices.
Install with Tessl CLI
npx tessl i github:supercent-io/skills-template --skill ui-component-patterns77
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 both purpose and trigger conditions. Its main strengths are the explicit 'Use when...' clause and good trigger term coverage. The description could be improved by listing more concrete actions (e.g., 'create compound components', 'implement render props') and narrowing scope to reduce potential overlap with general React or frontend skills.
Suggestions
Add more specific concrete actions like 'create compound components, implement render props, design accessible interfaces' to improve specificity
Consider narrowing the scope or adding distinguishing details to differentiate from general React/frontend skills (e.g., focus on specific patterns like 'headless components' or 'atomic design')
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI components) and mentions some actions/concepts like 'React patterns, composition, prop design, TypeScript', but these are more categories than concrete actions. Lacks specific verbs like 'create', 'refactor', 'implement X pattern'. | 2 / 3 |
Completeness | Clearly answers both what ('Build reusable, maintainable UI components', 'Handles React patterns, composition, prop design, TypeScript') AND when ('Use when creating component libraries, implementing design systems, or building scalable frontend architectures'). | 3 / 3 |
Trigger Term Quality | Good coverage of natural terms users would say: 'component libraries', 'design systems', 'frontend architectures', 'React', 'TypeScript', 'component', 'UI components', 'prop design'. These are terms developers naturally use when seeking this help. | 3 / 3 |
Distinctiveness Conflict Risk | While it specifies UI components and React, it could overlap with general React skills, TypeScript skills, or frontend development skills. The focus on 'design systems' and 'component libraries' helps but 'frontend architectures' is broad. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
64%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a solid, actionable skill with excellent executable code examples covering multiple React component patterns. The main weaknesses are verbosity (metadata section, explanatory headers) and lack of validation steps in the workflow. The content would benefit from trimming unnecessary sections and potentially splitting advanced examples into separate files.
Suggestions
Remove the Metadata section (version, platform compatibility, tags) as this information belongs in YAML frontmatter, not the skill body
Add validation checkpoints to the workflow, such as 'Test component renders correctly' or 'Verify TypeScript types compile' between steps
Consider moving the detailed Accordion and Polymorphic Component examples to a separate EXAMPLES.md file, keeping only the core patterns (Button, Card, Modal) in the main skill
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly efficient with good code examples, but includes some unnecessary sections like the Metadata block with version info and platform compatibility, and the 'When to use this skill' section explains concepts Claude already understands. | 2 / 3 |
Actionability | Excellent executable code examples throughout - Button, Card, Dropdown, Modal, Accordion, and Polymorphic components are all complete, copy-paste ready TypeScript/React code with clear usage examples. | 3 / 3 |
Workflow Clarity | The 5-step process (Props API → Composition → Render Props → Custom Hooks → Performance) provides a logical sequence, but lacks validation checkpoints or feedback loops for verifying component correctness during development. | 2 / 3 |
Progressive Disclosure | Content is well-structured with clear sections, but the skill is quite long (~350 lines) and could benefit from splitting detailed examples into separate reference files. The References section links to external resources but not to internal detailed docs. | 2 / 3 |
Total | 9 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (527 lines); consider splitting into references/ and linking | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 9 / 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.