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.

57

Quality

66%

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/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

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.

The content is highly actionable with executable templates and concrete checklists, but it carries minor redundancy and is a monolithic single file with no progressive disclosure to supporting files.

Suggestions

Remove the duplicate 'When to Use' section (the second occurrence is generic filler) and fix the section numbering gap (sections jump 2 -> 4).

Split the long canonical templates and FFCI detail into reference files (e.g., references/component-template.ts, references/ffci.md) with clearly signaled one-level-deep links from the overview.

Add an explicit validate-then-proceed feedback loop to the new-feature/new-component checklists so workflow clarity fully covers checkpoints.

DimensionReasoningScore

Conciseness

Mostly efficient bullet-point guidance that avoids re-explaining basic React/TypeScript concepts, but it contains duplication ('When to Use' appears twice) and generic filler ('This skill is applicable to execute the workflow or actions described in the overview.') that could be trimmed.

3 / 5

Actionability

Provides fully executable, copy-paste-ready code (lazy-load pattern, TanStack route, MUI Grid v7 syntax, full canonical component template) plus concrete checklists and an import-alias table covering the common cases.

5 / 5

Workflow Clarity

Multi-step flows (build a component/feature) are sequenced via structural-order lists and checklists, with the FFCI threshold and Operator Validation Checklist acting as validation checkpoints; minor validation gaps remain.

4 / 5

Progressive Disclosure

The body is well-organized into numbered sections, but no bundle files exist and all ~360 lines are inlined in a single SKILL.md with no one-level-deep references, so content that could live in separate files is not split out.

3 / 5

Total

15

/

20

Passed

Description

62%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 clearly states both role/standards and explicit use-when triggers, but it relies on generic contexts rather than concrete, distinct capabilities and uses second-person voice.

Suggestions

Rewrite in third person and enumerate concrete capabilities (e.g., 'Builds Suspense-first React components, structures feature-based code, configures TanStack routing and MUI v7 styling').

Add natural synonym/extension triggers such as 'React', 'UI components', 'hooks', or 'refactor frontend' to broaden trigger-term coverage.

Sharpen the 'what' to distinguish this skill from adjacent ones like frontend-design by foregrounding the enforceable standards (strict TypeScript, Suspense default, feature-based organization).

DimensionReasoningScore

Specificity

Names the frontend-engineering domain and a couple of contexts ('creating components or pages, adding new features, or fetching or mutating data') but lists no distinct concrete capabilities; combined with the second-person voice penalty ('You are a senior frontend engineer'), specificity drops from 3 to 2.

2 / 5

Completeness

Explicitly answers both what ('senior frontend engineer operating under strict architectural and performance standards') and when, with concrete trigger phrases in the 'Use when...' clause.

5 / 5

Trigger Term Quality

Includes natural phrases users say ('creating components or pages', 'adding new features', 'fetching or mutating data') but misses common synonyms and variations such as 'React', 'UI', 'hooks', or 'refactor frontend'.

3 / 5

Distinctiveness Conflict Risk

Frontend development guidelines form a recognizable niche, but the description could overlap with related skills (e.g., a frontend-design skill), so it is only somewhat specific.

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.