CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-conventions

Frontend change conventions for apps/web — i18n (bilingual keys), dark mode (the highest-frequency rework source), theming inline SVG/chart colors, loading/empty/error states. Use for any UI change.

73

Quality

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

87%Weight 40%Scale 1-3

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

A lean, highly actionable conventions skill that assumes Claude's competence and points to concrete precedents and patterns. Its main gap is verification: only one rule has an explicit checkpoint and no feedback loop is specified for the batch-like UI diff workflow.

Suggestions

Add a pre-commit verification checklist covering all rule families (e.g. grep for lone light classes, assert the key exists in both locale files, confirm loading/empty/error states render) rather than only the dark-mode grep.

Provide a short validate→fix→retry loop for the highest-risk rule (e.g. dark mode: grep diff, add missing dark: counterparts, re-grep until clean) to raise workflow clarity.

Optionally split the inline-SVG/chart theming pattern and precedent list into a reference file if the conventions grow beyond ~50 lines.

DimensionReasoningScore

Conciseness

The body is dense and assumes Claude's intelligence — it never explains what i18n, dark mode, or React Query are — and every line states a specific rule; the short rationale asides earn their place by encoding priority and provenance.

3 / 3

Actionability

Provides concrete file paths, an executable useTheme/resolvedTheme snippet, a concrete grep command ("bg-white|bg-.*-50|text-gray-"), and specific class/token names — copy-paste-ready guidance rather than vague direction.

3 / 3

Workflow Clarity

Rules are organized as checklists, but only the lone-light-class rule has an explicit verification checkpoint (the diff grep); the both-locales, three-states, and memo-comparator rules lack verification steps and there is no validate→fix→retry feedback loop, matching the "validation gaps" anchor.

2 / 3

Progressive Disclosure

At roughly 40 lines with no need for external references, the content is split into clearly labeled sections (i18n, Dark mode, Three states, Data layer, Components), satisfying the under-50-lines well-organized-sections guideline.

3 / 3

Total

11

/

12

Passed

Description

92%Weight 40%Scale 1-3

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 strong, concise third-person description with an explicit trigger and specific named capabilities, scoped clearly to apps/web. Its only weakness is the somewhat broad "any UI change" trigger, which raises mild overlap risk with other frontend skills.

Suggestions

Tighten the trigger to reduce overlap, e.g. "Use for any visual or UI change in apps/web" or list triggering intents ("add/translate a string", "add or fix dark mode", "add a chart or data view").

Consider adding a couple of user-natural phrasings (e.g. "translate", "add dark mode support") alongside the technical terms to broaden trigger coverage.

DimensionReasoningScore

Specificity

Enumerates multiple concrete sub-areas — "i18n (bilingual keys)", "dark mode", "theming inline SVG/chart colors", "loading/empty/error states" — matching the anchor for listing multiple specific concrete capabilities.

3 / 3

Completeness

States what (frontend change conventions with named sub-areas) and an explicit when ("Use for any UI change"), so it is not capped at 2 by the missing-trigger guideline.

3 / 3

Trigger Term Quality

Includes natural terms a user would say — "UI change", "frontend", "i18n", "dark mode", "theming" — giving good coverage rather than just a few relevant keywords.

3 / 3

Distinctiveness Conflict Risk

The apps/web scoping gives a clear niche, but the broad trigger "Use for any UI change" could still overlap with general frontend or styling skills, matching the "could still overlap" anchor.

2 / 3

Total

11

/

12

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
foru17/neko-master
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.