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.

Quality

71%

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

Quality

Content

85%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a lean, well-organized overview with concrete directive sections and a clearly signaled one-level-deep reference to a real rule.md file. The only weakness is mild verbosity and redundancy in the opening paragraph, which re-explains a concept Claude already knows and repeats a point from the Quick Reference.

Suggestions

Tighten or remove the opening paragraph's re-explanation of the JavaScript-height-matching problem, since the Quick Reference already captures 'No JavaScript height matching needed' and Claude knows CSS subgrid's purpose.

Avoid stating the 'no JavaScript' benefit in both the intro and the Quick Reference; keep it in one place to save tokens.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean and well-structured, but the opening paragraph explains a concept Claude already knows (that card alignment historically needed JavaScript height matching) and repeats the 'no JavaScript height matching' point already in the Quick Reference, so it could be tightened.	2 / 3
Actionability	As an instruction-only body it gives concrete, specific guidance — naming exact properties ('grid-template-rows', 'grid-row: span N', 'grid-template-rows: subgrid') and specific anti-patterns to flag ('JavaScript height matching, fixed heights, display: contents') — which per the rubric's instruction-only note is actionable despite delegating code to the reference.	3 / 3
Workflow Clarity	This is a simple single-purpose skill (under 50 lines) with clearly delineated, unambiguous operations (Check, Fix, Explain, Code Review), so workflow clarity scores 3 per the simple-skills note; it does not involve destructive or batch operations that would require validation checkpoints.	3 / 3
Progressive Disclosure	The body is a concise overview that clearly signals one-level-deep detail — 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — and that reference file exists, giving clean, easy navigation.	3 / 3
	Total	11 / 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 has a strong, explicit 'Use when' trigger and a distinct niche, but it is almost entirely a 'when' clause: the concrete 'what' action (applying CSS subgrid to align nested grid items) is only implied rather than stated. Naming the actual technique and a few concrete actions would lift the weaker dimensions.

Suggestions

State the 'what' explicitly up front, e.g. 'Align nested grid items to parent tracks using CSS subgrid', then keep the 'Use when...' clause for the trigger.

Add concrete action verbs and natural trigger terms ('apply subgrid', 'align card titles/content/footers', 'subgrid') so users and Claude can match the skill more directly.

Trim the technical phrasing ('child items need to align with sibling cards' corresponding sections') toward terms a user would actually say, like 'cards not lining up' or 'misaligned card grids'.

Dimension	Reasoning	Score
Specificity	The description names the domain ('card grid layouts with misaligned content areas', 'nested grid where child items need to align with sibling cards' corresponding sections') and one action ('reviewing'), but does not list multiple concrete actions like 'apply subgrid', 'set grid-template-rows', or 'align titles and footers', so it is not comprehensive.	2 / 3
Completeness	It has an explicit and strong 'Use when...' trigger clause (the 'when'), but the 'what' is only implied — the verb 'reviewing' is weak and the actual fix action (applying CSS subgrid) is never stated, so it does not clearly answer both what and when.	2 / 3
Trigger Term Quality	It includes some natural terms a user might say ('card grid layouts', 'misaligned content areas'), but the remainder ('child items need to align with sibling cards' corresponding sections without JavaScript intervention') is technical jargon and it omits common variations such as 'subgrid' itself or 'cards not lining up'.	2 / 3
Distinctiveness Conflict Risk	It carves a clear niche — nested card-grid alignment of corresponding sections without JavaScript — which is the specific subgrid use case and is unlikely to fire for 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/subgrid/SKILL.md
Commit: 48405aa

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