CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

69

Quality

87%

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

81%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 well-structured, dense body: an ordered decision workflow with a checklist and real validation loops, copy-paste-ready code for the component spine and styling rungs, and clearly signaled one-level-deep references. The main defects are a dangling pointer to a nonexistent examples/stat-card.tsx, an orphaned references/patterns.md, and some repeated rationale phrasing that costs tokens.

Suggestions

Ship the missing examples/stat-card.tsx (referenced as 'a complete worked example' but absent from the bundle) or drop the reference — and link references/patterns.md, which exists but is currently unreachable from SKILL.md.

Deduplicate the ClientOnly/Portal/useFocusTrap paragraphs: 'so the server and client markup match' and 'references/api.md has the details' each repeat; a compact 'use library primitives (ClientOnly, Portal, useFocusTrap — see references/api.md)' list would trim tokens without losing guidance.

Tighten the rung-1 house-rules paragraph and the compound sub-part parentheticals (e.g. the Modal.Card/Tabs.Tab aside), which read as run-ons and could each be one or two sentences shorter.

DimensionReasoningScore

Conciseness

Nearly all content is bestax-specific convention Claude cannot know (helper-prop exceptions per sub-part, gap/margin scales, the inline-style translation table), so it is efficient overall. Minor trimming opportunities remain: 'references/api.md has the details' is repeated three times, and 'so the server and client markup match' appears in both the ClientOnly and Portal paragraphs; a few run-on parentheticals could be tightened. This fits the score-4 anchor (efficient with minor over-explanation), not score 5, since some tokens are spent repeating rationale.

4 / 5

Actionability

The component spine is complete, copy-paste-ready TSX with exact imports; the CSS rung shows executable code; rung 3 gives the exact install command and @use syntax; verification names concrete commands ('npm run dev', 'npm run build', renderToString + grep). The one gap: 'See examples/stat-card.tsx for a complete worked example' points at a file that does not exist in the bundle, so the promised composition example cannot actually be followed — concrete guidance with a minor gap, the score-4 anchor rather than score 5.

4 / 5

Workflow Clarity

The sequence is explicit and ordered: pick context → check the catalog for an existing component → surface the build/compose/duplicate decision → compose first → apply the spine → take the lowest styling rung → verify in the browser → tests/stories, capped by a checklist. Validation checkpoints include a feedback loop ('Fix what you see, then re-check') and a headless fallback that explicitly flags 'the visual pass as not done', matching the score-5 anchor (clear sequence, explicit validation, feedback loop, checklist).

5 / 5

Progressive Disclosure

The body is a well-signaled overview with one-level-deep references, each with its purpose stated ('start here', 'has the details', 'follow references/library-contributor.md instead'), and all three referenced files exist. Two structural defects keep it from score 5: 'examples/stat-card.tsx' is referenced but absent from the bundle, and references/patterns.md exists in the bundle but is never linked from SKILL.md, making it undiscoverable — good structure with minor organization gaps, the score-4 anchor.

4 / 5

Total

17

/

20

Passed

Description

88%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, API-named capabilities for both app and monorepo contexts, with an explicit 'Use when' trigger clause. Its only weaknesses are a couple of missing natural trigger synonyms and no carve-out distinguishing it from the closely related bestax-form skill.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions with named APIs: 'compose existing components, helper props, public hooks (useBulmaClasses, usePrefixedClassNames), and --bulma-* CSS variables' plus the full pipeline '(SCSS partial, stories, tests, docs, wiring)'. Coverage is comprehensive across both app and monorepo contexts, matching the score-5 anchor; no meaningful gaps remain.

5 / 5

Completeness

What is explicit ('Build a custom React component in the bestax/Bulma style... compose existing components... full component pipeline') and when is explicit with concrete triggers ('Use when creating a component beyond stock Bulma or extending one'). Both halves are clearly answered with trigger phrases, matching the score-5 anchor; it is not the score-4 case since the 'when' clause is already specific.

5 / 5

Trigger Term Quality

Good natural keyword coverage: 'Build a custom React component', 'bestax/Bulma style', 'extending one', 'component beyond stock Bulma'. A few natural phrasings users might say are missing (e.g. 'make a new component', 'custom styling/variant'), so it sits just below the comprehensive-with-synonyms anchor rather than clearly matching a single anchor.

4 / 5

Distinctiveness Conflict Risk

The package scoping ('@allxsmith/bestax-bulma', 'bestax monorepo', 'stock Bulma') carves out a clear niche unlikely to grab generic React skills. However, the description does not carve out form components even though a sibling bestax-form skill exists, so a request like 'extend an input component' could trigger this skill over the better match — minor overlap risk with a closely related skill, the score-4 anchor.

4 / 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
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.