# Solid Component Builder

> Build or improve SolidJS components with deterministic reactivity decisions and citation-backed guidance. Use when implementing a component, feature slice, or reusable UI primitive in SolidJS. Use when this capability is needed.

- Skill: `tomevault-io/solid-component-builder` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/solid-component-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/solid-component-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/solid-component-builder

---


# solid-component-builder

## Trigger

Use this skill for new or modified SolidJS components where component contract, reactivity, async behavior, accessibility, and SSR/hydration safety must be explicit.

## Required Inputs

- Component goal and user-facing behavior.
- Prop interface and expected defaults.
- Data dependencies and async boundaries.
- Rendering context (client-only, SSR, or mixed).
- Acceptance constraints (performance, accessibility, test expectations).

## Workflow

1. Define component contract before implementation: props, emitted callbacks, ownership of state, and external dependencies.
2. Choose primitives by rule: pure derivations use `createMemo`; side effects use `createEffect`; async data uses `createResource`; grouped updates use `batch`.
3. Select control-flow primitives explicitly (`<Show>`, `<For>`, `<Switch>/<Match>`) and document why each is used.
4. Declare loading, empty, error, and success rendering states when async data is present.
5. Add SSR/hydration checks for browser-only behavior and deterministic initial render.
6. Produce validation checklist and commands before returning final output.

## Failure Modes

- Missing prop or data contracts: stop and request exact missing input keys.
- Ambiguous state ownership: default to local ownership and document escalation path.
- Missing async states: fail output and add explicit loading/error/empty branches.
- Hydration mismatch risk: require server/client render parity note before completion.

## Output Contract

Return output matching `ComponentBuildOutput` schema at `../../skills/contracts/component-build-output.schema.json` with:

- `summary`, `implementation_plan`, and `component_contract`.
- `reactivity_decisions`, `acceptance_checklist`, and `validation_commands`.
- `citations`: each item must include `doc_id` and `claim` sourced from normalized references.

## Validation

- `node tools/scripts/validate-skills.mjs --skill solid-component-builder`
- `node tools/scripts/validate-output-contracts.mjs`

## References

- `../../references/solidjs-normalized/manifest.jsonl`
- `../../references/solidjs-normalized/taxonomy.json`
- `../../references/solidjs/reactivity-core.md`
- `../../references/solidjs/component-patterns.md`
- `../../references/solidjs/performance-ssr.md`

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/lvcoi) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->