nested-container-frames

Create a container-in-container layout system using nested frames. Use an outer centered container with visible vertical boundary lines and corner markers. Inside, place inner containers inset from the edges, each with its own background and rounded frame. Technique: outer container defines global bounds, inner containers use padding to create inset spacing, layered frames (border + background) to separate levels, and consistent spacing between outer frame and inner blocks.

Quality

71%

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 ./agent-skills/web-design/nested-container-frames/SKILL.md

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 exemplarily concise, well-organized body for a simple single-purpose skill, with a clear workflow sequence and useful guardrails. The main weakness is actionability: the guidance describes what to build without any concrete measurements or a code example that would make it directly executable.

Suggestions

Add one short, concrete example (HTML/CSS or framework-agnostic markup) showing the outer frame with boundary lines/corner markers and one inset inner container, so the technique is copy-paste executable.

Specify default measurements to anchor the guidance — e.g. outer container max-width, inset padding, border weight, and corner radius values — instead of leaving 'consistent padding' and 'spacing rhythm' undefined.

In the workflow, state what to check before finishing (e.g. verify inner frames are inset uniformly and frame lines do not cross text) to add an explicit checkpoint.

Dimension	Reasoning	Score
Conciseness	The ~20-line body is lean with zero padding: every line instructs ('Define an outer centered container...', 'Add visible vertical boundary lines...') and nothing explains concepts Claude already knows. It matches the 'every token earns its place' anchor exactly.	5 / 5
Actionability	The steps name concrete intent ('outer centered container', 'inner containers inset... using consistent padding', 'border + radius') but give no executable specifics — no page-width value, padding amounts, border weights, or a markup/CSS example. This lands between the 'high-level hints' anchor (2) and 'mostly executable guidance' anchor (4), closer to 'some concrete guidance but incomplete'.	3 / 5
Workflow Clarity	The five workflow steps are clearly sequenced with no gaps, and the Guardrails section ('Do not nest cards inside cards...', 'Do not let frame lines overpower content readability') functions as soft checkpoints. It is not a 5 because there are no explicit validation or feedback checkpoints, though none are strictly required for this non-destructive design task.	4 / 5
Progressive Disclosure	The skill is under 50 lines, single-purpose, has no bundle files, and is organized into clean 'Use When / Workflow / Guardrails' sections. Per the rubric's simple-skill exception, this merits a 5 with no external references needed.	5 / 5
	Total	17 / 20 Passed

Description

63%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 detailed and specific description of the technique with strong 'what' coverage, but it omits any 'Use when...' trigger guidance, which caps completeness and leaves trigger-term quality mediocre. Adding an explicit trigger clause with natural user phrasings would lift the two weakest dimensions.

Suggestions

Add a 'Use when...' clause naming the concrete situations that call for this skill (e.g. 'Use when building a marketing page or landing page that needs a framed, container-in-container layout').

Include natural user-side synonyms such as 'framed layout', 'boxed sections', or 'page skeleton' alongside the technical vocabulary so the description matches how users actually phrase the need.

Clarify what visual context this applies to (HTML/CSS pages, design mockups) to further reduce overlap with generic container or layout skills.

Dimension	Reasoning	Score
Specificity	The description lists multiple concrete actions — 'outer centered container with visible vertical boundary lines and corner markers', 'inner containers inset from the edges, each with its own background and rounded frame', 'layered frames (border + background) to separate levels' — giving comprehensive coverage of the technique. It is not a 4 because the actions span all aspects of the domain (outer bounds, inner frames, layering, spacing rhythm) rather than leaving minor gaps.	5 / 5
Completeness	The 'what' is clearly and thoroughly stated, but the description contains no 'Use when...' clause or any equivalent explicit trigger guidance, which caps completeness at 3 per the judging guidelines. It is not a 2 because the 'what' is detailed rather than vague.	3 / 5
Trigger Term Quality	Relevant keywords are present ('container', 'nested frames', 'layout', 'padding', 'border', 'inset') but they are mostly technical vocabulary; common natural variations a user would actually say (e.g. 'boxed sections', 'framed layout', 'page skeleton') are missing. It is not a 4 because keyword coverage lacks synonyms and everyday phrasings.	3 / 5
Distinctiveness Conflict Risk	Terms like 'container-in-container', 'nested frames', and 'visible vertical boundary lines and corner markers' carve out a fairly distinct niche with minor overlap risk against general layout/design skills. It is not a 5 because 'container' and 'layout system' are broad terms that could collide with generic page-layout or design-system skills.	4 / 5
	Total	15 / 20 Passed

Validation

100%

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

Validation for skill structure

No warnings or errors.

Repository: MengTo/Skills
Path: agent-skills/web-design/nested-container-frames/SKILL.md
Commit: 798db0a

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.