CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

66

Quality

79%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/atomic-design/SKILL.md
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: a clear overview with an ordered workflow, concrete decision heuristics, and a single well-signaled reference. The main weakness is conciseness, as the 'Why' section and chemistry analogy restate concepts Claude already knows.

Suggestions

Trim the 'Why atomic design' rationale section and the 'borrowed from chemistry's atoms-to-matter progression' analogy, which explain methodology Claude already knows.

Add one brief worked example (e.g., decomposing a specific screen into the five levels) to move the actionability from mostly- to fully-executable guidance.

Add an explicit verification/check step to the decomposition workflow (e.g., 're-check each boundary with the heuristics before finalizing names').

DimensionReasoningScore

Conciseness

Mostly efficient but includes rationale and a chemistry analogy that restate the well-known atomic design methodology Claude already knows, so several sections could be tightened.

3 / 5

Actionability

Provides a concrete 6-step decomposition procedure and concrete boundary heuristics (atom vs molecule, etc.); minor gap is the absence of a worked example decomposing one specific UI.

4 / 5

Workflow Clarity

The decomposition workflow is a clearly sequenced, ordered 6-step procedure with top-down/bottom-up variants noted; only a minor verification checkpoint is missing, and no destructive/batch cap applies.

4 / 5

Progressive Disclosure

The body is a genuine overview that delegates expanded per-level detail to one clearly signaled, one-level-deep, verified reference (references/hierarchy.md), with content appropriately split.

5 / 5

Total

16

/

20

Passed

Description

87%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 is strong: it states a clear niche, an explicit 'Use when' trigger, and concrete named elements (the five levels), all in third person. Minor room to add natural synonyms like 'design system' or 'component library' for broader trigger coverage.

DimensionReasoningScore

Specificity

Names the domain and several concrete elements (the five named levels plus 'component hierarchy, naming, and composition decisions'), with only minor framing-as-guidance gaps rather than discrete operations.

4 / 5

Completeness

Explicitly answers both what ('Applies Brad Frost's atomic design methodology ... to guide consistent component hierarchy, naming, and composition decisions') and when ('Use when structuring or decomposing any frontend UI into reusable components') with a concrete trigger phrase.

5 / 5

Trigger Term Quality

Includes natural trigger phrases a user would say ('structuring or decomposing any frontend UI into reusable components', 'frontend UI', 'reusable components') but misses common synonyms like 'design system' or 'component library'.

4 / 5

Distinctiveness Conflict Risk

A clear niche (atomic design / component hierarchy) with a named methodology and five specific levels makes it clearly distinguishable from other skills with minimal conflict risk.

5 / 5

Total

18

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
whimzyLive/nightshift-ai
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.