一键在 Manus 中运行任何 Skill

solid-component-builder

星标6

分支4

更新时间2026年2月16日 17:45

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.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

lvcoi

lvcoi/solidJSkills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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

同仓库更多 Skills

同仓库

solid-control-flow-rendering

lvcoi/solidJSkills

Select and enforce SolidJS control-flow and rendering primitives with explicit branch semantics. Use for conditional/list rendering, suspense boundaries, and dynamic rendering choices.

2026-02-166

solid-intent-router

lvcoi/solidJSkills

Route SolidJS user intent to the correct macro and domain subskill with deterministic keyword precedence and fallback rules. Use when selecting which Solid skill should execute first.

2026-02-166

solid-meta-head-management

lvcoi/solidJSkills

Apply solid-meta head and metadata primitives with deterministic SSR-safe behavior. Use for title/meta/link/style/base management across route and layout boundaries.

2026-02-166

solid-reactivity-core-expert

lvcoi/solidJSkills

Apply SolidJS fine-grained reactivity primitives with strict derivation-vs-side-effect rules. Use for signal/memo/effect/resource decisions and dependency correctness.

2026-02-166

solid-router-data-navigation

lvcoi/solidJSkills

Apply Solid Router routing, navigation, and data APIs with deterministic loading/error and revalidation behavior. Use for route layout, params, query/action, and navigation flows.

2026-02-166

solid-ssr-hydration-debugger

lvcoi/solidJSkills

Diagnose and prevent SolidJS SSR/hydration mismatches with deterministic reproduction and remediation steps. Use for server-client render inconsistencies, hydration errors, and browser-only boundary issues.

2026-02-166

name	solid-component-builder
description	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.
outputs	{"schema":"../../skills/contracts/component-build-output.schema.json","format":"markdown-checklist-plus-structured-json"}
requires_references	["../../references/solidjs-normalized/manifest.jsonl","../../references/solidjs-normalized/taxonomy.json"]
validation_commands	["node tools/scripts/validate-skills.mjs --skill solid-component-builder","node tools/scripts/validate-output-contracts.mjs"]

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