ui-web
Web UI - glassmorphism, Tailwind, dark mode, accessibility
53
43%
Does it follow best practices?
Impact
Pending
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.
This description is essentially a comma-separated list of buzzwords with no verbs, no concrete actions, and no usage guidance. While it hints at a visual design niche (glassmorphism + Tailwind), it fails to communicate what the skill actually does or when Claude should select it. It would be easily confused with other frontend/UI skills.
Suggestions
Rewrite with concrete action verbs describing what the skill does, e.g., 'Generates glassmorphism-styled web UI components using Tailwind CSS with dark mode support and WCAG-compliant accessibility.'
Add an explicit 'Use when...' clause with trigger scenarios, e.g., 'Use when the user asks for frosted-glass UI designs, Tailwind-based dark mode layouts, or accessible web components.'
Include additional natural trigger terms users might say, such as 'frosted glass', 'CSS', 'frontend', 'responsive', 'HTML', 'web components', or 'UI design'.
| 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 | There is no explicit 'what does this do' beyond a vague domain hint ('Web UI'), and there is no 'when should Claude use it' clause at all. Both halves are weak or missing. | 1 / 3 |
Trigger Term Quality | It includes some relevant keywords a user might mention—'Tailwind', 'dark mode', 'glassmorphism', 'accessibility'—but misses common variations like 'UI components', 'frontend', 'CSS', 'responsive design', 'web app', or 'HTML'. | 2 / 3 |
Distinctiveness Conflict Risk | 'Glassmorphism' is fairly distinctive, but 'Web UI' and 'Tailwind' are broad enough to overlap with many frontend/CSS skills. The lack of specific actions makes it harder to distinguish from other web design skills. | 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 strong, highly actionable UI design skill with excellent concrete examples and copy-paste-ready Tailwind/React components. Its main weaknesses are redundancy between the mandatory WCAG section and the later accessibility section, the monolithic structure that could benefit from splitting detailed component patterns into separate reference files, and the lack of a concrete validation workflow for verifying accessibility compliance.
Suggestions
Consolidate the duplicate accessibility/contrast content—merge the later 'Accessibility' section into the mandatory WCAG section or remove the redundancy to save tokens.
Add a concrete validation workflow: e.g., 'After building UI, run `npx axe-cli` or check contrast in browser DevTools > Accessibility panel' with explicit pass/fail criteria.
Split detailed component patterns (Buttons, Cards, Inputs, Loading States) into a separate COMPONENTS.md reference file, keeping only the most essential patterns inline.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is quite long (~400+ lines) with some redundancy—accessibility/contrast rules appear in both the mandatory section and a later 'Accessibility' section. Some content like the design philosophy and anti-patterns sections add value but could be tighter. However, it mostly avoids explaining things Claude already knows. | 2 / 3 |
Actionability | Excellent actionability throughout—nearly every section includes copy-paste-ready TSX/Tailwind code with complete component implementations. Specific contrast ratios, exact Tailwind classes, and concrete do/don't examples make this highly executable. | 3 / 3 |
Workflow Clarity | This is primarily a reference/pattern skill rather than a multi-step workflow, so strict sequencing is less critical. However, there's no validation workflow—no steps for checking contrast compliance, no testing checklist sequence, and the mandatory WCAG section lacks a verification process (e.g., 'run this tool to check contrast'). | 2 / 3 |
Progressive Disclosure | The content is well-organized with clear section headers and logical grouping, but it's monolithic—everything is in one large file with no references to external files for detailed content like the full component library or advanced patterns. The 'Load with: base.md + react-web.md' hint suggests a multi-file system exists but isn't leveraged for splitting this content. | 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 (638 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
d4ddb03
- 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.