CtrlK
BlogDocsLog inGet started
Tessl Logo

nested-container-clean-agency

Create a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color.

49

Quality

53%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./agent-skills/web-design/nested-container-clean-agency/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

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

The body is a well-organized, self-contained design-direction skill with concrete patterns and clear anti-patterns, and its section structure supports good progressive disclosure. Its main weaknesses are an empty '## Workflow' header, mild redundancy across the visual/implementation/patterns sections, and guidance that stays directional rather than fully specified.

Suggestions

Fill or remove the empty '## Workflow' section — either give a short sequenced build order (frame shell -> inset dark block -> inner cards -> accent punctuation) or delete the header.

Consolidate the overlapping nested-container / dark-section / accent guidance from 'Visual target', 'Implementation guidance', and 'Recommended patterns' into one source of truth to remove redundancy.

Add a few concrete specifications (e.g. a max-width value, border-radius range, accent-color usage cap) to move the actionability from directional to directly executable.

DimensionReasoningScore

Conciseness

The body uses tight, well-organized bullets with no basic-concept padding, but the nested-container / dark-section / accent-sparingly message recurs across 'Visual target', 'Implementation guidance', and 'Recommended patterns', so it could be tightened; not 3 due to this redundancy, not 1 because nothing over-explains concepts Claude already knows.

2 / 3

Actionability

Provides concrete directives ('max-width outer wrapper with consistent side padding, vertical boundary lines, and tiny corner markers', 'border gradients, low-contrast strokes, and soft shadows', 'masked text reveals, calm fade-ins, and light hover transitions') but stays at a directional/pattern level without exact values or copy-paste-ready specs; not 3 (not fully specified/executable), not 1 (specific and actionable as design guidance).

2 / 3

Workflow Clarity

The '## Workflow' section is an empty header, so no sequenced steps are given; the design direction is instead conveyed through descriptive sections. The overall direction is clear and structured, so above 1, but the empty workflow header and lack of any sequence keep it below 3.

2 / 3

Progressive Disclosure

The skill is under 50 lines, self-contained with no external references needed, and is well-organized into clearly labeled sections (Use When, Scope, Visual target, Implementation guidance, Recommended patterns, Tuning knobs, Avoid); per the simple-skills note this qualifies for 3.

3 / 3

Total

9

/

12

Passed

Description

50%

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 specific and well-scoped about what kind of design system to produce, but it omits any explicit 'Use when...' trigger guidance, leaving the when-to-use question unanswered. Trigger terms are a mix of natural phrases and design jargon, and conflict risk with other design-system skills remains moderate.

Suggestions

Append an explicit 'Use when...' clause, e.g. 'Use when building a clean, agency-led marketing or landing site that should feel premium through nested container hierarchy.'

Soften jargon ('outer editorial shell', 'inset dark feature blocks') toward terms users naturally say, such as 'framed page layout' and 'dark feature sections'.

Add common trigger variations like 'agency website', 'landing page design system', or 'premium marketing site' to broaden natural keyword coverage.

DimensionReasoningScore

Specificity

Quotes 'Create a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color' — it names a clear domain and concrete components, but rests on a single verb ('Create') with descriptive elements rather than the multiple distinct actions the 3-anchor requires (e.g. 'extract, fill, merge'); not 1 because it lists specific structural components rather than vague language.

2 / 3

Completeness

Clearly answers WHAT ('Create a clean agency design system built from nested containers...') but provides no explicit 'Use when...' trigger for WHEN it should apply; per the guidelines a missing Use-when clause caps completeness at 2, so not 3, while the strong 'what' keeps it above 1.

2 / 3

Trigger Term Quality

Includes some natural terms a user would say ('agency design system', 'design system', 'premium cards', 'accent color') but mixes in jargon-heavy phrasing ('outer editorial shell', 'inset dark feature blocks', 'nested containers') and omits common variations; not 3 because natural-term coverage is incomplete, not 1 because relevant keywords are present.

2 / 3

Distinctiveness Conflict Risk

The 'nested container clean agency' framing is a fairly distinct niche, but it sits in design-system territory where multiple visual-design skills could overlap and the absence of explicit triggers raises conflict risk; not 3 (not clearly conflict-free) and not 1 (not generic).

2 / 3

Total

8

/

12

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
MengTo/Skills
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.