flexbox-patterns

Use when reviewing stylesheets, component styles, and responsive behavior related to Apply Flexbox best practices. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Quality

67%

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/flexbox-patterns/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 and uses progressive disclosure effectively by deferring code to references/rule.md, but it leans on direction rather than executable examples in-line and lacks an explicit validation checkpoint in its workflow.

Suggestions

Remove or trim the opening paragraph that restates Flexbox basics already covered in references/rule.md to improve token efficiency.

Add at least one minimal executable CSS snippet (e.g. the min-width:0 truncation fix) directly in the body so the core fix is actionable without opening the reference.

Surface a brief verification step inline (e.g. 'Confirm computed styles in DevTools at one mobile and one desktop viewport') so the workflow has an explicit checkpoint.

Dimension	Reasoning	Score
Conciseness	The body is short and the Quick Reference bullets are lean, but the opening paragraph explains Flexbox basics Claude already knows and overlaps with the reference file's 'Why It Matters' section, fitting 'mostly efficient but includes some unnecessary explanation or could be tightened'.	2 / 3
Actionability	Specific properties are named (min-width:0, gap, flex:1 1 0) and the Check/Fix directives are concrete, but the body itself contains no executable code — all examples are deferred to references/rule.md — so it lands at 'some concrete guidance but incomplete' rather than copy-paste ready.	2 / 3
Workflow Clarity	The Check/Fix/Explain/Code Review sections imply a review-then-fix flow, but they read as parallel modes rather than a sequenced workflow and the body lacks an explicit validation checkpoint (the Verification steps live only in the reference file), matching 'steps listed but validation gaps'.	2 / 3
Progressive Disclosure	The body is a concise overview with clear sections and a well-signaled one-level-deep pointer — 'see references/rule.md' (a verified existing file) — with code examples appropriately split out, matching the 'clear overview with well-signaled one-level-deep references' anchor.	3 / 3
	Total	9 / 12 Passed

Description

77%

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 complete with an explicit 'Use when' trigger and concrete actions, but its trigger phrasing is partly an awkward pasted rule title and its broad framing risks overlap with other CSS review skills.

Suggestions

Reword 'related to Apply Flexbox best practices' into natural user speech, e.g. 'Use when debugging Flexbox layout bugs or reviewing flex-based component styles'.

Add common natural trigger terms like 'flex layout', 'flexbox not working', or 'items not sizing correctly' to improve trigger-term coverage.

Narrow the domain framing so it is less likely to conflict with sibling CSS skills such as Grid.

Dimension	Reasoning	Score
Specificity	It lists multiple concrete actions — 'reviewing stylesheets, component styles, and responsive behavior', 'Check the rendered layout across breakpoints and interaction states', and 'proposing a fix' — rather than vague language, matching the 'lists multiple specific concrete actions' anchor.	3 / 3
Completeness	It explicitly answers 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 Apply Flexbox best practices') with an explicit 'Use when' trigger, matching the top anchor; the 'Use when' clause means completeness is not capped at 2.	3 / 3
Trigger Term Quality	Relevant terms like 'Flexbox', 'stylesheets', 'responsive behavior', 'layout', and 'breakpoints' appear, but the pasted rule-title phrase 'related to Apply Flexbox best practices' is not natural user speech and common variations like 'flex layout' or 'flexbox bugs' are missing, fitting the 'some relevant keywords but missing common variations' anchor.	2 / 3
Distinctiveness Conflict Risk	The 'Flexbox' anchor gives it a clear niche, but the broad framing 'reviewing stylesheets, component styles, and responsive behavior' is shared phrasing that could overlap with sibling CSS-review skills (e.g. Grid), so it lands at 'somewhat specific but could still overlap'.	2 / 3
	Total	10 / 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/flexbox-patterns/SKILL.md
Commit: 48405aa

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