ui-web
Web UI - glassmorphism, Tailwind, dark mode, accessibility
42
43%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/ui-web/SKILL.mdQuality
Discovery
22%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 is essentially a comma-separated list of keywords with no verb-driven actions and no 'Use when...' guidance. While it contains some distinctive terms like 'glassmorphism', it fails to communicate what the skill actually does or when Claude should select it, making it inadequate for reliable skill selection among many options.
Suggestions
Rewrite using action verbs in third person, e.g., 'Generates web UI components with glassmorphism styling, Tailwind CSS classes, dark mode support, and WCAG-compliant accessibility.'
Add an explicit 'Use when...' clause, e.g., 'Use when the user requests a web interface, landing page, or UI component with modern glass-effect styling, Tailwind utilities, dark/light theme toggling, or accessibility requirements.'
Include additional natural trigger terms users might say, such as 'frontend', 'CSS', 'responsive', 'web page', 'UI design', 'frosted glass effect', or 'ARIA attributes'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description lists style keywords (glassmorphism, Tailwind, dark mode, accessibility) but does not describe any concrete actions like 'creates', 'generates', or 'styles'. It reads as a tag list rather than a capability description. | 1 / 3 |
Completeness | The description partially hints at 'what' (Web UI with certain styles) but is extremely terse and lacks any 'when' clause or explicit trigger guidance. Per the rubric, a missing 'Use when...' clause caps completeness at 2, and the 'what' is also very weak, warranting a 1. | 1 / 3 |
Trigger Term Quality | Terms like 'Tailwind', 'dark mode', 'glassmorphism', and 'accessibility' are relevant keywords a user might mention, but common variations like 'UI components', 'frontend', 'CSS', 'responsive design', or 'web components' are missing. | 2 / 3 |
Distinctiveness Conflict Risk | 'Glassmorphism' is a fairly distinctive trigger term, but 'Web UI' and 'Tailwind' are broad enough to overlap with many frontend or CSS-related skills. The lack of explicit scoping increases conflict risk. | 2 / 3 |
Total | 6 / 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 comprehensive, highly actionable UI design reference with excellent concrete code examples and strong accessibility guidance. Its main weaknesses are redundancy between sections (contrast rules appear twice), lack of a verification/testing workflow despite emphasizing WCAG compliance as critical, and being monolithic when the volume of content would benefit from progressive disclosure across multiple files.
Suggestions
Add an explicit verification workflow for accessibility: e.g., 'After implementing, run `npx axe-core` or use Chrome DevTools Lighthouse audit → fix failures → re-check' to close the feedback loop on WCAG compliance.
Consolidate the duplicate contrast/accessibility content—the MANDATORY section and the later Accessibility section repeat the same rules. Keep the mandatory section concise and remove the redundant later section.
Split into multiple files: keep SKILL.md as an overview with quick-start patterns, and move detailed component patterns to COMPONENTS.md, color system to COLORS.md, and glassmorphism details to GLASS.md with clear references.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is quite long (~400+ lines) with some redundancy—accessibility/contrast rules are stated in the mandatory section and then repeated in the Accessibility section. Some content like the anti-patterns list and 'Common Mistakes' overlap. However, most content is code examples rather than prose explanation, and it avoids explaining basic concepts Claude already knows. | 2 / 3 |
Actionability | Excellent actionability throughout—nearly every section provides copy-paste ready TSX/Tailwind code with complete component implementations. Specific contrast ratios, exact Tailwind classes, concrete color pairings, and fully executable component patterns (buttons, cards, inputs, skeletons, spinners) are all provided. | 3 / 3 |
Workflow Clarity | The skill is primarily a reference/pattern library rather than a multi-step workflow, but it lacks explicit validation steps—there's no guidance on how to verify contrast ratios after implementation, no testing workflow, and no feedback loop for checking WCAG compliance. For a skill that marks accessibility as 'NON-NEGOTIABLE' and 'CRITICAL', the absence of a verification process (e.g., 'run axe-core', 'check with browser devtools') is a notable gap. | 2 / 3 |
Progressive Disclosure | The content is well-organized with clear section headers and logical grouping, but it's a monolithic file with no references to external files for detailed content. The glassmorphism variants, full component library, color system, and layout patterns could be split into separate reference files, keeping SKILL.md as a concise overview with pointers. | 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 (637 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 | |
- Repository
- alinaqi/claude-bootstrap
- Commit
65efb33
- 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.