frontend-engineer
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.
86
82%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
92%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 skill description that clearly articulates specific technologies and patterns while providing explicit trigger guidance. The description effectively communicates both capabilities and usage context. Minor weakness is the potential for overlap with other frontend-related skills due to some generic trigger terms.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete technologies and patterns: Suspense, lazy loading, useSuspenseQuery, features directory organization, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. | 3 / 3 |
Completeness | Clearly answers both what (frontend development guidelines with specific patterns and technologies) and when (explicit 'Use when...' clause covering components, pages, features, data fetching, styling, routing, and frontend code). | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'components', 'pages', 'features', 'fetching data', 'styling', 'routing', 'frontend code', plus specific tech terms like 'React', 'TypeScript', 'MUI' that developers naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | While it specifies React/TypeScript and particular libraries (MUI v7, TanStack Router), 'frontend code' and 'components' are broad terms that could overlap with other frontend skills. The specific tech stack helps but doesn't fully eliminate conflict risk. | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
72%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured skill with excellent progressive disclosure and concise presentation. The checklist format is effective for quick reference. The main weakness is the lack of executable code examples - adding even one concrete component example showing the patterns would significantly improve actionability.
Suggestions
Add a concrete, executable code example showing a component using useSuspenseQuery with SuspenseLoader wrapper
Include a brief validation step in the workflow section (e.g., 'Run `npm run typecheck` after creating new components to catch type errors early')
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, using checklists and bullet points to convey information without explaining concepts Claude already knows. No unnecessary explanations of React, TypeScript, or basic concepts. | 3 / 3 |
Actionability | Provides concrete checklists and specific patterns to follow, but lacks executable code examples. The guidance is specific (e.g., 'use useSuspenseQuery', '<100 lines inline') but would benefit from at least one copy-paste ready code snippet showing the patterns in action. | 2 / 3 |
Workflow Clarity | Checklists provide clear sequences for new components and features, and mentions CI checks. However, lacks explicit validation checkpoints or feedback loops for catching errors during development (e.g., what to do if types fail, how to verify Suspense boundaries work correctly). | 2 / 3 |
Progressive Disclosure | Excellent structure with a concise overview, quick-start checklists, core principles, and clear one-level-deep references to detailed documentation files. Navigation is well-signaled and content is appropriately split. | 3 / 3 |
Total | 10 / 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.
- Repository
- siviter-xyz/dot-agent
- Commit
3376255
- 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.