CtrlK
BlogDocsLog inGet started
Tessl Logo

css-grid

Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS Grid for two-dimensional layouts. Check the rendered layout across breakpoints and interaction states before proposing a fix.

60

Quality

71%

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

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 with good progressive disclosure and a clean reference split, but it leans on the reference file for all executable code and verification steps, leaving inline actionability and workflow checkpoints incomplete.

Suggestions

Include at least one small executable CSS Grid snippet inline in the Fix section so the body is actionable without opening the reference.

Add a brief inline verification checkpoint (e.g. 'Confirm the rendered layout at the affected breakpoints before finalizing') rather than deferring all checks to the reference.

Trim the opening 'Why It Matters' paragraph since it restates CSS Grid fundamentals Claude already knows.

DimensionReasoningScore

Conciseness

The body is mostly lean with well-organized sections, but the opening paragraph ('CSS Grid solves layout problems that previously required JavaScript or complex CSS hacks...') explains a concept Claude already knows and could be trimmed.

2 / 3

Actionability

The Fix section names target properties ('grid-template-columns, grid-template-rows, grid-template-areas') but the body contains no executable code; all copy-paste-ready examples live only in references/rule.md, leaving the inline guidance incomplete.

2 / 3

Workflow Clarity

Check/Fix/Explain/Code Review sections imply a sequence, but no explicit validation checkpoints appear in the body — verification guidance exists only in the reference — so checkpoints are implicit rather than stated.

2 / 3

Progressive Disclosure

The body is a concise overview with a single clearly signaled, one-level-deep reference to the real file references/rule.md, and sections are well organized for easy navigation.

3 / 3

Total

9

/

12

Passed

Description

85%

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, complete, and distinct, with an explicit 'Use when' trigger and concrete review actions. Its main weakness is trigger-term quality: it awkwardly embeds the rule title instead of using natural user phrasings for grid layouts.

Suggestions

Reword 'related to Use CSS Grid for two-dimensional layouts' into natural trigger terms a user would say, e.g. 'when the user mentions grid layouts, two-dimensional layouts, or CSS Grid'.

Add common variations such as 'grid', 'grid layout', and 'two-dimensional layout' alongside 'stylesheets' and 'responsive behavior' for broader trigger coverage.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'reviewing stylesheets, component styles, and responsive behavior' and 'Check the rendered layout across breakpoints and interaction states' — matching the multiple-specific-actions anchor.

3 / 3

Completeness

Explicitly answers what (review stylesheets/responsive behavior, check rendered layout) and when via a 'Use when ...' clause, satisfying both halves.

3 / 3

Trigger Term Quality

Includes relevant terms ('stylesheets', 'responsive behavior', 'breakpoints', 'interaction states') but inserts the rule title ('related to Use CSS Grid for two-dimensional layouts') awkwardly and omits common natural phrasings like 'grid layout' or 'two-dimensional layout'.

2 / 3

Distinctiveness Conflict Risk

Scoped to CSS Grid two-dimensional layouts with distinct triggers, making it unlikely to fire for unrelated skills.

3 / 3

Total

11

/

12

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.

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