CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frontend-workflow

Frontend and UI work in surfsense_web and surfsense_local/frontend — building, refactoring, styling, animating, or reviewing React and Next.js components, shadcn/ui, color tokens and themes, visual polish, and motion. Load this first for any UI task, including adding or changing a shadcn/ui component (dialog, button, dropdown, form, sidebar, table) in a tree with components.json — it owns the color palette, polish rules, and the precedence order, then routes to the separate shadcn skill for component wiring and the CLI. Use for any frontend component, page, style, animation, hover state, icon, layout, or UI review task.

71

Quality

89%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

86%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

An exemplary router/index skill: dense, fluff-free, with precise conditional routing, a precedence order, and explicit per-conflict resolution rules. The weaknesses are confined to the Validate step, which names check categories rather than commands and omits an error-recovery loop.

Suggestions

Make the Validate step concrete: name the lint/type/test commands per tree (or point to the package.json scripts that define them) instead of "the smallest relevant lint, type, and test checks".

Add an explicit failure-handling loop in the Validate step — run checks, fix failures, re-run before reporting — so error recovery is prescribed rather than implied.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence: it never explains what React, Tailwind, or shadcn/ui are, and every section carries non-obvious routing or precedence information. Even the Notes section earns its tokens by defusing a real hazard (inert frontmatter on bundled reference files), so nothing reads as padding.

5 / 5

Actionability

Routing guidance is fully concrete — exact file paths with load conditions, a numbered precedence order, per-overlap resolutions naming exact files (../shadcn/rules/icons.md vs polish/icons.md), and a state-coverage checklist. The one soft spot is the Validate step's "Run the smallest relevant lint, type, and test checks", which stays at category level rather than naming or locating executable commands, a minor gap against anchor 5's copy-paste-ready standard.

4 / 5

Workflow Clarity

The five-step workflow (Understand → Select → Implement → Validate → Report) is clearly sequenced with validation checkpoints — lint/type/test, rendered-behavior verification, and resolving blocking polish findings. It falls short of anchor 5 because the checks are generic rather than command-specific and there is no explicit fix-and-re-run loop if validation fails; it stays above anchor 3 because checkpoints are present, not merely implied.

4 / 5

Progressive Disclosure

The reference map is a well-signaled, condition-gated table ("Read this / When") with one-level-deep entries, and the body enumerates each entry's supporting files upfront so nothing is buried. Explicit negative guardrails ("do not load rules-compiled.md by default", "Do not load motion references for work with no motion concern") make navigation and discovery easy; note the referenced bundle files were not present in the provided review bundle, so this scores the structure as written.

5 / 5

Total

18

/

20

Passed

Description

88%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: it answers what and when explicitly with concrete trigger phrases and a well-defined niche, and it proactively handles the overlap with the shadcn skill. The only gaps are a few missing natural terms (Tailwind, CSS, .tsx) and a residual dual-trigger situation for shadcn component changes.

Suggestions

Add natural trigger terms users commonly say for frontend work — "Tailwind", "CSS", and file extensions like .tsx/.css — to widen trigger_term_quality coverage.

Sharpen the boundary with the shadcn skill so a pure component-wiring task doesn't dual-trigger, e.g. "for pure shadcn wiring or CLI use, the shadcn skill applies directly."

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — "building, refactoring, styling, animating, or reviewing React and Next.js components, shadcn/ui, color tokens and themes, visual polish, and motion" — and names specific artifacts (dialog, button, dropdown, form, sidebar, table) and target trees (surfsense_web, surfsense_local/frontend). Coverage is comprehensive across build, refactor, style, animate, and review with no minor gaps, matching the anchor-5 example's breadth.

5 / 5

Completeness

Both what and when are explicitly stated with concrete triggers: the what covers actions plus ownership ("it owns the color palette, polish rules, and the precedence order"), and the when appears twice — "Load this first for any UI task" and "Use for any frontend component, page, style, animation, hover state, icon, layout, or UI review task". This matches the anchor-5 pattern of explicit what AND when with concrete trigger phrases.

5 / 5

Trigger Term Quality

Good natural keyword coverage: "UI task", "frontend component, page, style, animation, hover state, icon, layout, or UI review task", "components.json", and named shadcn components. A few natural terms users would say are missing — "Tailwind", "CSS", and file extensions like .tsx — so it falls just short of the anchor-5 standard of synonyms plus extensions.

4 / 5

Distinctiveness Conflict Risk

The niche is clear (two named trees, React/Next.js/shadcn stack) and the description explicitly manages the boundary with the shadcn skill ("routes to the separate shadcn skill for component wiring and the CLI"). However, "adding or changing a shadcn/ui component ... in a tree with components.json" is a trigger that genuinely matches both this and the shadcn skill, leaving minor overlap risk with a closely related skill.

4 / 5

Total

18

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 5 missing, 1 suspicious

Warning

Total

15

/

16

Passed

Repository

MODSetter/SurfSense

Path

.agents/skills/frontend-workflow/SKILL.md

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.