jbvc/frontend-dev-guidelines
Opinionated frontend development standards for modern React + TypeScript applications. Covers Suspense-first data fetching, lazy loading, feature-based architecture, MUI v7 styling, TanStack Router, performance optimization, and strict TypeScript practices.
67
67%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
82%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong description that clearly identifies a specific technology stack and lists concrete topics it covers. The main weakness is the absence of an explicit 'Use when...' clause, which would help Claude know exactly when to select this skill. The specificity of the tech stack (MUI v7, TanStack Router) makes it highly distinctive.
Suggestions
Add an explicit 'Use when...' clause, e.g., 'Use when building or reviewing React + TypeScript frontend code, or when the user asks about MUI styling, TanStack Router setup, Suspense patterns, or frontend architecture decisions.'
Consider adding common user phrasing variations like 'component structure', 'code organization', 'React best practices', or 'Material UI' to improve trigger term coverage.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions/topics: Suspense-first data fetching, lazy loading, feature-based architecture, MUI v7 styling, TanStack Router, performance optimization, and strict TypeScript practices. These are concrete, identifiable technical concepts. | 3 / 3 |
Completeness | Clearly answers 'what does this do' (opinionated frontend development standards covering specific technologies), but lacks an explicit 'Use when...' clause or equivalent trigger guidance. The 'when' is only implied by the topic coverage. | 2 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: React, TypeScript, Suspense, lazy loading, MUI v7, TanStack Router, performance optimization, frontend development. These are terms developers naturally use when seeking guidance on these topics. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive due to the specific technology stack combination (React + TypeScript + MUI v7 + TanStack Router + Suspense). This very specific stack makes it unlikely to conflict with generic React or TypeScript skills. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
35%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 some strong concrete examples (canonical component template, Grid syntax, routing pattern), but suffers from significant verbosity and repetition. The FFCI scoring system adds conceptual overhead without clear actionable value, and many rules are stated multiple times across sections. The document would benefit from aggressive deduplication, splitting detailed standards into referenced files, and adding validation/feedback workflows.
Suggestions
Remove or drastically condense the FFCI section — it's an abstract scoring framework that adds token cost without clear actionable benefit for code generation tasks.
Deduplicate repeated rules (e.g., 'no early returns' and 'Suspense is default' appear in at least 4 sections each) — state each rule once and reference it.
Remove Section 3 ('When to Use This Skill') and Section 18 ('Skill Status') — these are meta-content that wastes tokens without aiding code generation.
Split detailed standards (MUI styling, routing, data fetching, TypeScript) into separate referenced files and keep SKILL.md as a concise overview with the canonical template and checklists.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Significant verbosity throughout. The FFCI scoring system (Section 1) is an invented framework Claude doesn't need explained at length. Section 3 ('When to Use This Skill') is unnecessary meta-content. Repeated statements of the same rules across multiple sections (e.g., 'no early returns' appears in sections 2, 7, 10, 15, and 17). The introductory paragraph explains what the skill is rather than just instructing. Section 18 ('Skill Status') adds no actionable value. | 1 / 3 |
Actionability | The canonical component template (Section 14) is a strong, executable example. The routing and Grid syntax examples are concrete. However, many sections are declarative rules without executable examples (e.g., lazy loading pattern shows only one line, API layer rules have no code, the feature structure has no concrete file content examples). The FFCI system is abstract and not directly executable. | 2 / 3 |
Workflow Clarity | The checklists in Section 4 provide reasonable step sequences for new components and features. However, there are no validation checkpoints or feedback loops — the 'Operator Validation Checklist' in Section 17 is a post-hoc checklist without error recovery steps. For a skill involving code generation and architectural decisions, there's no verify-then-proceed workflow. | 2 / 3 |
Progressive Disclosure | Section 16 references other skills which is good for navigation. However, the document itself is monolithic at ~300 lines with 18 sections that could benefit from splitting — the canonical template, anti-patterns, and detailed standards for routing/styling/data-fetching could each be separate referenced files. The content is reasonably organized with clear headers but everything is inline. | 2 / 3 |
Total | 7 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
Reviewed
Table of Contents