frontend-dev-guidelines

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

Quality

73%

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

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.

A well-structured, actionable guidelines skill with concrete templates and checklists, weakened by internal redundancy and, more seriously, by a missing resources/ bundle that breaks its progressive-disclosure promise.

Suggestions

Ship the referenced resources/*.md files (component-patterns, data-fetching, file-organization, styling-guide, routing-guide, loading-and-error-states, performance, typescript-standards, common-patterns, complete-examples) so the 'Complete Guide' links resolve.

Remove redundancy: drop the 'Navigation Guide' table (it duplicates the links already in each topic guide) and the repeated file-structure block, or consolidate them into one location.

Collapse 'Core Principles' into the existing checklists or trim it to only items not already stated above, to reduce repeated content.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient checklists and brief pointers, but it repeats material: 'Core Principles' restates checklist items, the 'Navigation Guide' duplicates the per-topic resource links, and the file-structure block reappears in two sections; trimming these would tighten it.	3 / 5
Actionability	Provides concrete, copy-paste-ready material (Modern Component Template, routing example, MUI v7 Grid syntax, import cheatsheet, checklists), with only minor gaps where sections merely link out without inline detail.	4 / 5
Workflow Clarity	The 'New Component Checklist' and 'New Feature Checklist' give a clear, ordered sequence for complex processes; no explicit validation checkpoints, but the skill is non-destructive so the destructive-cap does not apply, leaving only minor gaps.	4 / 5
Progressive Disclosure	Structure and signaling are good — overview plus one-level-deep 'Complete Guide' links and a navigation table — but the referenced resources/ directory does not exist, so every resources/*.md link is dangling and the promised detail is unreachable.	3 / 5
	Total	14 / 20 Passed

Description

83%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, third-person description that explicitly covers both capability and trigger conditions with concrete, natural-language phrases. It is comprehensive on completeness and trigger quality, with only minor specificity and overlap-risk gaps.

Dimension	Reasoning	Score
Specificity	Names the domain and enumerates several concrete capabilities ('Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices'), but these are topic/pattern names rather than discrete executable actions, leaving a minor coverage gap versus the comprehensive-actions anchor.	4 / 5
Completeness	It clearly states what the skill provides ('Frontend development guidelines for React/TypeScript applications...') and explicitly answers when to use it with concrete trigger phrases, satisfying both halves of the top anchor.	5 / 5
Trigger Term Quality	The 'Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code' clause supplies natural phrases users say, with good coverage; a few common synonyms (e.g. 'React bug', 'frontend fix') are absent.	4 / 5
Distinctiveness Conflict Risk	The 'Frontend development guidelines for React/TypeScript' niche is mostly distinct from sibling skills (e.g. backend-dev-guidelines), with frontend-specific triggers; the broad trailing 'or working with frontend code' creates minor overlap risk.	4 / 5
	Total	17 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
relative_links	Relative link issues: 21 missing, 1 suspicious	Warning

	Total	15 / 16 Passed

Repository: diet103/claude-code-infrastructure-showcase
Path: .claude/skills/frontend-dev-guidelines/SKILL.md
Commit: 07f75ce

Reviewed: ~13 hours 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.