From barefootjs
Build, inspect, and debug UI components using @barefootjs/cli. Use when: creating/editing/reviewing components, investigating signal dependencies, debugging reactive updates, scaffolding new components, or looking up component APIs.
How this skill is triggered — by the user, by Claude, or both
Slash command
/barefootjs:barefootjsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build UI components using `@barefootjs/cli` for component discovery, scaffolding, testing, and signal inspection.
Build UI components using @barefootjs/cli for component discovery, scaffolding, testing, and signal inspection.
Ensure the CLI is available. If the project doesn't already have it installed:
npx @barefootjs/cli --help
Or install it as a dev dependency:
npm install -D @barefootjs/cli
# or
bun add -d @barefootjs/cli
Once installed, use npx bf (or bunx bf) to run commands.
npx bf search <query> — Find components and docs by name/category/tagsnpx bf docs <component> — Get props, examples, accessibility infonpx bf guide <topic> — Read framework docs (signals, compiler constraints, etc.)npx bf gen component <name> <comp...> — Generate skeleton + basic IR testnpx bf gen test <name> — Regenerate richer IR testnpx bf preview <name> — Visual preview in browserUse these commands to understand and debug a component's reactive structure without running any code. All analysis is static (from IR).
npx bf debug graph <component>Show the signal dependency graph for a component. Use this before modifying a stateful component to understand its reactive structure: which signals exist, what memos depend on them, and which DOM nodes are bound.
--json for machine-readable output.npx bf debug graph comboboxnpx bf debug trace <component> <signal|memo>Reverse-lookup: trace the full propagation path from a signal/memo to every DOM binding it affects. Use this to answer "why does this DOM node update?" or to verify that a signal change reaches the expected targets.
--json for machine-readable output.npx bf debug trace combobox opennpx bf debug signals <component>Show a signal initialization trace: every signal, its initial value, and its effect bindings. Useful for verifying that signals are wired correctly in a newly written or modified component.
--json for machine-readable output.npx bf debug signals selectnpx bf debug fallbacks <component>Surface fallback-wrapped expressions emitted by Solid-style wrap-by-default. Use this to find candidates for createMemo refactor — places where the compiler couldn't statically prove reactivity and fell back to wrapping.
--json for machine-readable output.npx bf debug fallbacks comboboxdebug graph to map the reactive graph.debug trace to trace propagation.debug signals to verify signal wiring.debug graph --json to diff the dependency graph before/after.Previews provide visual preview with full hydration support.
ui/components/ui/__previews__/<name>.previews.tsx
Each export function becomes a separate preview. PascalCase names are auto-converted to display titles (e.g., WithLabel → "With Label").
"use client"
import { ComponentName } from '../component-name'
/** Default usage */
export function Default() {
return <ComponentName />
}
/** Show a specific variant or state */
export function WithProps() {
return <ComponentName variant="outline" disabled />
}
Default preview showing basic usage.WithLabel, Disabled, PreFilled)."use client" at the top.../ (e.g., import { Button } from '../button').npx bf preview <name> and ask the user to verify in the browser.bf search and bf docs for component discovery. Do not read source files to learn component APIs.bf guide error-codes to check compiler constraints (BF001, BF021, etc.) before writing components.ui/components/ui/<name>.tsx.ui/components/ui/__tests__/<name>.test.ts."use client" as the first line.props.xxx (not destructuring) to maintain reactivity.createSignal, createMemo, createEffect from @barefootjs/client (SolidJS-style, not React hooks).for attribute on <Label> (not htmlFor).e.target — write onInput={e => setValue(e.target.value)} directly. Do not cast with as HTMLInputElement.className in JSX (not class). class is a JS reserved keyword.value={name()} (not value={name}).Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub piconic-ai/barefootjs --plugin barefootjs