CtrlK
BlogDocsLog inGet started
Tessl Logo

bento

Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.

50

Quality

55%

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

Quality

Content

70%

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 well-organized, token-efficient guideline-authoring framework with concrete design tokens, a sequenced workflow, and explicit quality gates. Its main weaknesses are a small amount of explanatory fluff and the absence of worked examples showing what a produced guideline actually looks like.

Suggestions

Replace the "Brand" paragraph (which explains what bento is) with a one-line purpose statement; Claude already knows the bento concept.

Add one short worked example of a component rule (e.g. a sample "Button" rule showing anatomy, states, and token usage) so the abstract directives become concrete and copy-paste ready.

Tighten abstract Expected Behavior items like "preserve visual hierarchy" by anchoring them to a token or threshold, consistent with the skill's own Quality Gates.

DimensionReasoningScore

Conciseness

The body is mostly compact (token lists, bullet directives, short sections), but the "Brand" sentence ("The bento box style is an innovative design approach that uses a grid layout to present content in visually appealing blocks of varying sizes") explains a concept Claude already knows, and a few Expected Behavior items are abstract; it is efficient but could be tightened.

2 / 3

Actionability

Concrete elements are present (hex color tokens, spacing scale 4/8/12/16/24/32, typography scale, a 6-step workflow, an output structure, constraint-language rules), but there are no worked examples of actual guideline output and several directives stay abstract ("preserve visual hierarchy", "keep interaction states explicit"), leaving guidance incomplete.

2 / 3

Workflow Clarity

The "Guideline Authoring Workflow" is a clearly numbered 6-step sequence ending in a QA checklist, and the "Quality Gates" section supplies explicit validation criteria (anchor each rule to a token/threshold/example; every accessibility statement must be testable), giving clear checkpoints for this authoring task.

3 / 3

Progressive Disclosure

No bundle files exist and none are needed; the body is cleanly divided into well-labeled, navigable sections (Mission, Style Foundations, Rules, Workflow, Output Structure, Quality Gates) with no nested references or wall of text, satisfying progressive disclosure for a self-contained skill of this size.

3 / 3

Total

10

/

12

Passed

Description

40%

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 characterizes the bento aesthetic clearly but reads as a property statement rather than a capability statement: it has no verbs and no "Use when..." trigger guidance. It omits the most natural trigger term ("bento") entirely.

Suggestions

Lead with concrete actions in third person (e.g. "Generates and applies bento-grid layout guidelines...") so the description states capabilities, not just properties.

Add an explicit "Use when..." clause naming natural triggers ("Use when the user asks for a bento grid, bento box layout, card-based dashboard, or modular scannable interface").

Include the term "bento" / "bento grid" in the description itself, since that is the word users will most naturally say when they need this skill.

DimensionReasoningScore

Specificity

The description ("Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces") names no concrete actions — it is a noun phrase describing aesthetic properties rather than verbs like "generates", "applies", or "builds", matching the "no actions; abstract language" anchor.

1 / 3

Completeness

It conveys a weak "what" (the visual style of the output) but provides no "Use when..." clause or equivalent explicit trigger guidance; per the judging guidelines a missing trigger clause caps completeness at 2.

2 / 3

Trigger Term Quality

It includes some natural terms a user might say ("grid layout", "card-like blocks", "scannable interfaces") but omits the most obvious trigger — "bento" / "bento grid" / "bento box" — and common variations like "dashboard" or "card grid", so coverage is partial.

2 / 3

Distinctiveness Conflict Risk

The card-grid / modular-layout niche is somewhat specific, but without the "bento" term or explicit triggers it could overlap with generic grid-layout, dashboard, or card-component design skills.

2 / 3

Total

7

/

12

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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
bergside/awesome-design-skills
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.