CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

60

Quality

71%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/senior-frontend/SKILL.md

The canonical home for this skill is senior-frontend in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

53%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 with concrete script commands and options, and references are well-signaled and real. It is held back by verbosity (re-teaching known React/Next.js fundamentals) and by workflows that lack validation checkpoints for batch file-creation operations.

Suggestions

Trim the React Patterns, Next.js Optimization, and Accessibility primers to brief pointers into the reference files, keeping only skill-specific guidance inline to cut known-concept padding.

Add explicit verification checkpoints to the scaffolding and component-generation workflows, e.g. run with --dry-run first, then confirm generated files exist and 'npm run build' succeeds before proceeding.

Replace illustrative stubs (getProduct, getUser, addToCart) and the <div>-based Button example with self-contained, copy-paste-ready snippets.

DimensionReasoningScore

Conciseness

Roughly half the body re-explains concepts Claude already knows (Compound Components, useDebounce, Render Props, Server vs Client Components, the accessibility checklist, generic TypeScript components, cn() usage); not 1 because the script-driven workflows are genuine skill-specific content, but the padding is more than 'some'.

2 / 5

Actionability

Concrete copy-paste commands (frontend_scaffolder.py, component_generator.py, bundle_analyzer.py) with options tables and code examples cover common cases; not 5 because several inline examples use undefined stubs (getProduct, getUser, addToCart) and the Button sample renders a <div>.

4 / 5

Workflow Clarity

Three numbered workflows have clear sequences with commands, but scaffolding and component generation are batch file-creation operations with no validation/verification checkpoints; the batch-ops-without-validation cap holds this at 3.

3 / 5

Progressive Disclosure

One-level-deep references are clearly signaled and verified to exist (references/react_patterns.md, nextjs_optimization_guide.md, frontend_best_practices.md) with a ToC and Resources section; not 5 because React Patterns, Next.js, and accessibility content is inlined in SKILL.md while also living in the reference files, a minor organization gap.

4 / 5

Total

13

/

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 'Use when' trigger clause and a clear technology niche. The only notable gap is the absence of file-extension/synonym trigger terms that would push trigger-term quality to the top anchor.

DimensionReasoningScore

Specificity

Lists six concrete actions ('building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality'), matching the comprehensive-coverage anchor; not 4 since coverage is broad with no real gaps.

5 / 5

Completeness

Answers both 'what' (frontend dev skill for React/Next.js/TypeScript/Tailwind) and 'when' via an explicit 'Use when...' clause with concrete triggers; not 4 because the 'when' is explicit and specific rather than weakly implied.

5 / 5

Trigger Term Quality

Natural phrases users would say are present ('React components', 'Next.js performance', 'bundle sizes', 'scaffolding frontend projects'), but no synonyms or file extensions (.tsx, .ts) that the anchor-5 example requires; not 3 because terms are natural rather than jargon-only.

4 / 5

Distinctiveness Conflict Risk

The React/Next.js/TS/Tailwind niche is clear and mostly distinct, but 'reviewing frontend code quality' and 'implementing accessibility' overlap with adjacent skills; not 5 due to that minor overlap risk.

4 / 5

Total

18

/

20

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

Total

15

/

16

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
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.