styling

CSS and Tailwind, cn(), flex layouts. Use for "style this", "fix the CSS", "add classes", "not scrolling", "overflow", Tailwind utilities.

Quality

76%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/styling/SKILL.md

Quality

Content

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

A high-quality, code-rich guideline skill with executable examples, clear anti-patterns, and strong decision rules. Its only real gaps are minor over-explanation and a monolithic body that could offload some detail into reference files.

Suggestions

Tighten the explanatory prose around the Flex Column Scroll Trap (e.g. the opening 'single most common layout bug' sentence and duplicated rationale in prose + table) to push conciseness toward 5.

Consider moving the lengthy 'Flex Column Scroll Trap' subsection into a references file (e.g. references/flex-scroll-trap.md) with a short summary + link in SKILL.md to improve progressive disclosure.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean and action-oriented with minimal explanation of basics, but contains some explanatory prose (e.g. 'This is the single most common layout bug in this codebase') and rationale tables that could be trimmed slightly, fitting 'efficient; minor instances of over-explanation'.	4 / 5
Actionability	Fully executable, copy-paste-ready Svelte examples with specific utility classes (e.g. 'flex-1 min-h-0 overflow-hidden'), before/after pairs, and anti-patterns covering the common cases (scroll trap, disabled states, primitive overrides).	5 / 5
Workflow Clarity	As a guideline skill it has clear decision rules and a well-explained fix with a per-utility rationale checklist, but it is not a multi-step process with explicit validation checkpoints, so it sits at 4 rather than 5.	4 / 5
Progressive Disclosure	Well-organized into clear sections with one clearly-signaled, one-level-deep external reference (../ui-design/references/component-system.md); however all substantive content is inlined in a ~190-line body rather than split into reference files, keeping it at 4.	4 / 5
	Total	17 / 20 Passed

Description

70%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 concise, third-person description with strong natural trigger phrases and an explicit 'Use for' clause. Its main weakness is a terse 'what' that lists the domain and a couple of tools rather than multiple concrete capabilities.

Suggestions

Expand the 'what' to name a few more concrete capabilities (e.g. 'combine classes conditionally with cn(), build component variants with tailwind-variants, fix flex scroll layouts') to lift specificity toward 5.

Add a couple more natural trigger terms users say (e.g. 'center this', 'make it responsive', 'grid layout') to round out trigger coverage.

Dimension	Reasoning	Score
Specificity	Names the domain and a couple of concrete tools ("CSS and Tailwind, cn(), flex layouts") but does not enumerate multiple specific actions; coverage is not comprehensive, fitting the '1-2 concrete actions' anchor rather than the 'several specific actions' anchor above.	3 / 5
Completeness	Both 'what' (CSS/Tailwind, cn(), flex layouts) and an explicit 'when' ("Use for...") with concrete trigger phrases are present; the 'what' is terse rather than fully spelled out, keeping it at 4 rather than 5.	4 / 5
Trigger Term Quality	Strong natural phrasing ("style this", "fix the CSS", "add classes", "not scrolling", "overflow") gives good keyword coverage, but a few common natural terms (e.g. "center this", "responsive", "grid") are missing, so it stops short of comprehensive.	4 / 5
Distinctiveness Conflict Risk	The CSS/Tailwind/cn() niche is mostly distinct with specific triggers, but the skill itself points to a sibling ui-design skill, indicating minor overlap risk with a closely related skill.	4 / 5
	Total	15 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
relative_links	Relative link issues: 1 suspicious	Warning

	Total	15 / 16 Passed

Repository: EpicenterHQ/epicenter
Path: .agents/skills/styling/SKILL.md
Commit: abe10f3

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

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.