CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

62

Quality

72%

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

Quality

Content

85%

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

The body is concise and well-structured with a clear workflow, but it stays at the level of description rather than executable instruction. Adding concrete code or specific values for padding, radius, and spacing would lift actionability.

Suggestions

Provide a concrete code/CSS example showing the outer container, boundary lines, corner markers, and inset inner containers with specific values.

Specify concrete measurements (e.g., padding amounts, border radius, gap between outer frame and inner blocks) instead of 'consistent padding'.

Add a short worked example or template structure for the hero/feature/proof/CTA module separation.

DimensionReasoningScore

Conciseness

The body is lean and efficient with no padding or explanation of concepts Claude already knows; each line earns its place. It is not below 3 because nothing can be cut without losing meaning.

3 / 3

Actionability

Steps describe rather than instruct — 'Add visible vertical boundary lines and small corner markers' with no concrete code, CSS, or specific values for padding, radius, or spacing. It is not 3 because there is no executable example, and not 1 because the guidance is concrete enough to follow at a high level.

2 / 3

Workflow Clarity

A clear numbered sequence for a simple, non-destructive layout task with an unambiguous single process; per the simple-skills note this can score 3 without validation checkpoints. It is not 2 because the steps are well-sequenced and unambiguous.

3 / 3

Progressive Disclosure

Under 50 lines with well-organized sections (Use When, Workflow, Guardrails) and no need for external references; the simple-skills note allows a 3. It is not 2 because the structure is clean and appropriately self-contained.

3 / 3

Total

11

/

12

Passed

Description

60%

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 about the technique but omits any 'when to use' trigger guidance, capping completeness. Adding a natural-language 'Use when...' clause with terms users would say would raise trigger quality and distinctiveness.

Suggestions

Append a 'Use when...' clause with natural trigger terms (e.g., 'Use when building a container-in-container layout, nested frame systems, or multi-level page sections').

Add common user-facing phrasing such as 'inset containers', 'layered frames', or 'bounded layout' to improve trigger-term quality.

Clarify what makes this distinct from a general layout skill to reduce conflict risk.

DimensionReasoningScore

Specificity

Lists multiple concrete actions such as 'outer centered container with visible vertical boundary lines and corner markers', 'inner containers inset from the edges', and 'layered frames (border + background)'. It is not below 3 because the actions are specific and varied, not a single vague verb.

3 / 3

Completeness

It thoroughly answers 'what' but never states when Claude should use it; there is no explicit trigger guidance. Per the rubric guidelines a missing 'Use when...' clause caps completeness at 2.

2 / 3

Trigger Term Quality

It names the domain ('container-in-container layout', 'nested frames') but lacks natural phrases a user would actually say and omits common variations. It is not 3 because there is no 'Use when...' trigger with natural keywords, and not 1 because the domain terms are relevant rather than pure jargon.

2 / 3

Distinctiveness Conflict Risk

The niche ('nested container frames') is fairly specific but the layout/frames terminology could overlap with general layout skills and there are no triggers to disambiguate. It is not 3 because conflict risk remains without distinct triggers, and not 1 because it is not generic.

2 / 3

Total

9

/

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.