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.

Quality

57%

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 ./skills/css-containment/SKILL.md

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 well-structured as an overview that defers detail to a single, clearly signaled reference, scoring well on progressive disclosure. However, it explains a concept Claude already knows, lacks executable code in the body itself, and does not surface validation steps in its workflow.

Suggestions

Drop or trim the opening concept paragraph that restates what CSS containment is, since it duplicates content in references/rule.md and explains a concept Claude already knows.

Add at least one small executable CSS snippet to the body so the core fix is copy-paste ready without opening the reference.

Surface the key verification step (check rendered layout at mobile + desktop breakpoints before shipping) inline in the workflow rather than only in references/rule.md.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean (Quick Reference bullets and short Check/Fix/Explain/Code Review sections), but the opening paragraph explains what CSS containment is — a concept Claude already knows — and that explanation is duplicated in references/rule.md.	2 / 3
Actionability	It offers some concrete guidance ('Add appropriate contain values to self-contained components. Add content-visibility: auto to repeated off-screen list items') and a Quick Reference of values, but the body itself contains no executable code examples, deferring all of them to references/rule.md.	2 / 3
Workflow Clarity	The Check → Fix → Explain → Code Review sequence is present, but there are no explicit validation checkpoints in the body; verification steps live only in references/rule.md and are not surfaced or sequenced here.	2 / 3
Progressive Disclosure	The body is a concise overview with a single, clearly signaled one-level-deep reference to references/rule.md, which exists as a real file and holds the detailed examples.	3 / 3
	Total	9 / 12 Passed

Description

57%

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 includes an explicit trigger clause and a clear niche, but its effectiveness is undermined by the rule title being awkwardly embedded mid-sentence, producing an ungrammatical and confusing capability statement. The actions named are also generic rather than concrete.

Suggestions

Remove the duplicated rule-title fragment so the description reads as a grammatical sentence, e.g. 'Use when reviewing stylesheets, component styles, and responsive behavior to limit repaint scope with CSS containment.'

Replace generic verbs ('reviewing', 'Check the rendered layout') with more concrete capability actions to lift specificity.

Add common natural-language variations ('repaints', 'reflows', 'rendering performance') users would actually say.

Dimension	Reasoning	Score
Specificity	It names the domain ('reviewing stylesheets, component styles, and responsive behavior', 'Check the rendered layout across breakpoints and interaction states') and some actions (review, check, propose a fix), but the actions are generic rather than a list of multiple distinct concrete actions.	2 / 3
Completeness	It has an explicit 'Use when...' trigger clause, but the 'what' is muddied by the duplicated rule title 'related to Use CSS containment to limit repaint scope', leaving the capability description grammatically garbled rather than clearly stated.	2 / 3
Trigger Term Quality	Relevant keywords appear ('stylesheets', 'component styles', 'responsive behavior', 'breakpoints', 'interaction states'), but the awkward embedded phrase 'related to Use CSS containment to limit repaint scope' is not a natural utterance and lacks common variations a user would say.	2 / 3
Distinctiveness Conflict Risk	CSS containment and repaint scope form a clear, narrow niche with triggers unlikely to overlap with unrelated skills.	3 / 3
	Total	9 / 12 Passed

Validation

93%

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

Validation for skill structure

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: thedaviddias/Front-End-Checklist
Path: skills/css-containment/SKILL.md
Commit: 48405aa

Reviewed: about 9 hours 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.