CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-development

Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices.

58

Quality

66%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./frontend/.claude/skills/ui-development/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

72%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A lean, high-signal body with genuinely actionable rules (specific MCP tools, exact class names, a well-reasoned [upstream] marking procedure). The weaknesses are a skeletal two-step workflow with no install or verification steps, and a progressive-disclosure layer whose referenced detail files are missing from the bundle and whose paths are inconsistent (flat .md names vs. 'rules/').

Suggestions

Complete the workflow: add the install step with the actual CLI command, a build/use step, and a verification step (e.g., typecheck or visual check) so the sequence covers the full task.

Fix the reference layer: create the referenced files (or correct the paths) and pick one location convention — the Quick Reference table's flat filenames and the 'See rules/ directory' line currently disagree.

Replace 'Install components via CLI' with the concrete command (e.g., the actual registry CLI invocation) so the primary action is executable.

DimensionReasoningScore

Conciseness

The body is lean and imperative throughout — a Quick Reference table, terse ALWAYS/NEVER lists, and specific banned class names (`bg-gray-100`, `text-sm`, `text-error`) — with no padding and no explanation of concepts Claude already knows (e.g., no 'what is Tailwind' text). Matches 'Lean and efficient; assumes Claude's competence; every token earns its place'; even the [upstream] rationale is operational, not educational.

5 / 5

Actionability

Mostly concrete: exact MCP tool names (`mcp__redpanda-ui__search-docs`, `mcp__redpanda-ui__get_component`), an executable `ls src/components/redpanda-ui/` command, `git grep '\[upstream\]'`, and precise class-name rules. Not a 5 because 'Install components via CLI' gives no actual command, and there is no example of correctly composing a component with tokens/variants, so the most common action (install + use) is not copy-paste ready.

4 / 5

Workflow Clarity

A two-step sequence exists ('1. Fetch Documentation' with a FIRST directive, '2. Check Existing Components' with a command), but it is skeletal: the install, build/apply, and verify steps are missing and there are no validation checkpoints — matching 'Steps listed but validation gaps; sequence present but checkpoints missing or implicit'. Not a 2 because the steps that are listed are well-defined and sequenced; not a 4 because the gaps are more than minor.

3 / 5

Progressive Disclosure

Structure is good — a Quick Reference table mapping actions to files — but every referenced file (`use-ui-registry.md`, `style-use-variants.md`, `style-use-tokens.md`, `registry-upgrade.md`, `icon-system.md`) and the 'rules/' directory is absent from the bundle, and the referenced locations are inconsistent (loose .md filenames vs. a 'rules/' directory). This matches 'Some structure but could be better organized; references present but not clearly signaled' in the sense that navigation is currently unresolvable. Not a 4 because well-signaled references that don't exist cannot count as appropriately placed.

3 / 5

Total

15

/

20

Passed

Description

61%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A concise, third-person description that clearly states what the skill does and anchors a distinct niche (Redpanda Registry + Tailwind v4 + accessibility). Its main gap is the missing 'Use when...' trigger guidance, and its keyword coverage, while good, omits common variations like 'design system', 'frontend', and 'React'.

Suggestions

Append an explicit trigger clause, e.g. 'Use when building or modifying UI components, pages, or frontend code that uses the Redpanda Registry, or when the user mentions the design system, registry, or Tailwind.'

Add natural synonyms users would say ("design system", "frontend", "React") to broaden trigger-term coverage without lengthening the description much.

Optionally name one more concrete capability (e.g., installing/upgrading registry components) to lift specificity from one action to several.

DimensionReasoningScore

Specificity

"Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices" names the domain plus one concrete action (build UI) with concrete technologies, but offers no other actions (install, customize, upgrade) — matching the anchor 'Names domain and 1-2 concrete actions, but not comprehensive'. It is not a 4 because it lists only one action, and not a 2 because the technologies named are concrete rather than generic.

3 / 5

Completeness

The 'what' is clear (build UI with Redpanda Registry components, Tailwind v4, accessibility), but there is no 'Use when...' clause or equivalent explicit trigger guidance, which per the judging guidelines caps completeness at 3. It is not a 2 because the 'what' is specific and complete in itself; it cannot be a 4 without any 'when' element.

3 / 5

Trigger Term Quality

Natural terms users would say are present — "Build UI", "components", "Tailwind v4", "accessibility" — comparable in coverage to the anchor example 'PDF files, forms, document extraction'. Not a 5 because common variations users would naturally say ("design system", "frontend", "React", "pages") are absent; not a 3 because several relevant, genuinely natural keywords are included rather than only technical jargon.

4 / 5

Distinctiveness Conflict Risk

"Redpanda Registry" is an organization-specific niche with distinct, uncommon triggers, so overlap risk with other skills is minor — matching 'Mostly distinct; minor overlap risk with closely related skills' (e.g., a generic Tailwind or frontend skill). Not a 5 because without a 'when' clause, generic 'Build UI' phrasing could still pull it into unrelated frontend requests.

4 / 5

Total

14

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
redpanda-data/console
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.