framework-solidjs

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

<skill_doc> <trigger_keywords>

Trigger Keywords

触发关键词

Activate this skill when the user mentions any of:

Core: SolidJS, Solid.js, createSignal, createStore, createMemo, createEffect, createResource, createAsync

Components:

<Show>

<For>

<Index>

<Switch>

<Match>

<Dynamic>

<Portal>

<ErrorBoundary>

Lifecycles: onMount, onCleanup, batch, untrack

Ecosystem: SolidStart, Solid Router, Solid Primitives, Vinxi, Server Functions, "use server", createServerFn

Tooling: justfile, just, bun, bun run, biome </trigger_keywords>

当用户提及以下任意内容时激活此技能：

核心：SolidJS, Solid.js, createSignal, createStore, createMemo, createEffect, createResource, createAsync

组件：

<Show>

<For>

<Index>

<Switch>

<Match>

<Dynamic>

<Portal>

<ErrorBoundary>

生命周期：onMount, onCleanup, batch, untrack

生态系统：SolidStart, Solid Router, Solid Primitives, Vinxi, Server Functions, "use server", createServerFn

工具链：justfile, just, bun, bun run, biome </trigger_keywords>

⛔ Forbidden Patterns

⛔ 禁止模式

NO Virtual DOM Mentions: SolidJS does NOT use a VDOM. Never imply it does.

NO React Hooks:

useState

useEffect

useMemo

are forbidden. Use

createSignal

createEffect

createMemo

NO Prop Destructuring:
```
const { name } = props;
```
breaks reactivity. Always access via
```
props.name
```
or use
```
splitProps
```
/
```
mergeProps
```
.
NO Early Returns in Components: Reactivity setup runs once. Early returns stop effects from being created.
NO
array.map
for JSX: Use
```
<For>
```
or
```
<Index>
```
for reactive lists.
NO
any
: Strictly forbidden. Use
```
unknown
```
or proper types.
NO
@ts-ignore
: Fix errors instead.

禁止提及虚拟DOM：SolidJS不使用虚拟DOM，绝不要暗示它使用。
禁止使用React Hooks：
```
useState
```
,
```
useEffect
```
,
```
useMemo
```
均禁止使用，请使用
```
createSignal
```
,
```
createEffect
```
,
```
createMemo
```
。
禁止解构Props：
```
const { name } = props;
```
会破坏响应式。请始终通过
```
props.name
```
访问，或使用
```
splitProps
```
/
```
mergeProps
```
。
禁止在组件中提前返回：响应式设置仅运行一次，提前返回会阻止副作用创建。
禁止在JSX中使用
array.map
：请使用
```
<For>
```
或
```
<Index>
```
处理响应式列表。
禁止使用
any
类型：严格禁止，请使用
```
unknown
```
或正确的类型。
禁止使用
@ts-ignore
：请修复错误而非忽略。

🤖 Agent Tool Strategy

🤖 Agent工具策略

Discovery: Check for
```
justfile
```
first. Prefer
```
just
```
recipes (e.g.,
```
just dev
```
,
```
just build
```
) over raw
```
bun
```
or
```
npm
```
commands.
Runtime: Prefer
bun
over
```
npm
```
or
```
yarn
```
for script execution and package management.
Build: Use
```
bun run dev
```
or
```
bun run build
```
if no
```
justfile
```
exists.
Routing: Identify if
```
solid-router
```
or file-based routing (SolidStart) is used.
Type Checking: Use
```
bun run tsc --noEmit
```
or
```
just typecheck
```
to verify safety.

发现阶段：首先检查是否存在
```
justfile
```
。优先使用
```
just
```
命令（如
```
just dev
```
,
```
just build
```
）而非原生
```
bun
```
或
```
npm
```
命令。
运行时：**优先使用
```
bun
```
**而非
```
npm
```
或
```
yarn
```
执行脚本和管理包。
构建：如果没有
```
justfile
```
，则使用
```
bun run dev
```
或
```
bun run build
```
。
路由：确认项目使用的是
```
solid-router
```
还是基于文件的路由（SolidStart）。
类型检查：使用
```
bun run tsc --noEmit
```
或
```
just typecheck
```
确保类型安全。

Quick Reference (30 seconds)

快速参考（30秒掌握）

SolidJS Specialist - Fine-grained reactivity without a Virtual DOM.

Philosophy:

Run Once: Components are setup functions that run once.
Fine-Grained: Updates are surgical; only changed nodes update.
Direct DOM: JSX compiles to real DOM nodes.

Core Primitives:

```
createSignal(v)
```
: Returns
```
[get, set]
```
.
```
get()
```
tracks,
```
set(v)
```
updates.
```
createEffect(fn)
```
: Re-runs
```
fn
```
when tracked signals change.
```
createMemo(fn)
```
: Computed value, caches result.
```
createStore(obj)
```
: Proxy for deep nested reactivity.
```
createResource
```
: Async data loading.

Tooling Preferences:

Task Runner: Just (
```
justfile
```
)
Runtime: Bun (
```
bun run
```
)
Linter: Biome (recommended)

SolidJS专家指南 - 无需虚拟DOM的细粒度响应式编程。

设计理念：

仅运行一次：组件是仅运行一次的设置函数。
细粒度：更新是精准的，仅变更的节点会更新。
直接操作DOM：JSX编译为真实DOM节点。

核心原语：

```
createSignal(v)
```
：返回
```
[get, set]
```
。
```
get()
```
追踪依赖，
```
set(v)
```
更新值。
```
createEffect(fn)
```
：当追踪的信号变化时重新执行
```
fn
```
。
```
createMemo(fn)
```
：计算值，缓存结果。
```
createStore(obj)
```
：用于深度嵌套响应式的代理。
```
createResource
```
：异步数据加载。

工具链偏好：

任务运行器：Just (
```
justfile
```
)
运行时：Bun (
```
bun run
```
)
代码检查工具：Biome（推荐）

Gotchas & Best Practices

注意事项与最佳实践

Destructuring Props: ❌

const MyComp = ({ title }) => <div>{title}</div>

(Loses reactivity) ✅

const MyComp = (props) => <div>{props.title}</div>

Tracking Scopes: Reactivity is only tracked synchronously within a tracking scope (Effect, Memo, Render). Async callbacks lose the tracking context unless
```
runWithOwner
```
is used, but usually you just read signals where you need them.
Batching: Solid batches updates automatically in effects/event handlers. Use
```
batch(() => ...)
```
for manual grouping outside those contexts.

Props解构： ❌

const MyComp = ({ title }) => <div>{title}</div>

（失去响应式） ✅

const MyComp = (props) => <div>{props.title}</div>

追踪作用域：响应式仅在追踪作用域（Effect、Memo、渲染）内同步追踪。异步回调会失去追踪上下文，除非使用
```
runWithOwner
```
，但通常只需在需要的地方读取信号即可。
批量更新： Solid会在副作用/事件处理程序中自动批量更新。在这些上下文之外，使用
```
batch(() => ...)
```
进行手动批量更新。

Resources

资源

Examples: See
```
examples/examples.md
```
for detailed code patterns.
References: See
```
references/reference.md
```
for official documentation links. </skill_doc>

示例：查看
```
examples/examples.md
```
获取详细代码模式。
参考文档：查看
```
references/reference.md
```
获取官方文档链接。 </skill_doc>