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.

75

Quality

93%

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

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

A well-structured, actionable audit workflow that correctly delegates detailed rules to a single reference file and gates its only destructive action behind user confirmation. Minor redundancy in severity definitions and a missing pre-report verification step keep it just short of perfect.

Suggestions

Consolidate the severity definitions: keep them only in the '## Severity' section and reference it from the report-format template to remove the duplicated inline definition.

Add an explicit verification step before reporting, e.g. 'Re-read each flagged line against the matching rule in design-rules.md to confirm it is a true violation, not a false positive.'

Optionally note that findings should be grouped by file before producing the report, making the multi-file batch output easier to scan.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence (no explanation of F#, DaisyUI, or design concepts), but severity definitions appear twice — once in the report-format summary template and again in the '## Severity' section — which could be trimmed.

4 / 5

Actionability

Provides a copy-paste-ready command ('git diff --name-only HEAD~3 -- ...'), specific file paths to read (references/design-rules.md, src/Client/DesignSystem.fs), an enumerated 8-category checklist, and a concrete report-format template with an example table row.

5 / 5

Workflow Clarity

A clear 6-step numbered sequence (identify files, load rules, read DesignSystem.fs, check each file, report, offer to fix) with the destructive auto-fix gated behind explicit user confirmation; the only gap is no explicit false-positive verification checkpoint before reporting findings.

4 / 5

Progressive Disclosure

The body is a concise overview that delegates the full rule set to a real, one-level-deep reference ('Read references/design-rules.md for the full rule set'), keeping the workflow and report format inline — content is appropriately split and easy to navigate.

5 / 5

Total

18

/

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.

A strong description that clearly states what the skill does, enumerates the specific design-system dimensions it audits, and gives explicit natural-language trigger phrases with synonyms. It is concise, third-person, and highly distinguishable from other skills.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — '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' — covering all 8 design-system dimensions comprehensively.

5 / 5

Completeness

Explicitly answers both what ('Audit UI code against the Mediatheca design system...') and when ('Use when the user asks to "design check"...') with concrete trigger phrases, hitting the top anchor.

5 / 5

Trigger Term Quality

Provides natural trigger phrases users would say — 'design check', 'check design', 'audit styles', 'review UI code', 'check paper overlay' — including synonyms and a catch-all, matching the comprehensive-coverage anchor.

5 / 5

Distinctiveness Conflict Risk

Targets a named design system (Mediatheca) with specific tech (F#/Fable/Feliz, DaisyUI 5) and distinct audit triggers, giving it a clear niche with minimal 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.

Validation16 / 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.