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

62%

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

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

The body is a concise, well-structured overview that defers detail to a real, well-organized references/rule.md file, achieving solid progressive disclosure and token efficiency. Its weaknesses are actionability (no executable code in the body itself) and workflow clarity (no explicit validation checkpoint before proposing a fix despite breakpoint/layout changes).

Suggestions

Add one short, executable CSS snippet to the body (e.g. the min-width:0 fix or flex:1 1 0 pattern) so the skill is copy-paste ready without opening the reference.

Insert an explicit verification checkpoint in the Check/Fix flow, e.g. 'Confirm the computed styles match the fix in DevTools before shipping', to mirror the reference's Verification section.

Briefly enumerate what references/rule.md contains (flex shorthand table, min-width:0 fix, gap vs margin, centering) so navigation is explicit rather than implied.

Dimension	Reasoning	Score
Conciseness	The body is short and mostly lean — a Quick Reference, Check/Fix/Explain/Code Review breakdown, and a pointer to references/rule.md — with only minor restatement (the opening paragraph repeats the 'min-width:0' point also in Quick Reference). It assumes Claude's CSS competence rather than re-explaining basics.	4 / 5
Actionability	The body gives high-level direction ('add min-width:0 where needed, replace inter-item margins with gap, correct flex shorthand values') but no executable code or copy-paste examples in SKILL.md itself; concrete, runnable examples live only in references/rule.md, leaving the body as guidance rather than instruction.	3 / 5
Workflow Clarity	The Check → Fix → Explain → Code Review sections imply a sequence, but there is no explicit validation checkpoint before proposing a fix despite the skill involving layout changes across breakpoints; the rubric's destructive/batch cap is not triggered, yet checkpoints remain only implicit.	3 / 5
Progressive Disclosure	Structure is good: a concise overview body with clearly signaled one-level-deep pointer to references/rule.md (a real file), and the reference itself is well-organized; minor gap is that the body doesn't enumerate what sub-topics the reference covers to aid discovery.	4 / 5
	Total	14 / 20 Passed

Description

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

The description has a clear 'Use when' trigger and names the flexbox/responsive domain with a concrete check action, but it is padded with the redundant 'related to Apply Flexbox best practices' and uses second-person imperative voice. Tightening it to lead with the flexbox trigger and concrete reviewing actions would raise both specificity and completeness.

Suggestions

Rewrite to lead with the natural trigger, e.g. 'Use when reviewing or debugging Flexbox layouts, responsive component styles, or breakpoint breakage', so the flexbox keyword appears up front.

Replace the redundant filler 'related to Apply Flexbox best practices' with the concrete actions the skill performs (e.g. 'check flex shorthand, min-width:0, and gap usage').

Use third-person voice ('Checks the rendered layout...') instead of the imperative 'Check...' to satisfy the rubric's voice requirement.

Dimension	Reasoning	Score
Specificity	Names the domain ('stylesheets, component styles, and responsive behavior') plus one concrete action ('Check the rendered layout across breakpoints and interaction states'), but coverage of what the skill actually does is thin and the clause 'related to Apply Flexbox best practices' is generic filler; the imperative 'Check...' is second-person voice, pulling specificity down per the rubric.	3 / 5
Completeness	Explicitly answers 'what' (review and check flexbox-related layout) and 'when' via a clear 'Use when...' clause, but the 'when' could be more specific about the triggering user intent rather than restating the task.	4 / 5
Trigger Term Quality	Contains several natural user-facing terms ('stylesheets', 'component styles', 'responsive behavior', 'breakpoints', 'interaction states') that a developer would plausibly say, missing only a few synonyms or the literal 'flexbox'/'flex' trigger word.	4 / 5
Distinctiveness Conflict Risk	Scoped to flexbox/responsive layout review, which is mostly distinct from sibling CSS skills, though the generic 'stylesheets/component styles/responsive behavior' framing leaves minor overlap risk with broader CSS-review skills.	4 / 5
	Total	15 / 20 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: 30756a7

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