How do I install the Solid Component Builder skill?

Run npx skillmds@latest add tomevault-io/solid-component-builder in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Solid Component Builder safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Solid Component Builder?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Solid Component Builder free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Solid Component Builder?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Solid Component Builder by tomevault-io

Name: Solid Component Builder
Author: tomevault-io

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.

tomevault-io 8b69266 2 files · 3.3 KB Updated Sep 17, 2026

File contents

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

Define component contract before implementation: props, emitted callbacks, ownership of state, and external dependencies.
Choose primitives by rule: pure derivations use createMemo; side effects use createEffect; async data uses createResource; grouped updates use batch.
Select control-flow primitives explicitly (<Show>, <For>, <Switch>/<Match>) and document why each is used.
Declare loading, empty, error, and success rendering states when async data is present.
Add SSR/hydration checks for browser-only behavior and deterministic initial render.
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 — claim your Tome and manage your conversions.

---name: solid-component-builderdescription: 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.---# solid-component-builder## TriggerUse 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).## Workflow1. 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 ContractReturn 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.

Frequently asked questions