senior-frontend

Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.

Quality

78%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

—

The risk profile of this skill

Fix and improve this skill with Tessl

tessl review fix ./engineering-team/skills/senior-frontend/SKILL.md

Quality

Content

67%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 thorough, highly actionable body with clear workflows, real referenced scripts and reference files, and strong decision/validation discipline. Its main weakness is length: large inline code blocks duplicate the bundled references, and a couple of referenced paths (profiles/, agents/) are not present.

Suggestions

Move the inline React Patterns and Next.js Optimization code blocks into their existing reference files, keeping only one compact example per topic in SKILL.md to cut duplication and token cost.

Tighten the Quick Reference section — the Tailwind cn() and TypeScript generics examples repeat material shown earlier — or fold them into the relevant reference file.

Either add the referenced profiles/ JSON files and agents/engineering/cs-frontend-engineer.md to the bundle, or remove those invocation/path references to avoid dangling pointers.

Dimension	Reasoning	Score
Conciseness	The ~570-line body inlines extensive code (compound components, hooks, render props, image optimization, data fetching) that duplicates the bundled reference files, plus a Resources section that re-lists the same paths; mostly useful but clearly could be tightened.	3 / 5
Actionability	Concrete copy-paste bash commands (real scripts in scripts/), options tables, and generated-structure examples are highly executable, but a few examples lack TypeScript types despite this being a TS skill and one Button sample renders a div, leaving minor gaps.	4 / 5
Workflow Clarity	Scaffolding, component-generation, and bundle-analysis workflows are clearly numbered, and the forcing-question/decision-engine flow has explicit kill criteria and re-run feedback loops; the scaffolding/component steps lack explicit validation checkpoints, a minor gap.	4 / 5
Progressive Disclosure	A table of contents plus well-signaled one-level-deep references to real bundle files (react_patterns.md, nextjs_optimization_guide.md, frontend_best_practices.md) and scripts give good navigation, though substantial inline content duplicates those references and profiles//agents/ paths are referenced but absent from the bundle.	4 / 5
	Total	15 / 20 Passed

Description

88%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 strong, specific description with an explicit trigger clause covering six concrete frontend actions across a named stack. It is mostly distinct, with only minor overlap against specialized a11y and code-review skills.

Dimension	Reasoning	Score
Specificity	Names the domain (React, Next.js, TypeScript, Tailwind) and lists six concrete actions — building components, optimizing performance, analyzing bundle sizes, scaffolding projects, implementing accessibility, reviewing code quality — matching the comprehensive-coverage anchor.	5 / 5
Completeness	Clearly states the 'what' (frontend dev skill for the named stack) and an explicit 'Use when...' clause with concrete trigger phrases, satisfying both halves of the top anchor.	5 / 5
Trigger Term Quality	Strong natural keyword coverage (React components, Next.js performance, bundle sizes, scaffolding, accessibility, frontend code quality) plus framework names, but no file extensions (e.g. .tsx) or close synonyms, leaving it just short of the comprehensive anchor.	4 / 5
Distinctiveness Conflict Risk	A clear frontend niche with distinct triggers, but 'implementing accessibility' and 'reviewing frontend code quality' overlap with dedicated a11y-audit and general code-review skills, giving minor conflict risk.	4 / 5
	Total	18 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (573 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: alirezarezvani/claude-skills
Path: engineering-team/skills/senior-frontend/SKILL.md
Commit: 19392f7

Reviewed: ~8 hours ago

Table of Contents

Discovery Implementation Validation

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.