CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

ui-ux-design-standards

UI/UX design standards, accessibility checks (contrast/white-on-white detection), layout grid, typography hierarchy, touch targets, state management, and quality audit guidelines for POSCursor/POS Cursor.

63

Quality

79%

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

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/ui-ux-design-standards/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

This is a strong, highly actionable standards skill: concrete tokens, executable code, a working audit script, and a verification checklist, all well organized. The main weaknesses are minor — some trimmable verbosity, a missing explicit re-run loop in the audit workflow, and reference detail (color token matrix, status pill specs) inlined in SKILL.md that could live in a separate reference file.

DimensionReasoningScore

Conciseness

The body is dense, token-efficient reference material — anti-pattern tables, exact hex/class tokens, and code snippets — that assumes Claude's competence without explaining what WCAG or Tailwind is. A few explanatory phrases ('To deliver a premium visual and interactive experience:') and some redundancy between the anti-pattern table and the final checklist could be trimmed, keeping it just below a 5.

4 / 5

Actionability

Guidance is fully executable: copy-paste-ready TSX snippets (typography scale, Pressable with accessibility attributes), exact Tailwind class tokens and hex values in the color matrix, a concrete runnable command ('node scripts/audit-ui-contrast.js') that exists in the bundle, and a specific PR verification checklist. The common cases (contrast, dark mode pairs, touch targets, states) are all covered concretely.

5 / 5

Workflow Clarity

The audit workflow and the PR checklist provide a clear sequence with explicit verification checkpoints, and the anti-pattern table's 'Correct Alternative' column covers remediation. Not 5 because there is no explicit fix-and-rerun feedback loop after the audit script reports violations — re-running until 0 HIGH severity violations is only implied by the checklist.

4 / 5

Progressive Disclosure

The body is well organized into 9 clear sections, and its single bundle reference (scripts/audit-ui-contrast.js) is real, correctly pathed, and clearly signaled with usage context. Not 5 because the document is ~190 lines of inline reference detail (e.g., the full approved color token matrix and status pill specs) that could arguably be split into a references/ file to keep SKILL.md as a leaner overview.

4 / 5

Total

17

/

20

Passed

Description

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

The description is specific and well-scoped to its project, with good natural keyword coverage, but it is a 'what-only' description. It lacks any 'Use when...' trigger guidance, which both caps completeness and weakens its usefulness for skill selection. Adding explicit trigger conditions and a few more natural synonyms (e.g., 'design review', 'dark mode', 'WCAG') would raise it substantially.

Suggestions

Add a 'Use when...' clause, e.g., 'Use when building or reviewing UI screens, performing design/UX reviews, or checking dark mode contrast in POSCursor/POS Cursor.'

Include natural trigger synonyms users would actually say, such as 'design review', 'dark mode', 'WCAG compliance', and 'UI audit'.

Clarify ambiguous capability wording, e.g., replace 'state management' with 'UI state coverage (loading/empty/error states)'.

DimensionReasoningScore

Specificity

The description lists several specific capability areas — 'accessibility checks (contrast/white-on-white detection)', 'layout grid', 'typography hierarchy', 'touch targets', 'state management' — with minor gaps in coverage. It falls short of 5 because it uses noun-phrase topics rather than concrete action verbs, and 'state management' is ambiguous (app state vs. UI states).

4 / 5

Completeness

It has a clear 'what' (design standards, accessibility checks, audit guidelines) but no 'Use when...' clause or equivalent explicit trigger guidance; the trailing 'for POSCursor/POS Cursor' only weakly implies when to use it. Per the judging guidelines, a missing 'Use when' clause caps completeness at 3.

3 / 5

Trigger Term Quality

Good keyword coverage with natural terms users would say ('UI/UX design standards', 'accessibility', 'contrast', 'typography', 'touch targets'). Not 5 because common variations and synonyms are missing, such as 'design review', 'dark mode', 'WCAG', or 'design audit'.

4 / 5

Distinctiveness Conflict Risk

The 'for POSCursor/POS Cursor' scoping establishes a clear niche, minimizing conflict risk with other skills. Not 5 because the leading generic terms ('UI/UX design standards', 'accessibility checks') create minor overlap risk with general UI/design skills.

4 / 5

Total

15

/

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

zazakia/JetFarm

Path

.agents/skills/ui-ux-design-standards/SKILL.md

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.