Name: frontend-dev-guidelines
Rating: 68 (1 reviews)
Author: diet103

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

82%

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

The canonical home for this skill is frontend-dev-guidelines in diet103/claude-code-infrastructure-showcase

Quality

Content

65%Weight 40%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A highly actionable, well-structured overview with strong code examples and clear checklists, but it is held back by redundancy and by progressive-disclosure links that point to resource files not present in the bundle. Workflows also lack explicit validation checkpoints.

Suggestions

Ship the missing resources/*.md files referenced throughout the body (component-patterns.md, data-fetching.md, styling-guide.md, routing-guide.md, loading-and-error-states.md, performance.md, typescript-standards.md, common-patterns.md, complete-examples.md, file-organization.md) or inline/remove the links so navigation is not broken.

Collapse redundancy: the "Navigation Guide" table duplicates the per-topic resource links and "Core Principles" restates the topic summaries — merge or remove one copy of each.

Add explicit validation checkpoints to the New Component / New Feature checklists (e.g. "confirm `tsc --noEmit` passes with no `any`" before marking an item done) to give the workflows feedback loops.

Dimension	Reasoning	Score
Conciseness	Mostly efficient lists and code, but padded with redundancy — the "Navigation Guide" table duplicates the per-topic resource links and "Core Principles" restates the topic summaries — so it could be tightened rather than earning the lean level-3 anchor.	2 / 3
Actionability	Provides copy-paste-ready, executable guidance: a full "Modern Component Template", a "Common Imports Cheatsheet", MUI v7 Grid syntax with ✅/❌, and a working createFileRoute example.	3 / 3
Workflow Clarity	The New Component and New Feature checklists are sequenced, but there are no explicit validation checkpoints or feedback loops (e.g. "verify type-checks pass before marking done"), fitting the level-2 anchor of steps present but checkpoints missing/implicit.	2 / 3
Progressive Disclosure	References are well-signaled and one-level-deep ("[📖 Complete Guide: resources/...md]" plus a navigation table), but the 10 referenced resources/*.md files are absent from the bundle, so navigation is broken rather than "easy" as the level-3 anchor requires.	2 / 3
	Total	9 / 12 Passed

Description

100%Weight 40%Scale 1-3

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 names concrete capabilities and pairs them with an explicit "Use when..." trigger clause covering natural user phrasings. It is clearly scoped to a specific frontend stack, minimizing conflict with other skills.

Dimension	Reasoning	Score
Specificity	Lists many concrete capabilities and patterns — "Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices" — matching the anchor for multiple specific concrete actions.	3 / 3
Completeness	Explicitly answers both what (React/TypeScript frontend guidelines with named patterns) and when (an explicit "Use when..." trigger clause), which is the level-3 anchor.	3 / 3
Trigger Term Quality	The "Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code" clause gives good coverage of natural terms a user would actually say.	3 / 3
Distinctiveness Conflict Risk	The React 18 + TypeScript + MUI v7 + TanStack Router/Query niche is specific and unlikely to trigger for unrelated skills; it is not the level-2 case because the stack and triggers are clearly scoped rather than broadly overlapping.	3 / 3
	Total	12 / 12 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: .agents/skills/frontend-dev-guidelines/SKILL.md
Commit: 07f75ce

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