CtrlK
BlogDocsLog inGet started
Tessl Logo

container-lines

Add vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small corner-square frame details.

71

Quality

87%

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

96%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 exemplary lean, action-first CSS pattern skill: copy-paste executable code, unambiguous application order, taste guidance, and an explicit validation checklist with zero padding. The only structural question is marginal — whether a small variant/reference file would help as the skill grows.

DimensionReasoningScore

Conciseness

The body is lean throughout — directives like "Use pseudo-elements on the layout shell" and "Use the same container width as the line positions" assume Claude's competence, with no explanations of CSS concepts Claude already knows; every section (tokens, code, taste rules, checks) earns its place — a clear match for anchor 5.

5 / 5

Actionability

All guidance is copy-paste ready: complete executable CSS token block, pseudo-element line implementation, corner-square CSS with matching HTML markup, and a section wrapper — fully covering the common cases with no pseudocode, matching anchor 5.

5 / 5

Workflow Clarity

For this simple single-purpose skill, the flow (tokens → container lines → corner squares → section wrapper) is unambiguous, and the "Quick Checks" section acts as an explicit validation checklist (alignment, corner placement, dark/light subtlety, mobile padding, pointer events) — matching anchor 5's checklist criterion; there are no destructive or batch operations that would require feedback loops.

5 / 5

Progressive Disclosure

Sections are well organized with clear headers and everything is appropriately placed in one file (no bundle files exist, and splitting a single cohesive CSS pattern would not aid navigation). It sits just below anchor 5 because the skill is ~90 body lines — beyond the under-50-line simple-skill carve-out — and a variant gallery or dark-mode token reference could arguably live in a separate file; organization is otherwise good with no inlined content that clearly belongs elsewhere.

4 / 5

Total

19

/

20

Passed

Description

78%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 with an explicit what/when structure and multiple natural trigger synonyms in the design-guide niche. It is slightly thin on the action list (two composite actions) and includes the skill's own coined term as a trigger, which caps trigger quality and distinctiveness just below the top anchors.

Suggestions

Expand the 'what' clause with one or two more concrete actions (e.g., '...and shared container tokens so guide lines align exactly with content edges') to lift specificity from naming 2 actions to listing several.

Add more natural user phrasings as triggers, such as 'grid lines', 'ruler lines', or 'layout guides', and drop or de-emphasize the self-referential 'container lines' trigger since users are unlikely to say the skill's own name unprompted.

Consider narrowing the trigger list to phrases unique to this pattern (e.g., removing the broad 'measured layout guides') to further reduce overlap risk with general layout/grid skills.

DimensionReasoningScore

Specificity

"Add vertical container-size guide lines with mini corner squares" names the domain (web layout styling) and two concrete actions (draw guide lines, add corner squares), but offers no broader coverage of variations (e.g., horizontal lines, section-level variants) — matching the anchor for 1-2 concrete actions without comprehensiveness, and clearly below the 'several specific actions' of level 4.

3 / 5

Completeness

"Add vertical container-size guide lines with mini corner squares for precise, structured web layouts" answers what, and "Use when asked for container lines, measured layout guides..." explicitly answers when with concrete trigger phrases — a clear match for anchor 5.

5 / 5

Trigger Term Quality

"container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small corner-square frame details" gives good multi-synonym coverage, but a few natural phrasings users might say (e.g., "grid lines", "layout guides", "ruler lines") are missing, and "container lines" is the skill's own coined term rather than a phrase a user would independently say — between anchors 4 and 5, solidly at 4.

4 / 5

Distinctiveness Conflict Risk

The niche (vertical container boundary lines with corner squares) is quite distinct, but "editorial grid markers" and "measured layout guides" could overlap with general CSS grid/layout-system or dataviz skill triggers — minor overlap risk with closely related skills rather than the minimal conflict of anchor 5.

4 / 5

Total

16

/

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