CtrlK
BlogDocsLog inGet started
Tessl Logo

front-end-skill

Brief description of what this Skill does and when to use it (project)

50

1.09x
Quality

25%

Does it follow best practices?

Impact

91%

1.09x

Average score across 3 eval scenarios

SecuritybySnyk

Advisory

Suggest reviewing before use

Optimize this skill with Tessl

npx tessl skill review --optimize ./data/skills-md/0xgeorgemathew/splithub/front-end-skill/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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 project-specific context (aesthetic preferences, tech stack, directory structure) that would genuinely help Claude make better frontend decisions for this project. However, it leans heavily on descriptive guidance rather than executable examples, and several sections explain general design principles Claude already understands. Adding concrete code snippets and tightening the aesthetic guidelines would significantly improve it.

Suggestions

Add executable code examples: a next/font/google setup snippet, a framer-motion animation pattern used in the project, and a CSS variable theme configuration example.

Add validation steps to the implementation checklist: e.g., 'Run `npm run build` to verify no type errors' or 'Check mobile viewport in browser dev tools'.

Condense the aesthetic guidelines—remove general design principles Claude already knows (e.g., 'High contrast = interesting') and keep only project-specific decisions and constraints.

Extract the detailed typography and color guidelines into a separate AESTHETIC.md reference file, keeping only a brief summary and link in the main SKILL.md.

DimensionReasoningScore

Conciseness

The skill contains some useful project-specific guidance (aesthetic preferences, font choices, project structure) but is verbose in areas Claude already knows—explaining what makes good typography pairing, general animation principles, and background design concepts. The 'Avoid AI Slop' section and aesthetic guidelines could be tightened significantly.

2 / 3

Actionability

Provides concrete font names, directory structure, and a checklist, but lacks executable code examples. No code snippets showing how to load fonts via next/font/google, how to set up framer-motion animations, or how to configure CSS variables/Tailwind. Guidance is specific but descriptive rather than copy-paste ready.

2 / 3

Workflow Clarity

The implementation checklist provides a reasonable sequence of steps, but it's more of a review checklist than a workflow. There are no validation checkpoints—no mention of how to verify the component works, no build/lint checks, and no feedback loop for catching issues before committing.

2 / 3

Progressive Disclosure

Content is reasonably organized with clear sections and headers, but everything is inline in a single file. The aesthetic guidelines section is lengthy and could be split into a referenced file. No bundle files are provided, so there's no progressive disclosure structure to leverage.

2 / 3

Total

8

/

12

Passed

Description

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 placeholder/template description that was never filled in with actual content. It provides no information about what the skill does, when to use it, or how to distinguish it from other skills. It is completely non-functional as a skill description.

Suggestions

Replace the placeholder text with concrete actions the skill performs (e.g., 'Generates project scaffolding, creates directory structures, initializes configuration files').

Add an explicit 'Use when...' clause with natural trigger terms that describe when Claude should select this skill (e.g., 'Use when the user asks to create a new project, set up a codebase, or initialize a repository').

Specify the domain or niche clearly to distinguish this skill from others (e.g., mention specific file types, frameworks, or workflows it handles).

DimensionReasoningScore

Specificity

The description contains no concrete actions whatsoever. It is a placeholder template ('Brief description of what this Skill does') with no actual content describing capabilities.

1 / 3

Completeness

Neither 'what does this do' nor 'when should Claude use it' is answered. This is a boilerplate placeholder that provides zero useful information for either question.

1 / 3

Trigger Term Quality

There are no natural keywords or trigger terms present. The only potentially relevant word is 'project', which is extremely generic and not a meaningful trigger term.

1 / 3

Distinctiveness Conflict Risk

The description is entirely generic and would be indistinguishable from any other skill. The word 'project' could apply to virtually anything.

1 / 3

Total

4

/

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
NeverSight/skills_feed
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.