CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

54

Quality

61%

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

Quality

Content

53%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 well-structured and appropriately delegates detail to references/rule.md, but it spends tokens on a redundant intro paragraph and a Code Review section that restates the description, and its check/fix workflow lacks a post-fix validation step. Actionability is moderate: concrete property names are given, but no executable examples or fix specifics live in the body itself.

Suggestions

Add an explicit validation step after Fix (e.g., "4. Verify: re-check the rendered layout across the affected breakpoints and interaction states"), ideally as a feedback loop (if still broken, re-examine flex-basis/min-width).

Remove the duplicated intro paragraph (it repeats rule.md's "Why It Matters" verbatim) and either drop or merge the Code Review section, which restates the frontmatter description.

Include one short executable CSS snippet in the Fix section (e.g., the min-width:0 + text-overflow:ellipsis pattern) so the body is actionable without opening the reference.

DimensionReasoningScore

Conciseness

The intro paragraph ("Flexbox is one of the most used CSS features, but its unintuitive default values...") explains general CSS knowledge Claude already has and is duplicated verbatim as "Why It Matters" in references/rule.md, while the "Code Review" section largely restates the frontmatter description. The Quick Reference and one-line sections are lean, so the body is mostly efficient with removable padding.

3 / 5

Actionability

Concrete guidance exists ("Use flex: 1 1 0 (shorthand: flex:1)", "Add min-width: 0", "Use gap instead of margin"), but the Fix section gives no code examples or selector context and defers specifics ("correct flex shorthand values") to the reference, so the body alone is incomplete for executing a fix.

3 / 5

Workflow Clarity

Check → Fix → Explain → Code Review sections provide a rough sequence, but there is no explicit validation step after fixing (e.g., re-checking the rendered layout across breakpoints), so checkpoints are missing or only implicit.

3 / 5

Progressive Disclosure

The body is a short overview with a clearly signaled, verified, one-level-deep pointer ("see `references/rule.md`"). It falls short of a 5 because the intro/Quick Reference content substantially duplicates references/rule.md rather than cleanly splitting concerns between the files.

4 / 5

Total

13

/

20

Passed

Description

70%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 an explicit trigger clause and reasonable natural keywords, but the what-side is diluted by awkward pasted-title phrasing ("related to Apply Flexbox best practices") and omits the skill's concrete fix actions. It distinguishes itself reasonably well from other skills.

Suggestions

Rewrite the first sentence so the skill's title is not pasted mid-sentence; state the what directly, e.g. "Review and fix Flexbox layout issues: incorrect flex shorthand, missing min-width:0 on flex children, margins instead of gap."

Add missing natural trigger terms such as "flex", "CSS layout", and ".css" files so users phrasing the need in those words will match.

DimensionReasoningScore

Specificity

"Check the rendered layout across breakpoints and interaction states before proposing a fix" names the domain (flexbox/CSS styles) plus two concrete actions (review/check, propose fix), but the skill's core fix actions (min-width:0, gap, flex shorthand) are absent, so coverage is not comprehensive.

3 / 5

Completeness

An explicit "Use when reviewing stylesheets, component styles, and responsive behavior" clause is present alongside an implied what ("Apply Flexbox best practices", check/propose fix), but the what is weakened by the garbled phrasing "related to Apply Flexbox best practices", so it is not crisply stated as in the anchor 5 example.

4 / 5

Trigger Term Quality

Good natural keyword coverage — "stylesheets", "component styles", "responsive behavior", "Flexbox", "breakpoints", "interaction states" — but a few obvious terms users would say ("flex", "CSS layout", ".css") are missing.

4 / 5

Distinctiveness Conflict Risk

Clearly scoped to flexbox/layout review and unlikely to trigger for unrelated skills, though the broad "stylesheets" and "responsive" terms create minor overlap risk with generic CSS-review skills.

4 / 5

Total

15

/

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.