CtrlK
BlogDocsLog inGet started
Tessl Logo

design-standards

Apply production-grade design standards when building or reviewing pages, components, or UI. Use this skill whenever the user asks to build a page, design a component, lay out a section, review the UI, fix the layout, or check design quality. Triggers on build a page, create a component, design a section, hero, card, CTA, layout, review the UI, fix the design, design system, design tokens, spacing, typography scale, button standards, mobile design. Also triggers for any production design decision where contrast, accessibility, spacing, or visual hierarchy matters.

72

Quality

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Content

85%

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

A well-structured, actionable body with a clear sequenced workflow and clean one-level-deep reference disclosure, all referenced bundle files verified present. The main improvement opportunity is trimming motivational editorial lines and restated known concepts to improve token efficiency.

Suggestions

Remove or tighten editorial lines that Claude does not need (e.g., 'Hold the line on these and most design problems disappear', 'Contrast is not a preference. It is a baseline', 'Rounded corners are a tool, not a default') to lift conciseness toward level 3.

Drop restatements of concepts Claude already knows (proximity principle, scan order) and let the concrete rules carry the point.

Resolve or annotate the external cross-skill reference brand-identity/references/contrast-and-accessibility.md so navigation does not depend on another skill's bundle.

DimensionReasoningScore

Conciseness

The body is mostly efficient (tight bullets, tables, no tutorials on what HTML/CSS or tokens are), but includes motivational editorializing Claude does not need ('Hold the line on these and most design problems disappear', 'Contrast is not a preference. It is a baseline', 'Rounded corners are a tool, not a default') and restates known concepts (proximity principle, scan order), placing it at 'mostly efficient but could be tightened' rather than the lean level-3 anchor.

2 / 3

Actionability

For an instruction-only skill the guidance is concrete and directly applicable with specific numeric thresholds ('minimum 64px desktop, 48px mobile', 'Touch targets: minimum 44 by 44 pixels', '4.5:1' / '3:1' contrast table, 'Test on a 375 to 390 pixel viewport'), meeting the instruction-only bar of concrete specific guidance; the absence of in-body code is justified ('Stack-specific patterns live in reference files') and not penalized.

3 / 3

Workflow Clarity

A clear 7-step sequence with explicit validation checkpoints ('Every text-on-background combination passes AA', 'Confirm nothing breaks', 'Run the pre-ship checklist') and a checklist reference for feedback, matching the clear-sequence-with-explicit-validation anchor rather than the validation-gaps level-2 anchor; this is design review rather than destructive ops, so the feedback-loop cap does not apply.

3 / 3

Progressive Disclosure

The body is an overview with well-signaled one-level-deep references (design-tokens-template.md, preship-checklist.md, tailwind-patterns.md — all verified to exist) and a dedicated 'Reference files' section, matching the clear-overview-with-one-level-deep-references anchor; the single external cross-skill reference (brand-identity/references/contrast-and-accessibility.md) is a minor navigation note, not deep nesting.

3 / 3

Total

11

/

12

Passed

Description

92%

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, explicit description that answers both what and when with abundant natural trigger terms and concrete actions. Its only weakness is a broad catch-all trigger clause that creates overlap risk with adjacent design and accessibility skills.

Suggestions

Narrow the catch-all clause 'any production design decision where contrast, accessibility, spacing, or visual hierarchy matters' to reduce overlap with accessibility-audit and brand skills, or add explicit exclusion language.

Add a brief distinctiveness cue in the description itself (e.g., 'for day-to-day UI build/review work, not brand definition or WCAG remediation') rather than relying on the body's 'When NOT to use' section.

DimensionReasoningScore

Specificity

Lists multiple concrete actions across categories ('build a page, design a component, lay out a section, review the UI, fix the layout, or check design quality'; 'design tokens, spacing, typography scale, button standards, mobile design'), matching the anchor for multiple specific concrete actions rather than the partial level-2 anchor.

3 / 3

Completeness

Explicitly states what ('Apply production-grade design standards when building or reviewing pages, components, or UI') and when via repeated explicit triggers ('Use this skill whenever...', 'Triggers on...', 'Also triggers for...'), clearing the level-3 bar that level-2 only reaches when 'when' is missing or implied.

3 / 3

Trigger Term Quality

Broad coverage of natural user phrasings ('build a page', 'review the UI', 'fix the layout', 'hero', 'card', 'CTA') plus common variations, satisfying the good-coverage anchor rather than the some-keywords-but-missing-variations level-2 anchor.

3 / 3

Distinctiveness Conflict Risk

The core niche (tokens, typography scale, button standards) is distinctive, but the catch-all trigger 'any production design decision where contrast, accessibility, spacing, or visual hierarchy matters' overlaps with sibling skills (accessibility-audit, brand-identity), keeping it at 'somewhat specific but could still overlap' rather than a clean 'unlikely to conflict' level 3.

2 / 3

Total

11

/

12

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
rampstackco/claude-skills
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.