CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

refactoring-ui

Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off", "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.

Quality

91%

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

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

The body is a highly actionable, well-structured reference with exemplary progressive disclosure into five real one-level-deep reference files, and its diagnostic-plus-scoring loop gives the audit workflow clear checkpoints. Its weakness is token efficiency: author bios, affiliate-linked further reading, repeated ethical-boundary boilerplate, and known-concept rationale inflate the file without adding executable value.

Suggestions

Remove the "About the Authors" and "Further Reading" sections (especially the affiliate-tagged Amazon links) — roughly 20 lines that contribute nothing to task execution and directly cost context tokens.

Consolidate the seven per-principle "Ethical boundary" one-liners into a single short dark-patterns note (or move it to a reference file), since they all restate the same "don't use design to hide important information" rule.

Add an explicit ordered fix workflow (e.g., grayscale audit → hierarchy → spacing → color → depth → re-score against the 0-10 scale) so the remediation phase is sequenced as concretely as the diagnostic checklist.

DimensionReasoningScore

Conciseness

The tables and CSS-pattern blocks are dense and earn their tokens, but the file carries noticeable padding: an "About the Authors" section, a "Further Reading" list with affiliate-tagged Amazon links, seven near-identical per-principle "Ethical boundary" one-liners, and "Why it works" rationale explaining design facts Claude largely already knows. Not 4: the non-actionable material is more than "minor instances that could be trimmed"; not 2 because the core guidance itself is tight and tabular rather than padded prose.

3 / 5

Actionability

Guidance is fully concrete throughout: exact scales ("4, 8, 16, 24, 32, 48, 64px"), copy-paste Tailwind utilities ("max-w-prose", "text-gray-700", "shadow-md"), hex values and contrast ratios ("4.5:1", "#374151 on white = 10.5:1"), per-context application tables, an explicit 0-10 scoring procedure, and a diagnostic table mapping each question to a remediation action. Not 4: for an instruction-only skill the examples cover the common cases with specific, directly applicable values — no meaningful gaps.

5 / 5

Workflow Clarity

The audit path is well-supported: the "Quick Diagnostic" checklist gives explicit if-no-then-action checkpoints and the "Scoring" section creates a feedback loop ("Always provide the current score and specific improvements needed to reach 10/10"), with an ordering principle ("don't obsess over icons, shadows... until the layout and hierarchy work"). Not 5: there is no explicit ordered sequence for the fix/apply phase — how to move from diagnosis through the seven principles to a re-scored result is left implicit. Not 3: checkpoints are present and clearly signaled, not merely implied.

4 / 5

Progressive Disclosure

SKILL.md stays a genuine overview (seven principles with key scales and patterns inline) while all five referenced files (advanced-patterns, animation-microinteractions, accessibility-depth, data-visualization, theming-dark-mode) exist, are substantial (~440-520 lines each), and are one level deep — verified to contain only internal TOC anchors, no nested references. Navigation is well-signaled via per-principle "See: references/..." pointers plus a "Reference Files" index describing each file's contents. Not 4: structure, signaling, and content split are all appropriate with no real organization gaps.

5 / 5

Total

17

/

20

Passed

Description

100%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 exemplary: it states concrete capabilities, provides an explicit 'Use when' clause with natural quoted trigger phrases and synonyms, and explicitly delegates adjacent territories to sibling skills. It fully matches the rubric's top anchors on all four dimensions.

DimensionReasoningScore

Specificity

"Audit and fix visual hierarchy, spacing, color, and depth in web UIs" names concrete actions and domains, and "building consistent design tokens, creating dark mode themes, improving data visualization clarity" adds several more specific capabilities — comprehensive coverage matching the top anchor. Not 4: there are no meaningful coverage gaps; every listed capability is backed by the skill's actual content.

5 / 5

Completeness

Explicitly answers both questions: what ("Audit and fix visual hierarchy, spacing, color, and depth in web UIs") and when ("Use when the user mentions..." with a list of concrete trigger phrases, plus additional trigger contexts). Not 4: the 'when' clause is fully explicit with concrete quoted triggers, exactly matching the anchor-5 example pattern.

5 / 5

Trigger Term Quality

Includes highly natural quoted phrases users would actually say ("my UI looks off", "fix the design") plus technical terms and their synonyms ("Tailwind styling", "component styling", "color palette", "design system", "spacing scale", "dark mode themes"). Not 4: term coverage spans colloquial to technical with synonym variations, exceeding "a few natural terms missing".

5 / 5

Distinctiveness Conflict Risk

Clear niche (visual UI design polish) with distinct triggers, and it actively defuses conflicts by delegating adjacent domains: "For typeface selection, see web-typography. For usability audits, see ux-heuristics." Not 4: the explicit boundary delegation to sibling skills minimizes even minor overlap risk.

5 / 5

Total

20

/

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

valeriibeck-star/claude-skills

Path

skills/refactoring-ui/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.