front-end-skill
Brief description of what this Skill does and when to use it (project)
50
25%
Does it follow best practices?
Impact
91%
1.09xAverage score across 3 eval scenarios
Advisory
Suggest reviewing before use
Optimize this skill with Tessl
npx tessl skill review --optimize ./data/skills-md/0xgeorgemathew/splithub/front-end-skill/SKILL.mdQuality
Discovery
0%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 boilerplate placeholder template, not an actual skill description. It contains no concrete actions, no trigger terms, no 'when to use' guidance, and no distinguishing characteristics. It fails on every dimension of the rubric.
Suggestions
Replace the placeholder text with specific concrete actions the skill performs (e.g., 'Generates reports, processes data files, creates visualizations').
Add an explicit 'Use when...' clause with natural trigger terms that users would actually say when they need this skill.
Define a clear niche or domain so the skill is distinguishable from others (e.g., specify file types, workflows, or tools involved).
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | This is a placeholder/template text with no actual actions described. It contains no concrete capabilities whatsoever—just 'Brief description of what this Skill does' which is entirely abstract. | 1 / 3 |
Completeness | Neither 'what does this do' nor 'when should Claude use it' is answered. This is a template placeholder that provides no actual information about the skill's purpose or triggers. | 1 / 3 |
Trigger Term Quality | There are zero natural keywords a user would say. The only potentially relevant word is 'project' in parentheses, which is far too generic to serve as a trigger term. | 1 / 3 |
Distinctiveness Conflict Risk | This description is completely generic and indistinguishable from any other skill. It would either match everything or nothing, providing no basis for differentiation. | 1 / 3 |
Total | 4 / 12 Passed |
Implementation
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides useful design direction and project context for frontend development on a specific project, with good organizational structure and a clear aesthetic philosophy. However, it lacks executable code examples (no component templates, no font loading snippets, no animation examples), which significantly limits actionability. The content is moderately concise but could be tightened by removing explanatory prose Claude doesn't need and replacing it with concrete, copy-paste-ready code patterns.
Suggestions
Add executable code examples: a sample component using next/font/google for font loading, a Framer Motion animation pattern for NFC tap feedback, and a Tailwind-styled component skeleton.
Add validation/verification steps to the implementation checklist, such as specific commands to check responsive design or accessibility (e.g., lighthouse, axe-core, or manual browser checks).
Extract the detailed typography and color guidelines into a separate DESIGN_SYSTEM.md reference file, keeping only a brief summary and link in the main SKILL.md.
Remove explanatory prose like 'Generic AI-generated designs are immediately recognizable' and the SplitHub 'feel' descriptions—instead encode these as concrete constraints or code-level defaults.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is reasonably well-structured but includes some unnecessary elaboration. The 'Avoid AI Slop' section and font listing are somewhat verbose—Claude doesn't need to be told what 'AI slop' looks like in such detail. The project context section explaining what SplitHub 'should feel like' is borderline unnecessary padding, though it does provide design direction. | 2 / 3 |
Actionability | The skill provides concrete guidance on font choices, color principles, and component locations, but lacks executable code examples. There are no code snippets showing how to load fonts via next/font/google, no example component structure, no Framer Motion animation examples, and no Tailwind configuration samples. The checklist is helpful but the guidance remains largely descriptive rather than copy-paste ready. | 2 / 3 |
Workflow Clarity | The implementation checklist provides a reasonable sequence of steps, but it lacks validation checkpoints. There's no guidance on how to verify the component works correctly, no testing steps, and no feedback loop for catching issues. For a UI development workflow, steps like 'check responsive behavior' or 'validate accessibility' with specific commands would strengthen this. | 2 / 3 |
Progressive Disclosure | The content is organized into clear sections with good headers, but everything is inline in a single file. The typography, color, motion, and background sections could be split into a separate design-system reference file. There are no references to external files for deeper guidance, and no bundle files support the skill. For a skill of this length (~100 lines of substantive content), some separation would improve navigation. | 2 / 3 |
Total | 8 / 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
- NeverSight/skills_feed
- Commit
25d5403
- 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.