CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-dev-guidelines

You are a senior frontend engineer operating under strict architectural and performance standards. Use when creating components or pages, adding new features, or fetching or mutating data.

54

Quality

61%

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/frontend-dev-guidelines/SKILL.md

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

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.

The content is well-structured and highly actionable with concrete templates, code, and checklists, but it is held back by repeated rules across sections, a duplicated 'When to Use' block, and the absence of any progressive-disclosure file splitting despite its length.

Suggestions

De-duplicate the repeated doctrines (early returns, strict TypeScript, lazy loading) into their single canonical sections and cross-reference instead of restating.

Remove the duplicated 'When to Use' section and the generic filler closing line ('This skill is applicable to execute the workflow...').

Move bulky reference material (full canonical templates, FFCI scoring detail, import-alias table) into reference files under references/ and link to them one level deep.

DimensionReasoningScore

Conciseness

The body is mostly lean (bullet lists, tables, code blocks) but repeats rules across sections ('No early returns' in §2/§10/§15/§17, strict TypeScript in §2/§12, lazy loading in §2/§6/§17) and includes a duplicated 'When to Use' section plus a generic filler closing line, so it could be tightened.

3 / 5

Actionability

Concrete, mostly copy-paste-ready guidance throughout: a canonical component template (§14), routing loader code (§8), MUI v7 grid syntax (§9), lazy-loading pattern (§6), file structure (§13), and named hooks (useSuspenseQuery, useMuiSnackbar); minor gaps where rules are stated as do/don't rather than shown as executable patterns.

4 / 5

Workflow Clarity

Checklists (§4 New Component/Feature, §17 Operator Validation) and the Anti-Patterns rejection list (§15) provide clear sequencing and validation checkpoints, though they act as gates rather than explicit validate→fix→retry feedback loops.

4 / 5

Progressive Disclosure

No bundle files exist and nothing is split into references; the skill is a single well-organized 18-section document with good headers and tables but inlines reference-style material (full templates, FFCI detail, alias table) that could live in separate files.

3 / 5

Total

14

/

20

Passed

Description

58%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 states a clear frontend niche and gives an explicit 'Use when...' clause covering both what and when, but it is weakened by second-person persona framing, generic trigger phrases, and trigger overlap with general development skills.

Suggestions

Rewrite in third person and lead with concrete actions (e.g., 'Writes production React/TypeScript components and pages using Suspense-first data fetching and feature-based architecture').

Add the natural trigger terms users actually say — React components, hooks, routing, MUI styling, performance, refactoring — to the 'Use when...' clause.

Narrow the triggers to frontend-specific phrasing to reduce overlap with general or backend development skills.

DimensionReasoningScore

Specificity

Names the frontend domain and several actions ('creating components or pages', 'adding new features', 'fetching or mutating data'), but the persona framing ('senior frontend engineer operating under strict architectural and performance standards') is vague; second-person voice ('You are...') triggers the rubric's specificity penalty, capping it at 3.

3 / 5

Completeness

Both 'what' (a senior frontend engineer operating under strict architectural/performance standards) and an explicit 'when' ('Use when creating components or pages, adding new features, or fetching or mutating data') are present; the 'what' is persona-based rather than a crisp concrete action list, so it does not reach 5.

4 / 5

Trigger Term Quality

Three relevant natural phrases appear ('creating components or pages', 'adding new features', 'fetching or mutating data'), but common concrete terms and synonyms a user would actually say (React, hooks, routing, styling, refactoring, performance) are absent from the description even though they appear in the body.

3 / 5

Distinctiveness Conflict Risk

The persona line names 'frontend', but the trigger clauses ('adding new features', 'fetching or mutating data') are broad enough to overlap with general, full-stack, or backend development skills, leaving moderate conflict risk.

3 / 5

Total

13

/

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.