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

48%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/frontend-dev-guidelines/SKILL.md

Quality

Content

46%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 provides a comprehensive set of frontend development standards with good concrete examples (canonical template, routing pattern, MUI grid syntax), but suffers from significant verbosity and repetition—key rules like 'no early returns' and 'Suspense-first' appear in multiple sections. The FFCI scoring framework adds conceptual overhead without clear actionable value. The monolithic structure would benefit from splitting detailed standards into separate reference files.

Suggestions

Remove duplicate content: 'When to Use' appears twice, and Suspense/no-early-returns rules are stated in sections 2, 7, 10, and 15. Consolidate into a single authoritative statement.

Extract the FFCI framework, performance defaults, and TypeScript standards into separate bundle files (e.g., FFCI.md, PERFORMANCE.md) and reference them from the main skill to improve progressive disclosure.

Add concrete validation steps: include linting commands (e.g., `npx tsc --noEmit`), build verification, or test commands to create feedback loops in the component/feature creation workflows.

Remove explanations of concepts Claude already knows (e.g., what useMemo does, what strict mode means) and focus only on project-specific conventions and patterns.

Dimension	Reasoning	Score
Conciseness	The skill is noticeably verbose with significant padding. The introductory section explains what a senior frontend engineer does, the FFCI scoring system adds substantial overhead for questionable value, concepts like 'Suspense is the default' are repeated across multiple sections (sections 2, 7, 10, 15), and the 'When to Use' section appears twice. Many sections explain things Claude already knows (what TypeScript strict mode is, what useMemo does).	2 / 5
Actionability	The skill provides concrete, executable code examples including a canonical component template, routing pattern, grid syntax, and lazy loading pattern. The checklists are actionable. However, some sections remain at the level of rules/principles rather than executable guidance (e.g., the FFCI scoring system is a conceptual framework rather than something directly executable).	4 / 5
Workflow Clarity	The checklists provide a reasonable sequence for creating components and features, but there are no validation checkpoints or feedback loops. The skill describes what to do but not how to verify correctness—no linting commands, no test steps, no build verification. The FFCI assessment is presented as a pre-step but lacks concrete validation of the score.	3 / 5
Progressive Disclosure	The content is a monolithic ~300-line document with no bundle files to support it. The FFCI framework, detailed component standards, styling standards, and performance defaults could each be separate reference files. Section 16 references other skills but the main content itself is not well-split. Everything is inlined in one large file with no external references for deeper content.	2 / 5
	Total	11 / 20 Passed

Description

49%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 provides a basic 'Use when' clause which helps with completeness, but the overall content is too generic for effective skill selection. It reads more like a role description than a skill description, using first/second person framing ('You are') and lacking concrete actions, specific technologies, or distinctive triggers that would differentiate it from other frontend-related skills.

Suggestions

Replace the role-based framing ('You are a senior frontend engineer') with specific concrete actions in third person (e.g., 'Builds React components, implements data fetching with SWR/React Query, optimizes rendering performance').

Add specific technology names, frameworks, and file extensions as trigger terms (e.g., 'React', 'Next.js', '.tsx', '.jsx', 'CSS modules', 'API integration').

Narrow the scope to distinguish from other potential frontend skills — specify the architectural patterns, project conventions, or unique constraints this skill enforces.

Dimension	Reasoning	Score
Specificity	Names the domain (frontend engineering) and mentions broad categories like 'creating components or pages, adding new features, fetching or mutating data,' but these are generic activities rather than concrete, specific actions. No mention of specific technologies, frameworks, or detailed operations.	2 / 5
Completeness	Has both a 'what' (senior frontend engineer with architectural and performance standards) and a 'when' ('Use when creating components or pages, adding new features, or fetching or mutating data'). The 'when' clause is present and explicit, though the 'what' is vague about the actual capabilities and the 'when' could be more specific with concrete trigger scenarios.	4 / 5
Trigger Term Quality	Includes some relevant terms like 'components', 'pages', 'fetching', 'mutating data', and 'frontend' that users might naturally say. However, it's missing common synonyms, framework names (React, Vue, etc.), file extensions, or more specific trigger phrases like 'API calls', 'state management', 'CSS', 'styling', 'UI'.	3 / 5
Distinctiveness Conflict Risk	Very broad scope — 'creating components or pages, adding new features' could overlap with virtually any web development skill. There's nothing that narrows this to a specific framework, project type, or architectural pattern, creating high conflict risk with other frontend or full-stack skills.	2 / 5
	Total	11 / 20 Passed

Validation

90%

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 — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	10 / 11 Passed

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: skills/frontend-dev-guidelines/SKILL.md
Commit: 57c135b

Reviewed: 4 days 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.