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.
This description is essentially a comma-separated list of style-related keywords with no verbs, no actions, and no guidance on when to use the skill. It fails to communicate what the skill does or when Claude should select it, making it very weak for skill selection among a large pool of options.
Suggestions
Add concrete action verbs describing what the skill does, e.g., 'Creates web UI components with glassmorphism styling, Tailwind CSS classes, dark mode support, and WCAG-compliant accessibility.'
Add an explicit 'Use when...' clause with trigger scenarios, e.g., 'Use when the user asks for a web interface, landing page, dashboard, or UI component with modern glass-style aesthetics or Tailwind-based styling.'
Include common user-facing synonyms and file types to improve trigger coverage, e.g., 'frontend, HTML, CSS, web page, card, modal, frosted glass effect, .html'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description lists style keywords (glassmorphism, Tailwind, dark mode, accessibility) but does not describe any concrete actions. There are no verbs indicating what the skill does—it reads more like a tag list than a capability description. | 1 / 3 |
Completeness | There is no explicit 'what does this do' (no actions described) and no 'when should Claude use it' clause. Both dimensions are missing or extremely weak, making this essentially a keyword fragment rather than a description. | 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 design', 'frontend', 'CSS', 'responsive', 'component', or 'web app'. Coverage is partial. | 2 / 3 |
Distinctiveness Conflict Risk | 'Glassmorphism' is a fairly distinctive trigger term, but 'Web UI', 'Tailwind', 'dark mode', and 'accessibility' are broad enough to overlap with many frontend/UI skills. The lack of specificity about what the skill actually does 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 clear accessibility rules. Its main weaknesses are redundancy between sections (contrast rules appear twice), excessive length for a single SKILL.md without progressive disclosure to supporting files, and a lack of explicit validation workflows for ensuring WCAG compliance beyond 'check contrast.'
Suggestions
Extract detailed component patterns (buttons, cards, inputs, loading states) into a separate COMPONENTS.md and reference it from the main skill to reduce length and improve progressive disclosure.
Remove the duplicated accessibility/contrast content in the later 'Accessibility' section since it's already covered comprehensively in the mandatory WCAG section at the top.
Add a concrete validation workflow: e.g., 'Run `npx @axe-core/cli <url>` or use browser DevTools Lighthouse audit → fix reported issues → re-run until 0 violations' to provide an explicit verify-fix-retry loop for accessibility compliance.
| 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 section and 'Premium Feel Checklist' add marginal value for Claude. However, most content is structured as code examples and reference tables rather than verbose prose, which keeps it reasonably efficient. | 2 / 3 |
Actionability | The skill provides fully executable TSX/TypeScript code for every component pattern (buttons, cards, inputs, glass effects, loading states, layouts). Specific Tailwind classes, exact contrast ratios, and concrete do/don't examples make this highly copy-paste ready and actionable. | 3 / 3 |
Workflow Clarity | The skill is primarily a reference/pattern library rather than a multi-step workflow, but it does describe processes like dark mode implementation and design decisions without explicit validation checkpoints. The mandatory WCAG section says to 'test BOTH modes before shipping' but provides no concrete validation steps (e.g., specific tools or commands to run contrast checks). For a skill involving accessibility compliance, the lack of a verify-fix-retry loop is a 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 accessibility rules could benefit from being split into separate reference files. For a skill of this length, inline everything reduces navigability. | 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 | |
7e5f7a2
Table of Contents
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.