CtrlK
BlogDocsLog inGet started
Tessl Logo

css-containment

Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS containment to limit repaint scope. Check the rendered layout across breakpoints and interaction states before proposing a fix.

54

Quality

61%

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/css-containment/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%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 skill is well structured as a concise overview with a clean single reference carrying the implementation detail, but the body itself leans on vague directives ('appropriate contain values', 'identify components') without any concrete CSS, and its conceptual intro duplicates the reference file. Moving the duplicated explanation out and putting one small executable example or precise value-selection guidance in the body would raise actionability and conciseness.

Suggestions

Delete the duplicated conceptual intro paragraph (it re-explains known material and repeats references/rule.md's 'Why It Matters' almost verbatim).

Make the Fix section concrete: name which contain value suits which case (e.g. 'contain: strict for fixed-size widgets; contain: content for repeated list items; content-visibility: auto with contain-intrinsic-size for off-screen sections') or inline one short CSS snippet.

Turn Check/Fix/Code Review into an explicit ordered sequence with a verification step (e.g. 'identify candidates → apply contain values → re-check rendered layout at breakpoints before proposing the fix') so the checkpoint in the description is also in the body.

DimensionReasoningScore

Conciseness

The body is mostly lean, but the intro paragraph ('By default, a CSS change anywhere on the page can potentially affect any other element's layout...') re-explains a concept Claude already knows and is duplicated nearly verbatim in references/rule.md's 'Why It Matters'; the Code Review section also restates the description. Matches 'mostly efficient but includes some unnecessary explanation' rather than the minor-trim anchor 4.

3 / 5

Actionability

The Quick Reference provides concrete contain values ('contain: layout style paint', 'content-visibility: auto', 'contain: strict'), but the Fix section is vague ('Add appropriate contain values') with no selectors or CSS in the body — all executable code lives in the reference. Some concrete guidance but incomplete on its own, matching anchor 3; the high-level-only anchor 2 is too harsh given the specific values listed.

3 / 5

Workflow Clarity

Check/Fix/Explain/Code Review read as parallel task categories rather than a clearly sequenced workflow, and the validation checkpoint (check the rendered layout across breakpoints before proposing a fix) is stated in the description and reference but only implicit in the body. No destructive/batch cap applies; the steps are listed but checkpoints are implicit, matching anchor 3.

3 / 5

Progressive Disclosure

The body is a concise overview and points to exactly one well-signaled, one-level-deep reference ('For full implementation details, code examples, and framework-specific guidance, see references/rule.md'), which exists and contains the code examples, use cases, and verification steps. This matches the clear-overview-with-well-signaled-references anchor.

5 / 5

Total

14

/

20

Passed

Description

66%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 has both an explicit 'Use when' trigger clause and concrete actions with good natural keywords, but it is weakened by the mechanically embedded rule title mid-sentence and a broad trigger surface that risks overlap with similar CSS review skills. Tightening the phrasing and adding distinguishing synonyms (contain property, reflow, rendering performance) would lift it.

Suggestions

Rewrite the trigger clause so the rule title is not embedded verbatim mid-sentence, e.g. 'Use when reviewing CSS for repaint/reflow scope, containment, or rendering performance of stylesheets and component styles.'

Add distinguishing synonyms such as 'contain property', 'reflow', and 'rendering performance' to the trigger terms to reduce overlap with generic stylesheet/responsive review skills.

State the skill's concrete deliverables up front (e.g. 'Identify self-contained components, add contain/content-visibility values, and verify the rendered layout') instead of only 'Check the rendered layout... before proposing a fix'.

DimensionReasoningScore

Specificity

The description names the domain ('Use CSS containment to limit repaint scope') and 1-2 concrete actions ('Check the rendered layout across breakpoints and interaction states before proposing a fix'), but the mid-sentence re-embedding of the rule title ('related to Use CSS containment to limit repaint scope') muddles the action statement and coverage is not comprehensive. Not score 4 because it lacks the several cleanly listed specific actions of that anchor; not score 2 because it goes beyond naming the domain.

3 / 5

Completeness

Both what ('Check the rendered layout across breakpoints and interaction states before proposing a fix') and when ('Use when reviewing stylesheets, component styles, and responsive behavior related to...') are explicitly present with concrete trigger phrases. Not score 5 because the duplicated title phrase inside the 'when' clause makes the trigger statement awkward and less cleanly explicit than the anchor example.

4 / 5

Trigger Term Quality

Good natural keyword coverage: 'stylesheets', 'component styles', 'responsive behavior', 'breakpoints', 'interaction states', 'repaint'. Missing a few natural terms users would say, such as 'reflow', 'rendering performance', or 'contain property', so it falls short of the comprehensive anchor 5.

4 / 5

Distinctiveness Conflict Risk

The trigger surface ('reviewing stylesheets, component styles, and responsive behavior') is broad frontend-review territory that would overlap with sibling CSS-review skills; only the embedded containment/repaint phrase distinguishes it. Somewhat specific but still overlapping, matching anchor 3 rather than the mostly-distinct anchor 4.

3 / 5

Total

14

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
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.