CtrlK
BlogDocsLog inGet started
Tessl Logo

design-check

Audit UI code against the Mediatheca design system. Checks F# (Fable/Feliz) view files and CSS for violations of paper-overlay rules, typography hierarchy, theme tokens, DesignSystem.fs usage, spacing/layout conventions, animation standards, and DaisyUI 5 patterns. Use when the user asks to "design check", "check design", "audit styles", "review UI code", "check paper overlay", or any request to verify UI code follows the design system.

77

Quality

96%

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

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

Strong body: an efficient, fully actionable audit workflow with concrete commands, an explicit report format, and correct use of a single one-level-deep reference file for the detailed rules. The only flaw is minor redundancy — the critical/minor severity definitions are stated both in the report template and in the '## Severity' section.

Suggestions

State the critical/minor severity definitions once (in the '## Severity' section) and have the report template's Summary line just reference them (e.g., 'Violations: N (X critical, Y minor — see Severity), removing the duplicated definitions from the template block.

Alternatively, delete the standalone '## Severity' section and keep the definitions only inside the report template, since that is where Claude needs them when writing the summary.

DimensionReasoningScore

Conciseness

The body is lean and assumes competence — concrete git command, terse rule-category list, no concept explanations. However, the severity definitions appear twice in near-identical form: in the report template ('Critical = backdrop-filter/backdrop-blur present anywhere, translucent overlay background, hardcoded colors' / 'Minor = missing DesignSystem helper, non-standard animation duration') and again in the '## Severity' section. That minor duplication could be trimmed, matching the score-4 anchor ('efficient; minor instances... that could be trimmed') rather than 5 ('every token earns its place').

4 / 5

Actionability

Fully executable guidance: a copy-paste git command ('git diff --name-only HEAD~3 -- src/Client/**/*.fs ...'), exact file paths (references/design-rules.md, src/Client/DesignSystem.fs), an enumerated 8-category checklist, and a complete fill-in report template with an example table row. Matches the score-5 anchor: concrete commands plus a specific output format covering the common case.

5 / 5

Workflow Clarity

Six clearly sequenced steps (identify targets → load rules → read DesignSystem.fs → check files → report → offer fix), with an output checkpoint (the structured report with counts) and a gate on the only risky action ('ask if the user wants violations auto-fixed'). The skill is a read-only audit, so the destructive/batch validation cap does not apply, and no sequence gaps remain. Not 4: every step is unambiguous and the risky follow-up is explicitly gated.

5 / 5

Progressive Disclosure

The SKILL.md is a ~50-line overview that defers the full rule set to a single, clearly signaled, one-level-deep reference ('Read references/design-rules.md for the full rule set'), which exists as a real 126-line file; no other bundle content is inlined and no nested references exist. Matches the score-5 anchor for clear overview with well-signaled one-level-deep references.

5 / 5

Total

19

/

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.

Excellent description: it states a concrete what (auditing F#/CSS UI code against a named design system with seven enumerated rule categories) and an explicit when (natural quoted trigger phrases). Third-person voice is used correctly and there is no fluff or over-claiming.

DimensionReasoningScore

Specificity

Quotes: 'Audit UI code against the Mediatheca design system', 'Checks F# (Fable/Feliz) view files and CSS for violations of paper-overlay rules, typography hierarchy, theme tokens, DesignSystem.fs usage, spacing/layout conventions, animation standards, and DaisyUI 5 patterns.' This names the domain, the file types, and seven concrete check categories — comprehensive concrete action coverage matching the score-5 anchor. It is not 4 because coverage is not just 'several' actions but an explicit, near-exhaustive enumeration of the rule categories.

5 / 5

Completeness

Both halves are explicit: what — 'Audit UI code... Checks F# (Fable/Feliz) view files and CSS for violations of [7 categories]'; when — 'Use when the user asks to "design check"... or any request to verify UI code follows the design system.' This mirrors the score-5 anchor exactly (clear what AND when with concrete trigger phrases).

5 / 5

Trigger Term Quality

Quotes: 'design check', 'check design', 'audit styles', 'review UI code', 'check paper overlay', 'verify UI code follows the design system' — all phrases a user would naturally say, including synonyms and the relevant file/technology names (F#, Fable/Feliz, CSS, DaisyUI 5). Matches the comprehensive-coverage anchor; no obvious natural variation is missing.

5 / 5

Distinctiveness Conflict Risk

The description is anchored to a named system ('Mediatheca design system') with distinctive technology markers (Fable/Feliz F# views, DesignSystem.fs, paper overlay, DaisyUI 5), giving it a clear niche with minimal overlap risk against generic design or code-review skills. Not 4: no meaningful overlap with closely related skills exists given the project-specific triggers.

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
heimeshoff/Mediatheca
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.