CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Anti-slop frontend design for web UI — landing pages, portfolios, marketing/product sites, and redesigns. Reads the brief, infers the right direction, and ships interfaces that don't look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check. NOT for mobile apps.

63

Quality

77%

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

Quality

Content

58%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 skill is highly actionable and has an exceptionally clear workflow with a mandatory validation checklist, but it badly violates token economy and progressive disclosure: it is a ~1215-line monolith with repetitive rules, missing referenced files, and large appendices that belong in separate reference files.

Suggestions

Move the Appendix A install commands, Appendix B canonical sources, and Appendix C Liquid Glass skeleton into separate reference files (e.g. references/install-commands.md, references/design-system-sources.md) and link to them one level deep, cutting the body dramatically.

Create the three referenced style files (style-minimalist.md, style-brutalist.md, redesign.md) that the body links to, or remove the broken links from the variant table — currently navigation leads to nonexistent files.

Deduplicate the rule restatements: the same bans appear in Section 4.x, Section 9 (AI Tells), and the Section 14 pre-flight checklist; consolidate each rule to one canonical location and have the checklist reference it rather than restating it.

DimensionReasoningScore

Conciseness

The body is ~1215 lines of dense prescriptive rules, dial tables, banned-hex lists, ~60-item pre-flight checklists, and appendices of install commands — far beyond what an overview should carry inline, and much of it is highly repetitive (each rule restated in 9.F, 4.x, and the Section 14 checklist).

2 / 5

Actionability

Guidance is overwhelmingly concrete — named packages ('npx shadcn@latest add'), exact Tailwind classes ('min-h-[100dvh]', 'text-4xl md:text-6xl tracking-tighter'), executable install commands (Appendix A), and complete copy-paste TSX/CSS skeletons (5.A Sticky-Stack, Appendix C Liquid Glass) — with only minor gaps where rules stay abstract.

4 / 5

Workflow Clarity

The full pipeline is explicitly sequenced with validation checkpoints: Section 0 brief inference → Section 1 dials → Section 2 system map → build → Section 14 'FINAL PRE-FLIGHT CHECK' (~60 mechanical checkboxes, 'NOT OPTIONAL. Run every box. If any box fails, the output is not done'), plus audit-first redesign flow in Section 11 — a clear feedback loop with explicit failure recovery.

5 / 5

Progressive Disclosure

Structure is poor: the three referenced style files (style-minimalist.md, style-brutalist.md, redesign.md) do not exist, the 'blocks/' directory is explicitly 'does not exist yet', and the bulk of reference material (install commands, canonical sources, Liquid Glass skeleton) is inlined as ~220 lines of appendices rather than split into separate reference files — deeply buried content instead of one-level-deep pointers.

2 / 5

Total

13

/

20

Passed

Description

96%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 specific, trigger-rich, and answers both what and when with an explicit out-of-scope boundary, hitting the top anchor on most dimensions. The only soft spot is mild overlap risk with generic web/frontend skills, which keeps distinctiveness just below 5.

DimensionReasoningScore

Specificity

Lists multiple concrete capabilities — 'landing pages, portfolios, marketing/product sites, and redesigns', 'Reads the brief, infers the right direction', 'Real design systems when applicable', 'audit-first on redesigns', 'strict pre-flight check' — giving comprehensive coverage rather than vague abstraction.

5 / 5

Completeness

It explicitly answers 'what' (designs ships non-templated web UI, infers direction, applies real design systems, pre-flight check) and 'when' (landing pages, portfolios, marketing/product sites, redesigns) plus an explicit 'NOT for mobile apps' exclusion, satisfying both halves with concrete triggers.

5 / 5

Trigger Term Quality

Natural user-facing terms are densely covered — 'landing pages', 'portfolios', 'marketing/product sites', 'redesigns', 'web UI', 'mobile apps' — including synonyms and scope boundaries a user would actually name.

5 / 5

Distinctiveness Conflict Risk

The scope is fairly niche (marketing/landing/portfolio surfaces, explicit 'NOT for mobile apps', dashboards handled elsewhere) with a clear sibling skill 'mobile-design' called out, but 'web UI' is broad enough to retain minor overlap risk with general web/frontend skills.

4 / 5

Total

19

/

20

Passed

Validation

75%

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

Validation12 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (1223 lines); consider splitting into references/ and linking

Warning

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

frontmatter_unknown_keys

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

Warning

relative_links

Relative link issues: 3 missing

Warning

Total

12

/

16

Passed

Repository
vudovn/ag-kit
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.