CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-web

Web UI - glassmorphism, Tailwind, dark mode, accessibility

42

Quality

43%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/ui-web/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

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'.

DimensionReasoningScore

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.

DimensionReasoningScore

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.

Validation9 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

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
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.