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.
Install with Tessl CLI
npx tessl i github:siviter-xyz/dot-agent --skill frontend-engineer84
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
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 contexts. The main weakness is the broad scope which could potentially conflict with other frontend-related skills in a large skill library.
| 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 technologies and patterns) 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), the broad scope of 'frontend code' and 'components' could overlap with other frontend-related 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 main weakness is the lack of concrete, executable code examples - the checklists tell Claude what to do but don't show how with actual code snippets. Adding a few key code examples for the most common patterns (useSuspenseQuery, lazy loading, SuspenseLoader usage) would significantly improve actionability.
Suggestions
Add executable code examples for core patterns like useSuspenseQuery, React.lazy with Suspense, and the SuspenseLoader component usage
Include a concrete example showing the complete file structure for a new feature with sample code
Add validation steps to the implementation workflow, such as 'Run type check before committing: npm run typecheck'
| 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 clear checklists and guidelines but lacks executable code examples. The patterns mentioned (useSuspenseQuery, React.lazy, SuspenseLoader) are referenced but not demonstrated with copy-paste ready code snippets. | 2 / 3 |
Workflow Clarity | The checklists provide clear sequences for new components and features, and there's mention of CI checks, but lacks explicit validation checkpoints or feedback loops for error recovery during implementation. | 2 / 3 |
Progressive Disclosure | Excellent structure with a concise overview and well-signaled one-level-deep references to detailed guides. The references section clearly points to specific topics in separate files with descriptive names. | 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.
- 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.