CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

atomic-design

Use when structuring or decomposing any frontend UI into reusable components, regardless of framework. Applies Brad Frost's atomic design methodology — atoms, molecules, organisms, templates, and pages — to guide consistent component hierarchy, naming, and composition decisions.

65

Quality

82%

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

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

The body is well structured: an ordered decomposition workflow, concrete boundary heuristics, and pitfalls, with a clean one-level-deep reference split to hierarchy.md. Its main weakness is token efficiency — the intro, rationale section, and five-levels overview restate atomic-design fundamentals Claude already knows, which could be trimmed or pushed to the reference file.

Suggestions

Trim or remove the 'Why atomic design (rationale)' section and the opening paragraph — the consistency/reuse/vocabulary arguments restate well-known atomic-design rationale and consume tokens without adding executable guidance.

Compress the 'five levels' overview in the body to a one-line-per-level table (name + defining trait) and let references/hierarchy.md carry the definitions, since Claude already knows the standard definitions.

Add a short worked example in the body (one paragraph describing a sample screen, classified into the five levels using the workflow steps) to lift actionability from mostly-executable to fully demonstrated.

DimensionReasoningScore

Conciseness

The workflow, heuristics, and pitfalls sections are efficient, but the intro paragraph, 'Why atomic design (rationale)' section, and the 'five levels' overview largely restate textbook atomic-design concepts Claude already knows (e.g., 'the smallest indivisible UI building blocks', the ad-hoc-teams rationale). This matches 'mostly efficient but includes some unnecessary explanation'; not 2 because a substantial portion of the body (workflow, boundaries, anti-patterns) does add value beyond common knowledge.

3 / 5

Actionability

The 6-step decomposition workflow is concrete and directly executable as a reasoning procedure, and the boundary heuristics are specific and testable ('if removing a piece breaks the element's basic function, it's still an atom'; 'When in doubt, prefer the smaller level'). As an instruction-only skill, absence of code is not penalized; it misses 5 because there is no worked example applying the workflow to a concrete UI in the body.

4 / 5

Workflow Clarity

A clearly sequenced procedure ('Start from the whole screen' → 'Strip content' → identify regions → break into groupings → break into elements → name levels), plus boundary heuristics and anti-patterns that function as checkpoints. Not 5 because no explicit verification step (e.g., re-checking classifications against the boundary rules) is built into the sequence; not 3 because the decision heuristics supply most checkpoint function and the task is analytical, not destructive or batch, so the validation cap does not apply.

4 / 5

Progressive Disclosure

The body is a well-organized overview and the single external reference (references/hierarchy.md) is clearly signaled with a description of what it contains ('expanded per-level guidance — definitions, boundary rules, and additional neutral examples'), exists in the bundle, and is exactly one level deep (it links only back to ../SKILL.md). Content split is appropriate: the body keeps the workflow and heuristics, the reference holds expanded per-level detail.

5 / 5

Total

16

/

20

Passed

Description

83%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: third-person voice, explicit 'Use when...' trigger with concrete conditions, and a clear statement of what the skill applies (the five-level atomic design methodology) and to what ends (hierarchy, naming, composition decisions). The only weaknesses are minor — slightly abstract action phrasing and a few missing natural synonyms.

DimensionReasoningScore

Specificity

The description lists several concrete actions — 'structuring or decomposing any frontend UI into reusable components' and 'guide consistent component hierarchy, naming, and composition decisions' — and names the five levels (atoms, molecules, organisms, templates, pages). It sits between anchor 3 (1-2 concrete actions) and anchor 5 (comprehensive, multiple discrete actions): more coverage than 3, but 'guide... decisions' is somewhat abstract and the action list is not exhaustive, so 4 fits best.

4 / 5

Completeness

Explicitly answers both questions with concrete trigger phrases: 'Use when structuring or decomposing any frontend UI into reusable components, regardless of framework' (when) and 'Applies Brad Frost's atomic design methodology — atoms, molecules, organisms, templates, and pages — to guide consistent component hierarchy, naming, and composition decisions' (what). This matches the anchor-5 example pattern of a clear what plus an explicit use-when clause.

5 / 5

Trigger Term Quality

Good natural keyword coverage: 'frontend UI', 'reusable components', 'component hierarchy', 'atomic design', 'atoms, molecules, organisms, templates, and pages', 'framework'. Not anchor 5 because a few natural synonyms users might say are missing (e.g., 'design system', 'component library', 'break down UI'); not 3 because coverage clearly goes beyond a couple of generic terms.

4 / 5

Distinctiveness Conflict Risk

The named methodology (Brad Frost's atomic design, the five levels) gives it a clear niche with distinct triggers. Not 5 because 'any frontend UI... regardless of framework' is broad and could overlap with framework-specific component-design or design-system skills; not 3 because the atomic-design framing is far more specific than the anchor-3 example.

4 / 5

Total

17

/

20

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

whimzyLive/nightshift-ai

Path

skills/atomic-design/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.