CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

bestax-custom-component

Build a custom React component in the bestax/Bulma style. In an app using @allxsmith/bestax-bulma — compose existing components, helper props, public hooks (useBulmaClasses, usePrefixedClassNames), and --bulma-* CSS variables. In the bestax monorepo — the full component pipeline (SCSS partial, stories, tests, docs, wiring). Use when creating a component beyond stock Bulma or extending one.

Quality

92%

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

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

A strong, highly actionable skill body: executable code, a concrete styling ladder, explicit browser verification with a headless fallback, and a closing checklist. The main defects are bundle hygiene — a dangling example reference and an unsurfaced reference file — plus light redundancy in the interaction-component prose.

Suggestions

Ship `examples/stat-card.tsx` or remove the reference at line 59 — it is cited as "a complete worked example" but is absent from the bundle (patterns.md also points to it).

Surface `references/patterns.md` from SKILL.md (e.g. from the composition section) — it is currently discoverable only through references/library-contributor.md.

Deduplicate the icon-only `aria-label` guidance repeated across the ToggleButton and SegmentedControl paragraphs and tighten the interaction-component prose (lines 66–108).

DimensionReasoningScore

Conciseness

The body is dense and library-specific with no padding about concepts Claude already knows, but has minor trimmable redundancy — e.g. "an icon-only one needs an `aria-label`" repeats across the ToggleButton paragraph ("An icon-only segment needs its own `aria-label`, as an icon-only `ToggleButton` does"), and the ~40 lines of interaction-component prose could be tightened.

4 / 5

Actionability

Fully executable, copy-paste-ready guidance: the complete component-spine TSX, a scoped CSS example consuming `--bulma-*` variables, `npm i -D sass`, exact commands (`npm run dev`), and a concrete inline-style→helper-props translation table ("`marginTop: '1rem'` → `mt=\"4\"`"). Not a 4 because the code is complete and covers the common cases with specific component/prop names.

5 / 5

Workflow Clarity

Clear sequence (context → inventory check with surfaced decision → composition → spine → styling ladder → verification → tests) with explicit validation and feedback loops: "actually look at it… Fix what you see, then re-check", a headless fallback ("`npm run build` plus a Node `renderToString` smoke render, grep the emitted HTML"), and a final checklist.

5 / 5

Progressive Disclosure

Well-signaled one-level references (`references/component-catalog.md` — "start here", `references/api.md` — "has the details", `references/library-contributor.md` for the monorepo), but line 59 cites `examples/stat-card.tsx` which does not exist in the bundle, and `references/patterns.md` is never referenced from SKILL.md (reachable only via library-contributor.md). Not a 3 because structure and signaling are otherwise strong and content is appropriately split.

4 / 5

Total

18

/

20

Passed

Description

92%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 capabilities for both app and monorepo contexts, an explicit "Use when…" trigger clause, and a distinct niche anchored by package names. The only weakness is modest synonym coverage in trigger terms.

DimensionReasoningScore

Specificity

Multiple specific concrete actions across both contexts: "compose existing components, helper props, public hooks (useBulmaClasses, usePrefixedClassNames), and --bulma-* CSS variables" plus the monorepo "component pipeline (SCSS partial, stories, tests, docs, wiring)". Not a 4 because coverage is comprehensive rather than having minor gaps.

5 / 5

Completeness

Explicitly answers both: what ("Build a custom React component… compose existing components, helper props, public hooks… full component pipeline") and when ("Use when creating a component beyond stock Bulma or extending one"). Not a 4 because the when clause is explicit with concrete triggers, not merely implied.

5 / 5

Trigger Term Quality

Good natural keyword coverage — "custom React component", "bestax/Bulma style", "creating a component beyond stock Bulma or extending one" — matching what a user would say. Not a 5 because a few natural variations (e.g. "new component", "design system") are absent; not a 3 because the key natural phrases are present and specific.

4 / 5

Distinctiveness Conflict Risk

Clear niche anchored by the package name "@allxsmith/bestax-bulma" and "beyond stock Bulma", giving distinct triggers and minimal conflict risk with generic React component skills. Not a 4 because the anchors make overlap unlikely.

5 / 5

Total

19

/

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-custom-component/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.