opencode-gui: Skill for OpenCode

SolidJS Development

SolidJS is a declarative JavaScript library for building user interfaces with fine-grained reactivity. Unlike virtual DOM frameworks, Solid compiles templates to real DOM nodes and updates them with fine-grained reactions.

Core Principles

1. Components run once — Component functions execute only during initialization, not on every update
2. Fine-grained reactivity — Only the specific DOM nodes that depend on changed data update
3. No virtual DOM — Direct DOM manipulation via compiled templates
4. Signals are functions — Access values by calling: count() not count

Reactivity Primitives

Signals — Basic State

import { createSignal } from "solid-js";

const [count, setCount] = createSignal(0);

// Read value (getter)
console.log(count()); // 0

// Update value (setter)
setCount(1);
setCount(prev => prev + 1); // Functional update

Options:

const [value, setValue] = createSignal(initialValue, {
  equals: false, // Always trigger updates, even if value unchanged
  name: "debugName" // For devtools
});

Effects — Side Effects

import { createEffect } from "solid-js";

createEffect(() => {
  console.log("Count changed:", count());
  // Runs after render, re-runs when dependencies change
});

Key behaviors:

• Initial run: after render, before browser paint
• Subsequent runs: when tracked dependencies change
• Never runs during SSR or hydration
• Use onCleanup for cleanup logic

Memos — Derived/Cached Values

import { createMemo } from "solid-js";

const doubled = createMemo(() => count() * 2);

// Access like signal
console.log(doubled()); // Cached, only recalculates when count changes

Use memos when:

• Derived value is expensive to compute
• Derived value is accessed multiple times
• You want to prevent downstream updates when result unchanged

Resources — Async Data

import { createResource } from "solid-js";

const [user, { mutate, refetch }] = createResource(userId, fetchUser);

// In JSX
<Show when={!user.loading} fallback={<Loading />}>
  <div>{user()?.name}</div>
</Show>

// Resource properties
user.loading   // boolean
user.error     // error if failed
user.state     // "unresolved" | "pending" | "ready" | "refreshing" | "errored"
user.latest    // last successful value