platform-frontend
Framework-agnostic frontend architecture — state management, components, data fetching. Use when building any web frontend, choosing state patterns, or structuring UI code.
Install with Tessl CLI
npx tessl i github:ravnhq/ai-toolkit --skill platform-frontend67
Quality
51%
Does it follow best practices?
Impact
95%
1.10xAverage score across 3 eval scenarios
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/platform/platform-frontend/SKILL.mdQuality
Discovery
67%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
The description has good structure with an explicit 'Use when' clause that clearly communicates both purpose and triggers. However, it relies on somewhat abstract category names rather than concrete actions, and the trigger terms could be more comprehensive to capture the variety of ways users might request frontend architecture help.
Suggestions
Add more specific concrete actions like 'design component hierarchies', 'implement caching strategies', 'structure API integration layers' to improve specificity.
Include common trigger term variations users might naturally say: 'React', 'Vue', 'Angular', 'Redux', 'SPA', 'single page app', 'component structure', 'API calls'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (frontend architecture) and lists some actions (state management, components, data fetching), but these are high-level categories rather than concrete specific actions like 'create reducers' or 'implement caching strategies'. | 2 / 3 |
Completeness | Clearly answers both what (framework-agnostic frontend architecture covering state management, components, data fetching) and when (building any web frontend, choosing state patterns, structuring UI code) with explicit 'Use when' clause. | 3 / 3 |
Trigger Term Quality | Includes some relevant terms like 'web frontend', 'state patterns', 'UI code', but misses common variations users might say such as 'React', 'Vue', 'Redux', 'API calls', 'component library', or 'SPA'. | 2 / 3 |
Distinctiveness Conflict Risk | While 'framework-agnostic frontend architecture' provides some distinction, terms like 'components' and 'UI code' are broad enough to potentially overlap with framework-specific skills or general web development skills. | 2 / 3 |
Total | 9 / 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.
This skill provides high-level principles for frontend architecture but lacks the concrete, actionable guidance needed to be useful. The principles are reasonable but abstract, and the troubleshooting/examples sections appear to be generic template content rather than frontend-specific guidance. The skill would benefit significantly from actual code examples demonstrating state management patterns, component organization, and data fetching approaches.
Suggestions
Add concrete code examples for each principle (e.g., show local vs lifted state, feature-based folder structure, named export patterns)
Replace generic troubleshooting section with frontend-specific issues (e.g., state synchronization problems, render performance, hydration mismatches)
Include executable examples of recommended data fetching patterns with actual code snippets
Either inline key patterns from rules/_sections.md or provide a meaningful summary of what patterns are covered there
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The principles section is lean and efficient, but the troubleshooting and examples sections contain boilerplate content that doesn't add value specific to frontend architecture. The trigger examples are generic template content. | 2 / 3 |
Actionability | No concrete code examples, commands, or executable guidance. The principles are abstract statements without implementation details. References to 'rules index' without showing any actual patterns leaves Claude without actionable instructions. | 1 / 3 |
Workflow Clarity | The workflow section provides a 3-step sequence but lacks specificity. Steps like 'Apply the skill rules' and 'Validate output quality' are vague without concrete validation criteria or checkpoints for frontend-specific tasks. | 2 / 3 |
Progressive Disclosure | References rules/_sections.md for detailed patterns which is good structure, but the main content doesn't provide enough substance to serve as a useful overview. The balance between overview and referenced content is off. | 2 / 3 |
Total | 7 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
metadata_field | 'metadata' should map string keys to string values | Warning |
Total | 10 / 11 Passed | |
- 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.