# 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.

- **Type:** Skill
- **Install:** `agentstack add skill-lvcoi-solidjskills-solid-component-builder`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [lvcoi](https://agentstack.voostack.com/s/lvcoi)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [lvcoi](https://github.com/lvcoi)
- **Source:** https://github.com/lvcoi/solidJSkills/tree/main/skills/solid-component-builder

## Install

```sh
agentstack add skill-lvcoi-solidjskills-solid-component-builder
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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 (``, ``, `/`) 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`

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [lvcoi](https://github.com/lvcoi)
- **Source:** [lvcoi/solidJSkills](https://github.com/lvcoi/solidJSkills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-lvcoi-solidjskills-solid-component-builder
- Seller: https://agentstack.voostack.com/s/lvcoi
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.