CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

bestax-layout-scaffold

Scaffold a complete, responsive page layout with @allxsmith/bestax-bulma — app shells/dashboards, marketing/landing pages, centered auth/settings pages, and card-grid catalogs. Use when building a full page or overall app layout (not a single component).

Quality

83%

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

70%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 an unusually dense, prescriptive rulebook with exact props, snippets, and a decision table plus validation checklist — highly actionable and workflow-clear. Its weaknesses are token efficiency (large amounts of component-usage detail inlined beyond the layout-scaffolding scope) and progressive disclosure (five referenced example files missing from the bundle, with heavy inline reference material).

Suggestions

Ship the five `examples/*.tsx` files listed in the Examples section (app-shell, landing, centered, card-grid, content-page) or remove those paths and the `examples/` mentions inside archetypes.md, so no navigation in the skill is dangling.

Move the interactive-extras run-on bullet and the per-component sections (EmptyState, Timeline, DescriptionList, TreeView, Menu.Section, Splitter, ScrollArea, Command.Dialog) into a `references/components.md` file, keeping SKILL.md to archetype selection, layout composition rules, and the mapping table.

Split the ~45-line interactive-extras sentence into one short line per component (or a two-column use/not-this table like the existing one) so the guidance is scannable instead of parenthetically nested.

DimensionReasoningScore

Conciseness

The body is dense and prescriptive with no conceptual fluff (no explaining what CSS Grid or responsive design is), but it is scope-bloated: the ~45-line single-sentence interactive-extras bullet (Collapse, Tabs, ToggleButton, SegmentedControl, Popover, HoverCard, ContextMenu, Steps, Reveal) and ten-plus component-usage sections (EmptyState, Timeline, DescriptionList, TreeView, Menu.Section, Splitter, ScrollArea, Command.Dialog) go well beyond page-layout scaffolding and could be tightened or moved to references. Mostly efficient but could be tightened fits anchor 3; anchor 4's 'minor instances' understates the volume of off-scope material.

3 / 5

Actionability

Guidance is highly concrete — exact prop names, adaptable JSX snippets (e.g. `<Splitter height={480}>` with pane props, `<EmptyState icon="folder-open" title="No projects yet" titleAs="h3">`), a complete runnable CSS block, and a precise inline-style-to-helper mapping table with exact scale values. Not 5 because many snippets carry ellipses (`description="…"`, `items={[…]}`) and the full runnable versions promised in `examples/*.tsx` are not present in the bundle, leaving minor gaps in executable coverage.

4 / 5

Workflow Clarity

The multi-step flow is unambiguous: a behavioral rule (pick an archetype and build in one shot), a signal-to-archetype selection table with defaults and mixed-request resolution ("admin dashboard with a product list → App shell whose main column holds a Card grid"), and a closing Checklist that serves as an explicit validation checkpoint. No destructive or batch operations, so no validation cap applies; matches anchor 5's clear sequence with a checklist.

5 / 5

Progressive Disclosure

The two references files (layout-components.md, archetypes.md) exist and are clearly signaled with one-line content descriptions, but the body's Examples section lists five `examples/*.tsx` paths that do not exist in the bundle, and archetypes.md itself leans on them ("Full runnable versions live in `examples/`"), making that navigation dangling. Additionally, substantial component-reference material (the interactive-extras bullet and component sections) is inlined in SKILL.md rather than split out. This matches anchor 3's 'content that should be separate is inline'; anchor 4's 'minor organization gaps' does not cover broken references.

3 / 5

Total

15

/

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 description: concrete, third-person, names the library and the four page archetypes, and gives an explicit 'Use when' trigger with a scope boundary. Only minor gaps in synonym coverage keep trigger-term quality and specificity from full marks.

DimensionReasoningScore

Specificity

"Scaffold a complete, responsive page layout" names the action and enumerates four concrete deliverables ("app shells/dashboards, marketing/landing pages, centered auth/settings pages, and card-grid catalogs"), matching the several-specific-actions anchor with minor gaps. Not 5 because it is a single scaffold verb applied to enumerated cases rather than comprehensive multi-action coverage; not 3 because it goes beyond 1-2 actions.

4 / 5

Completeness

Explicitly answers both: what ("Scaffold a complete, responsive page layout with @allxsmith/bestax-bulma" plus the four page types) and when ("Use when building a full page or overall app layout (not a single component)") — a concrete trigger phrase with an explicit boundary. This matches anchor 5; anchor 4's 'when could be more explicit' does not apply since the when-clause is direct and scoped.

5 / 5

Trigger Term Quality

Natural user phrases are well covered — "dashboard", "landing", "marketing", "auth", "settings", "catalog", "page layout", "app shell" — but a few common variations ("homepage", "admin", "form", "grid") are missing. Good coverage with a few natural terms absent fits anchor 4, below anchor 5's comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

Names a specific package (@allxsmith/bestax-bulma) and explicitly excludes the adjacent niche ("not a single component"), giving a clear layout-scaffolding niche with distinct triggers and minimal conflict risk, matching anchor 5.

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

allxsmith/bestax

Path

skills/bestax-layout-scaffold/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.