CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

Quality

63%

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

57%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 body is highly actionable for an opinionated standards skill — concrete templates, code, and checklists — but it is held back by a mathematically inconsistent FFCI gate, duplicated doctrine and sections, and a monolithic layout with no progressive disclosure. Fixing the FFCI formula and deduplicating would move it up a full band.

Suggestions

Fix the FFCI formula and its stated range: (Architectural Fit + Reusability + Performance) − (Complexity + Maintenance Cost) over five 1–5 dimensions yields −7 to +13, not "−5 → +15"; either correct the range or adjust the scoring so the bands and formula agree.

Deduplicate: merge the repeated loading/early-return doctrine (sections 2, 7, 10, 15) into one place, delete the duplicate "When to Use" section and the boilerplate closing line, and renumber the sections (currently 2 jumps to 4).

Split detail into reference files (e.g. references/styling-mui.md, references/routing.md, references/typescript.md) with clearly signaled links from the overview, and show usage for the mandated-but-never-demonstrated <SuspenseLoader> and useMuiSnackbar.

DimensionReasoningScore

Conciseness

Terse tables, checklists, and bullets dominate, but the same doctrine is repeated across sections 2, 7, 10, and 15 (early returns / spinners forbidden appears four times), the "When to Use" section appears twice, and section 18 plus the trailing boilerplate sentence are filler — noticeably redundant rather than merely in need of minor trims.

3 / 5

Actionability

The canonical component template, route-definition snippet, MUI v7 grid syntax, alias table, and file-structure map are concrete and near copy-paste ready; minor gaps remain because <SuspenseLoader> and useMuiSnackbar are mandated without any usage example.

4 / 5

Workflow Clarity

An intended sequence (FFCI assessment → build per doctrine → operator validation checklist) is implicit but never laid out, and the FFCI gate is internally broken — five 1–5 dimensions yield a maximum of 13 and minimum of −7 by its own formula, not the stated "−5 → +15" — so the key checkpoint is unusable as written.

3 / 5

Progressive Disclosure

Section headers are well-organized, but this is a 360-line monolithic SKILL.md with no bundle files; MUI styling rules, routing standards, and TypeScript standards are exactly the detail that belongs in one-level-deep reference files, so structure exists but separation does not.

3 / 5

Total

13

/

20

Passed

Description

53%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 has an explicit trigger clause but is undermined by second-person persona framing, an abstract capability statement, and omission of the skill's defining technologies (React, TypeScript, MUI, Suspense). It would benefit most from a third-person rewrite naming concrete capabilities and stack-specific trigger terms.

Suggestions

Rewrite in third person and lead with concrete capabilities, e.g. "Enforces Suspense-first, feature-based, strict-TypeScript React standards (MUI v7, TanStack Router/Query). Use when creating React components or pages, adding features, or fetching/mutating data in a React + TypeScript codebase."

Add the natural trigger terms users would say — React, TypeScript, MUI, hooks, routing, styled components — since the skill is React-specific but 'React' never appears in the description.

Sharpen distinctiveness by scoping triggers to the specific stack (React/TypeScript/MUI) so it does not compete with generic web, backend, or data-fetching skills.

DimensionReasoningScore

Specificity

"operating under strict architectural and performance standards" is abstract persona language with no concrete capability, and the listed actions ("creating components or pages, adding new features, or fetching or mutating data") are generic — fitting anchor 3, reduced by 1 because the description uses second person ("You are a senior frontend engineer") per the rubric's voice penalty.

2 / 5

Completeness

Both what and when are present: the "Use when creating components or pages, adding new features, or fetching or mutating data" clause is explicit, but the 'what' is a persona claim rather than a statement of capabilities, so it does not reach anchor 5's fully concrete what-and-when standard.

4 / 5

Trigger Term Quality

Natural phrases like "creating components or pages", "adding new features", and "fetching or mutating data" are present, but the terms users of this stack would actually say — React, TypeScript, MUI, hooks, routing, styling — are entirely absent, matching anchor 3 (some relevant keywords, missing common variations).

3 / 5

Distinctiveness Conflict Risk

"creating components or pages" and "fetching or mutating data" overlap heavily with any web/frontend skill and even backend data skills; only "frontend engineer" narrows the scope, so it could still collide with closely related skills like a frontend-design or backend-guidelines skill.

3 / 5

Total

12

/

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.

Validation — 15 / 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

Path

plugins/AI-Agents-Safe-Coding-Skills-claude/skills/frontend-dev-guidelines/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.