CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

cs-frontend-engineer

Frontend-engineering orchestrator. Walks the 7 Matt Pocock forcing questions (device, LCP target, rendering, bundle budget, SEO vs auth, design system, WCAG), picks the framework/rendering profile, forks into specialists (a11y-audit, apple-hig-expert, epic-design, performance-profiler, playwright-pro — listed alphabetically; workflow order is dependency-driven) rather than reimplementing their scope. Forks own context. Invoke via /cs:frontend-review or Agent({subagent_type:"cs-frontend-engineer",...}).

60

Quality

75%

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 ./.gemini/skills/cs-frontend-engineer/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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 orchestrator body with clear workflows and explicit validation gates, written economically. Its key weakness is that all deferred content — scripts, knowledge bases, profiles — lives at broken external paths with no bundle files behind them, so the progressive-disclosure structure does not actually hold up.

Suggestions

Bundle the referenced materials (frontend_decision_engine.py, forcing_questions.md, profile JSONs, karpathy gate scripts) into this skill's own scripts/ and references/ directories, or fix the relative paths so they resolve.

Add an explicit fix-and-retry loop after the karpathy gate (on failure: review JSON output, fix, re-run) to close the workflow feedback-loop gap.

Show the specialist fork invocation syntax and a one-line digest template so the "return a digest" steps are copy-paste executable.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence — no library tutorials or explanations of known concepts — and earns its tokens with dense tables (fork-target skip matrix, anti-patterns, profile lists). It is not a 5 because of minor padding: the "You exist because..." rationale paragraph and the scripted signature opener add tokens without adding executable value.

4 / 5

Actionability

Concrete and mostly executable: the decision-engine command with full flags ("python .../frontend_decision_engine.py --primary-device mobile-4g --lcp-target-ms 2000 --seo-dependent true ..."), the karpathy gate commands, and precise numeric thresholds (15% runner-up window, 2000ms LCP, ≤ 200-word digests). Not a 5 because the specialist fork invocations and the digest format are described rather than shown, leaving minor gaps.

4 / 5

Workflow Clarity

Three workflows are clearly sequenced with checkpoints: Workflow 1 embeds an explicit stop ("Surface kill criteria ... STOP and resolve") and the pre-commit karpathy gate validates before any commit; Workflow 2 maps regressed metrics to fix vectors. It falls short of 5 because there is no explicit fix/retry feedback loop after a gate failure, and Workflow 2's triage has no validation checkpoint; it is above 3 because most checkpoints are explicit rather than implicit.

4 / 5

Progressive Disclosure

The body is well-sectioned and functions as an overview pointing to external materials, but every referenced path ("../../engineering-team/skills/senior-frontend/scripts/frontend_decision_engine.py", "../../engineering/karpathy-coder/skills/karpathy-coder/scripts/complexity_checker.py", etc.) resolves outside the skill and does not exist — the bundle has no references/, scripts/, or assets/ directories at all. Structure and signaling are present, but the navigation they promise is dead, matching the 'some structure but could be better organized' anchor rather than the 'most content appropriately placed' anchor of 4.

3 / 5

Total

15

/

20

Passed

Description

70%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 specific, distinctive description with strong domain vocabulary and concrete named actions. Its main weakness is the missing explicit 'when to use' guidance — the invocation instructions say how to call it but never state the user situations that should trigger it.

Suggestions

Add a 'Use when...' clause naming concrete triggers, e.g., 'Use when choosing a frontend framework, setting a rendering model or bundle budget, or diagnosing a Core Web Vitals / LCP regression'.

Include the natural terms users actually say — React, Next.js, Vue, Core Web Vitals, landing page, web performance — to strengthen trigger matching.

Drop the internal jargon phrase 'Forks own context' in favor of a capability a user can evaluate.

DimensionReasoningScore

Specificity

The description lists several concrete actions — "Walks the 7 Matt Pocock forcing questions (device, LCP target, rendering, bundle budget, SEO vs auth, design system, WCAG)", "picks the framework/rendering profile", "forks into specialists (a11y-audit, apple-hig-expert, epic-design, performance-profiler, playwright-pro)" — with only minor coverage gaps. It falls short of 5 because some actions are expressed via internal jargon ("Forks own context") and the CWV regression triage workflow is absent; it exceeds 3 because it enumerates multiple specific actions rather than 1-2.

4 / 5

Completeness

The "what" is clear and detailed (orchestrator that walks the 7 questions, picks the profile, forks specialists), but there is no "Use when..." clause: "Invoke via /cs:frontend-review or Agent({subagent_type:...})" states how to invoke, not when or for which user situations. Per the guideline that a missing 'Use when' clause caps completeness at 3, this cannot exceed 3.

3 / 5

Trigger Term Quality

Good natural keyword coverage for the domain: "frontend", "framework", "rendering", "LCP target", "WCAG", "SEO", "bundle budget", "design system", "a11y". Missing a few natural terms users would say — "React", "Next.js", "Vue", "Core Web Vitals", "landing page", "web performance" — so it is not the comprehensive synonym/extension coverage of a 5, but it is well above the sparse-keyword level of a 3.

4 / 5

Distinctiveness Conflict Risk

It occupies a clear niche — frontend framework-selection orchestration within a named multi-agent system — with distinct triggers (the /cs:frontend-review command, the seven named specialists, the forcing-question framing). Conflict risk with generic frontend or PDF/document skills is minimal.

5 / 5

Total

16

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

relative_links

Relative link issues: 3 missing, 1 suspicious

Warning

Total

14

/

16

Passed

Repository

alirezarezvani/claude-skills

Path

.gemini/skills/cs-frontend-engineer/SKILL.md

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.