CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frontend-workflow

Frontend and UI work in www 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.

Quality

87%

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

78%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 body: when-conditioned reference map, explicit load-discipline rules, a numbered precedence order with concrete per-overlap resolutions, and nothing inlined that belongs in reference files. The workflow and validation steps are clear but stop short of concrete commands and an error-recovery loop, and a few generic workflow lines could be trimmed for token efficiency.

Suggestions

Trim generic workflow lines that restate default behavior (e.g., "Inspect the relevant implementation and trace the affected interaction", "Make the smallest complete change that satisfies the request") and keep only policy specific to these trees, such as the state checklist and polish-review gating.

Name the actual check commands per tree in the Validate step (e.g., the lint/type/test scripts from each tree's package.json) instead of the generic "Run the smallest relevant lint, type, and test checks".

Add a fix-and-re-run feedback loop to the Validate step and specify how to verify rendered behavior (e.g., the dev-server command for each tree), which would also raise workflow clarity.

DimensionReasoningScore

Conciseness

The body is dense and almost entirely project-specific (tree paths, precedence order, per-file ownership) with no explanations of concepts Claude already knows, but a few workflow lines restate default behavior ("Make the smallest complete change that satisfies the request", "Inspect the relevant implementation") and could be trimmed. Fits anchor 4 (efficient with minor trimmable instances) rather than 5, since not quite every token earns its place.

4 / 5

Actionability

The "Read this | When" reference map, numbered precedence order, and per-overlap resolutions ("Apply the shadcn rule to component wiring, the polish rule to visual detail") are concrete decision rules, and deferring to each tree's package.json is explicitly justified. Falls short of anchor 5 because the Validate step names no actual commands ("Run the smallest relevant lint, type, and test checks") and "verify the rendered behavior" specifies no method.

4 / 5

Workflow Clarity

Five clearly sequenced steps (Understand → Select → Implement → Validate → Report) with an explicit Validate step and a concrete state checklist ("loading, empty, error, disabled, responsive, keyboard, focus, and reduced-motion states"). Not anchor 5 because there is no fix-and-re-run feedback loop and the checks are unnamed; not 3 because checkpoints are present rather than implicit.

4 / 5

Progressive Disclosure

The body is a pure index: a when-conditioned reference table, explicit anti-loading rules ("do not load it by default", "Do not load motion references for work with no motion concern"), and inline enumeration of each area's sub-files so navigation stays effectively one level deep with no blind pointer-chaining. Note: no bundle files were present in the evaluation environment to verify the referenced paths exist, so this scores the reference structure as written.

5 / 5

Total

17

/

20

Passed

Description

92%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.

The description clearly and explicitly states both what the skill covers and when to load it, with enumerated concrete triggers and named component types, all in the standard imperative voice. It is tightly scoped to two trees and explicitly manages its overlap with the separate shadcn skill. The only gap is a few missing natural trigger terms for the stack, most notably Tailwind/CSS.

DimensionReasoningScore

Specificity

Lists multiple concrete actions ("building, refactoring, styling, animating, or reviewing") bound to specific objects — React and Next.js components, shadcn/ui components ("dialog, button, dropdown, form, sidebar, table"), color tokens and themes, hover state, icon, layout — comprehensively covering the frontend/UI domain of the two trees. Not 4: no meaningful coverage gap within its stated domain.

5 / 5

Completeness

Clearly answers both questions: what ("Frontend and UI work in www and surfsense_local/frontend", owning "the color palette, polish rules, and the precedence order") and when, with two explicit trigger clauses — "Load this first for any UI task, including adding or changing a shadcn/ui component… in a tree with components.json" and "Use for any frontend component, page, style, animation, hover state, icon, layout, or UI review task". Matches the anchor-5 pattern of concrete trigger phrases.

5 / 5

Trigger Term Quality

Good natural-term coverage ("UI task", "frontend component", "page", "style", "animation", "hover state", "icon", "layout", "UI review", and the components.json file marker), but a few common phrases users would say for this stack are missing — notably "Tailwind" (named in the body but not the description), "CSS", and "design". Not 5: synonym/extension coverage is incomplete; not 3: coverage goes well beyond "some relevant keywords".

4 / 5

Distinctiveness Conflict Risk

Scoped to two named trees, declares its ownership boundaries, and explicitly resolves the one obvious sibling-skill overlap by routing: "then routes to the separate shadcn skill for component wiring and the CLI". Not 4: no unresolved minor overlap remains; the entry-point claim ("Load this first for any UI task") is itself a conflict-resolution mechanism.

5 / 5

Total

19

/

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.