CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Frontend design skill fused from Impeccable + custom extensions. Covers design philosophy, anti-AI-slop patterns, typography, color (OKLCH), spatial design, motion, interaction, responsive, UX writing, state management, engineering, and 4 style variants. Includes 20 command skills for audit/critique/polish/animate/etc.

60

Quality

70%

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 ./templates/skills/domains/frontend-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

75%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 well-structured, mostly lean overview that pairs concrete DO/DON'T directives with clearly signaled references and a gated context-gathering workflow; its main weaknesses are absent bundle files for the referenced paths and minor redundancy in how references are listed.

Suggestions

Provide the referenced bundle files (reference/typography.md, color-and-contrast.md, spatial-design.md, etc., plus the style-variant and technique playbook SKILL.md files) so the well-signaled references resolve to real content.

De-duplicate reference pointers — list each reference once, either as the inline section blockquote or in the Reference Library table, not both.

Add explicit validation/checklist checkpoints to the core design flow (e.g. run the 'AI Slop Test' as a gated review step before declaring a design done) to lift workflow clarity toward 5.

DimensionReasoningScore

Conciseness

The body uses tight DO/DON'T lists that assume Claude's intelligence and avoid re-explaining basic concepts; the main blemish is minor redundancy where reference paths appear both as inline blockquotes and again in the Reference Library table.

4 / 5

Actionability

Gives concrete, executable directives ('Use OKLCH (not HSL)', 'clamp() for fluid sizing', 'grid-template-rows transitions for height animations', '@container'); as an instruction-only skill the absence of full code blocks is acceptable, but a few directives stay abstract ('Commit to a BOLD aesthetic direction').

4 / 5

Workflow Clarity

The Context Gathering Protocol is a clearly sequenced 3-step workflow with explicit gates ('Do NOT skip this step') and the Combining-techniques section gives sequencing examples, though the core design flow itself lacks explicit validation checkpoints.

4 / 5

Progressive Disclosure

The body acts as an overview with well-signaled, one-level-deep references via tables and blockquotes; however no bundle files actually exist in references/scripts/assets, and reference paths are repeated inline and in summary tables, leaving minor organization gaps.

4 / 5

Total

16

/

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 clearly communicates what the skill covers and occupies a distinct niche, but it omits any explicit 'Use when...' trigger guidance, which caps its completeness and leaves its trigger terms strong but not comprehensive.

Suggestions

Add an explicit 'Use when...' clause listing concrete trigger situations, e.g. 'Use when designing or redesigning frontend interfaces, building a design system, or auditing UI for AI-slop patterns.'

Drop the internal-provenance phrasing ('fused from Impeccable + custom extensions') from the user-facing description — it is jargon that does not help a user recognize when to invoke the skill.

Add natural synonyms/variants (e.g. 'UI design', 'web interface', 'design system') to broaden trigger-term coverage.

DimensionReasoningScore

Specificity

Names the frontend-design domain and lists several concrete actions ('audit/critique/polish/animate/etc.'), though much of the description enumerates covered topics rather than comprehensively listing actions, keeping it just below a 5.

4 / 5

Completeness

The 'what' is clear (covers design philosophy, anti-AI-slop patterns, 4 style variants, 20 command skills), but there is no 'Use when...' clause or equivalent explicit trigger guidance, which caps completeness at 3 per the rubric.

3 / 5

Trigger Term Quality

Includes natural terms users would say ('frontend design', 'typography', 'color', 'motion', 'responsive', 'audit', 'polish', 'animate') with good coverage, but lacks synonyms or file extensions that would push it to 5.

4 / 5

Distinctiveness Conflict Risk

Frontend design with an anti-AI-slop framing is a clear, mostly distinct niche with only minor overlap risk against closely related general design skills.

4 / 5

Total

15

/

20

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.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 23 missing

Warning

Total

15

/

16

Passed

Repository
fengshao1227/ccg-workflow
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.