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.

64

Quality

80%

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

77%

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

The body is highly actionable with executable code and a strong validation-gated workflow, but it is over-long and monolithic with duplicated rule restatements, and it ships broken references to three style files that are not present in the bundle.

Suggestions

Create the three missing referenced files (style-minimalist.md, style-brutalist.md, redesign.md) or remove their links, since progressive disclosure breaks when signaled references point to non-existent files.

Collapse the Section 14 Pre-Flight Check so it references Section 4/9 rules by ID instead of restating ~60 of them, eliminating the major duplication that drives the length.

Move the Appendix install commands and canonical URL lists, plus the Section 10 pattern vocabulary, into separate reference files (e.g. references/install-commands.md, references/pattern-vocabulary.md) and link to them one level deep.

DimensionReasoningScore

Conciseness

The ~1220-line body is voluminous and repeats itself: Section 14's Pre-Flight Check re-lists nearly every rule from Sections 4 and 9 as checkboxes, and Section 10 enumerates well-known pattern names (Bento Grid, Masonry, Parallax Tilt) Claude already knows; it could be tightened substantially, though much of the rest is genuine domain-specific guidance rather than basic-concept padding.

2 / 3

Actionability

Highly executable: concrete Tailwind classes ('min-h-[100dvh]', 'text-4xl md:text-6xl tracking-tighter leading-none'), specific banned hex codes, real install commands, and copy-paste-ready TSX skeletons (StickyStack, HorizontalPan, RevealStagger) match the fully-executable anchor.

3 / 3

Workflow Clarity

Clear ordered process - Section 0 'Read the Room Before Anything Else', then dials, then system map - culminating in the mandatory Section 14 Pre-Flight checklist with an explicit feedback loop ('If a single checkbox cannot be honestly ticked, the page is not done'), and a sequenced Section 11 redesign protocol with prioritized levers.

3 / 3

Progressive Disclosure

Navigation is well-signaled via the top style-variants table, but three of the five referenced files (style-minimalist.md, style-brutalist.md, redesign.md) do not exist, and large bodies that could live in separate reference files (the appendices with install commands and canonical URLs, the Section 10 pattern vocabulary) are inline in this monolithic document.

2 / 3

Total

10

/

12

Passed

Description

82%

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, uses natural trigger terms, and carves out a distinct niche with an explicit exclusion. Its only gap is the absence of an explicit positive 'Use when...' trigger clause, which caps completeness.

Suggestions

Add an explicit 'Use when...' clause naming the trigger situations (e.g. 'Use when designing or building web UI: landing pages, portfolios, marketing/product sites, or redesigns.') so the 'when' is stated, not implied.

Consider mirroring the positive triggers already present in the when_to_use field into the description itself, since the rubric evaluates only the description field.

DimensionReasoningScore

Specificity

Lists multiple concrete actions in third person voice - 'Reads the brief, infers the right direction, and ships interfaces', 'audit-first on redesigns, strict pre-flight check', 'Real design systems when applicable' - matching the multiple-specific-actions anchor; no first/second-person voice penalty applies.

3 / 3

Completeness

Clearly states what the skill does, but there is no explicit 'Use when...' clause or equivalent positive trigger guidance; the 'when' is only implied via the domain list plus a negative 'NOT for mobile apps', so per the rubric guideline completeness is capped at 2.

2 / 3

Trigger Term Quality

Good coverage of natural terms users would say - 'landing pages, portfolios, marketing/product sites, redesigns, web UI' - matching the strong natural-keyword anchor rather than the 'missing common variations' level.

3 / 3

Distinctiveness Conflict Risk

Clear niche (web UI landing pages/portfolios/redesigns) with an explicit negative trigger ('NOT for mobile apps') steering it away from a sibling mobile skill, making conflicts unlikely.

3 / 3

Total

11

/

12

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.