CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

tinyworld-block-button-style

Use when styling any tool/block button, palette tile, icon chip, or new clickable square in Tiny World Builder. The locked-in "block" aesthetic — a raised square with a dark category-colored outline, an inner white line, and a white-bodied glyph outlined in the same dark color. Apply this whenever a new icon button/tile is added so the UI stays consistent.

70

Quality

88%

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

SKILL.md
Quality
Evals
Security

Quality

Content

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

An exemplary project-specific style guide: fully executable CSS with exact values, named integration points, and hard-won gotchas that assume Claude's competence and add only what it could not know. The main improvements are structural — sequencing the application guidance with an explicit verification checkpoint and splitting per-component exception rules into a reference file.

Suggestions

Restructure 'Applying it to a new button/tile' into a short numbered sequence (assign data-pos-type → build the icon via buildToolButton → add any component-specific selectors) ending with the browser pixel-check verification step, so validation is an explicit checkpoint rather than a trailing gotcha.

Move the long per-component exception rules (radial menu, appbar/language trigger, token corner, world-pill, dark-theme overrides) into a references/ file (e.g., COMPONENT-EXCEPTIONS.md) and keep the core recipe and palette in SKILL.md with clearly signaled links.

Trim the wordier bullets (world-pill resting fill rationale, token corner, dark-theme explanation) to bare rules — e.g., '.token-corner: no data-pos-type, border, blur, or hover transforms' — to reduce token cost without losing constraints.

DimensionReasoningScore

Conciseness

The body is dense with project-specific facts Claude could not know (exact rgba values, paint-order/vector-effect placement rules, selector orders) and explains no general CSS concepts. A few exception bullets (world-pill, token corner, dark-theme overrides) run wordy and could be tightened, so it is anchor 4 rather than the fully lean anchor 5.

4 / 5

Actionability

Guidance is copy-paste executable: complete CSS rules for the glyph and the raised square with exact box-shadow layers, a per-category color table, named functions and files ('posTypeForTool() in 19-tools-toolbar.js', 'buildToolButton(tool, { flyout: true })'), and a concrete pixel-level verification. The 'per posType: set --glyph-outline' comment is a minor omission that does not undermine coverage of the common case.

5 / 5

Workflow Clarity

'Applying it to a new button/tile' gives clear, per-component instructions with named helpers, and the Gotchas section ends with a verification step ('Verify in a real browser... sample the rendered pixels'), but the application guidance is a checklist of exceptions rather than a sequenced workflow and verification is a trailing note, not an explicit checkpoint. Anchor 4: clear guidance with minor validation/sequencing gaps.

4 / 5

Progressive Disclosure

Well-organized sections (three ingredients, palette table, recipe, applying, gotchas) with no nested references and no dead links — the referenced paths (styles/tiny-world.css, 19-tools-toolbar.js) are project files, and no bundle files exist to mis-navigate. The ~140-line body inlines many per-component exceptions (radial menu, appbar, token corner, dark-theme rules) that could be split into a reference file, keeping it at anchor 4.

4 / 5

Total

17

/

20

Passed

Description

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

A strong, well-scoped description: it states exactly what the locked 'block' aesthetic is and gives two explicit 'use when' triggers tied to natural user phrasing. The only soft spot is trigger-term breadth (missing a few synonyms like toolbar or icon), which keeps specificity and trigger quality at 4.

DimensionReasoningScore

Specificity

Names concrete style elements ('a raised square with a dark category-colored outline, an inner white line, and a white-bodied glyph outlined in the same dark color') and concrete targets ('tool/block button, palette tile, icon chip'), but the action list itself is narrow — apply this style — rather than a comprehensive set of capabilities. Fits anchor 4 (several specific actions, minor gaps) better than 5.

4 / 5

Completeness

Explicitly answers 'when' with two trigger clauses ('Use when styling any tool/block button... or new clickable square in Tiny World Builder', 'Apply this whenever a new icon button/tile is added') and 'what' with a precise description of the block aesthetic. Matches anchor 5; not 4 because the 'when' is explicit and concrete rather than improvable.

5 / 5

Trigger Term Quality

Natural trigger phrases are present ('styling', 'button', 'palette tile', 'icon chip', 'new clickable square', 'icon button/tile'), covering what a user would say when adding UI chrome. A few synonyms (e.g., toolbar, icon) are missing, so it is above the midpoint but not the comprehensive anchor 5.

4 / 5

Distinctiveness Conflict Risk

Scoped to a named project ('Tiny World Builder') and a specific locked-in design language, giving it a clear niche with distinct triggers and minimal risk of firing for unrelated styling skills. Clearly anchor 5, not 4, since no overlap with other skills' domains is plausible.

5 / 5

Total

18

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

jasonkneen/tiny-world-builder

Path

.codex/skills/tinyworld-block-button-style/SKILL.md

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.