CtrlK
BlogDocsLog inGet started
Tessl Logo

subgrid

Use when reviewing card grid layouts with misaligned content areas, or any nested grid where child items need to align with sibling cards' corresponding sections without JavaScript intervention.

60

Quality

70%

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

Quality

Content

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

A well-structured, token-efficient instruction skill: clear mode-based sections, concrete property-level fix guidance, and exemplary progressive disclosure to a real, matching reference file. Only minor refinements remain — slight intro/Quick-Reference redundancy and a missing verification cue in the body.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence, with no padding or explanation of basics Claude already knows. Minor trimming opportunities keep it below 5: the intro's 'matching title heights, content areas, and footers' repeats the Quick Reference bullet 'Solves misaligned card titles, content, and footers', and the browser version numbers ('Safari 16+, Chrome/Edge 117+, Firefox 71+') duplicate the reference file's Browser Support section without being in a deprecated/old-patterns context.

4 / 5

Actionability

The Fix section gives concrete, property-level instruction — 'set grid-template-rows on the parent grid, then apply grid-row: span N and grid-template-rows: subgrid on each card' — which is specific enough to execute, and per the rubric's instruction-only note the absence of inline code is acceptable since full examples live in references/rule.md. It is not 5 because the Check section stays high-level ('These are candidates for subgrid') with no concrete detection cue such as a selector or pattern to grep for.

4 / 5

Workflow Clarity

The four labeled modes (Check / Fix / Explain / Code Review) give an unambiguous structure for a simple single-purpose skill, and the Fix section sequences parent-then-child steps clearly. It is not 5 because no explicit validation or verification checkpoint appears in the body — the reference file contains a Verification section, but the body never signals it — leaving a minor validation gap.

4 / 5

Progressive Disclosure

The short, well-sectioned body points to a single, clearly signaled, one-level-deep reference: 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — and that file exists (212 lines) with exactly the promised content (Code Example, Subgrid on Columns, Named Lines, Browser Support, Verification). Content is appropriately split between overview and detail with easy navigation.

5 / 5

Total

17

/

20

Passed

Description

61%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, explicit trigger description with concrete natural phrasing for the card-grid alignment problem, but it is a 'when'-only description: the skill's capability and even the subgrid technique are never named, forcing inference about what the skill does. Completeness and specificity are the weak points.

Suggestions

Add an explicit 'what' statement before the 'Use when' clause, e.g. 'Aligns nested grid items to parent grid tracks using CSS subgrid so card titles, content, and footers line up without JavaScript.'

Include the technique keyword 'subgrid' (and 'CSS grid') in the description so users who already know the solution term can trigger the skill directly.

Briefly enumerate the skill's modes (check, fix, explain, code review) to raise specificity from trigger-only to capability-listing.

DimensionReasoningScore

Specificity

The description names a specific domain — 'reviewing card grid layouts with misaligned content areas' and 'child items need to align with sibling cards' corresponding sections' — which functions as 1-2 concrete trigger conditions, but it never states what the skill actually does (the technique and actions like check/fix/explain are absent). It is not a 2 because the domain and conditions are concrete rather than generic ('Processes PDF files'), and not a 4 because no list of specific skill actions is present.

3 / 5

Completeness

An explicit and detailed 'when' clause is present ('Use when reviewing card grid layouts with misaligned content areas, or any nested grid where...'), but the 'what' is never explicitly stated — the skill's action and even the technique name (subgrid) are absent, so the reader must infer capability from the trigger. It sits between anchors 2 and 3: it matches anchor 2's pattern of 'only when present without what', but the 'when' is concrete and conveys the alignment purpose, lifting it above the vague anchor-2 example; it cannot be 4 because both an explicit 'what' and 'when' are required.

3 / 5

Trigger Term Quality

Natural user phrasings are present: 'card grid layouts', 'misaligned content areas', 'nested grid', 'align with sibling cards' — these are terms a user would plausibly say. It falls short of 5 because key synonyms are missing, most notably 'subgrid' itself, plus 'CSS grid' and 'card alignment' variants; it is above 3 because coverage goes well beyond a couple of generic keywords.

4 / 5

Distinctiveness Conflict Risk

The description carves a clear niche (cross-card alignment in nested grids) with distinctive phrases like 'sibling cards' corresponding sections' and 'without JavaScript intervention', making wrong-skill triggering unlikely. It is not 5 because without the 'subgrid'/'CSS grid' keywords, broader grid-alignment or layout queries could overlap with related CSS skills; it is clearly above 3's 'could still overlap with similar skills' level.

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