CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-architect

$1B-grade frontend — poster typography, 4-layer color,fluid & creative motion choreography, creative layout.

49

Quality

53%

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 ./SAAS optimized/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

This is a dense, opinionated, instruction-only design skill with strong actionability via concrete thresholds, templates, and a verification checklist, plus a clear output workflow. Its main weaknesses are emphatic repetition that inflates token cost and a monolithic structure with no progressive disclosure.

Suggestions

Deduplicate the anti-slop, motion, and 'screenshot-worthy' guidance that recurs across RULES, Defaults, and PRIME MODE to reduce token cost.

Extract the large SF MODE specialization into a separate reference file (e.g., references/sf-mode.md) and link to it from the body.

Tone down all-caps intensifiers ('NEVER', 'BANNED', 'REJECT') which add length without adding instruction.

DimensionReasoningScore

Conciseness

The body is directive and assumes Claude's competence (no basic-concept explanations), but it is padded with emphatic repetition — anti-slop rules, motion guidance, and the 'screenshot this' litmus are restated across RULES, Defaults, PRIME MODE, and VERIFY, and heavy all-caps intensifiers ('NEVER', 'BANNED') could be tightened.

3 / 5

Actionability

It gives concrete, specific guidance — numeric thresholds ('≥4.5:1 contrast', '≥48px touch', '150–350ms'), concrete rules ('ONLY animate transform, opacity, filter', 'clamp() fluid'), a structured LOCK template, a MOTION MAP format, and a VERIFY checklist — actionable even without code.

4 / 5

Workflow Clarity

A clear sequence is given ('LOCK → MOTION MAP → COMPLETE WORKING CODE') with a pre-code planning contract and a closing VERIFY/multi-lens checklist acting as a validation gate, though it lacks explicit error-recovery feedback loops.

4 / 5

Progressive Disclosure

The file is well-sectioned with headers but is a single monolithic document with no bundle files and no references to separate materials; substantial chunks (SF MODE, the detailed color/typography specs) are inlined rather than split out.

3 / 5

Total

14

/

20

Passed

Description

42%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 signals a distinctive creative-frontend skill but is adjective-heavy, lacks natural trigger phrases beyond 'frontend', and omits any 'Use when...' guidance. It conveys intent more than concrete, well-triggered capabilities.

Suggestions

Add an explicit 'Use when...' clause stating when Claude should invoke this skill (e.g., building landing pages, marketing sites, or UI from scratch).

Replace design jargon ('poster typography', 'motion choreography') with natural user-facing terms ('landing pages', 'UI design', 'web interfaces').

State concrete deliverables as actions ('Build', 'Design', 'Prototype') instead of quality adjectives like '$1B-grade'.

DimensionReasoningScore

Specificity

Names the domain ('$1B-grade frontend') and lists several concrete design axes ('poster typography, 4-layer color,fluid & creative motion choreography, creative layout'), but these read as quality adjectives/feature areas rather than concrete actions, and coverage is not comprehensive.

3 / 5

Completeness

It conveys a clear 'what' (high-end distinctive frontend design) but has no 'when'/'Use when...' clause or explicit trigger guidance, which per the rubric caps completeness at 3.

3 / 5

Trigger Term Quality

Only 'frontend' is a natural keyword a user would say; the rest ('poster typography', '4-layer color', 'motion choreography') is design jargon rather than the phrases users actually speak, missing common variations like 'UI', 'landing page', or 'web design'.

2 / 5

Distinctiveness Conflict Risk

The high-end creative-frontend niche is somewhat specific, but the description is broad enough to overlap with general web/UI development skills.

3 / 5

Total

11

/

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
Elric412/Frontend-Enhancer
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.