Agent Skills: Solid Development

Solid Development

Fine-grained reactivity patterns for SolidJS.

Instructions

SolidJS is NOT React. The mental model is fundamentally different:

| React | SolidJS | |-------|---------| | Components re-run on state change | Components run once | | Virtual DOM diffing | Direct DOM updates | | Hooks with dependency arrays | Automatic dependency tracking | | useState returns value | createSignal returns getter function |

1. Signals — Reactive Primitives

Signals are getter/setter pairs that track dependencies automatically:

import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  //     ^ getter (function!)  ^ setter

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count()}  {/* Call the getter! */}
    </button>
  );
}

Rules:

• Always call the getter: count() not count
• The component function runs once — only the reactive parts update
• Signals accessed in JSX are automatically tracked

2. Effects — Side Effects

Effects run when their tracked signals change:

import { createSignal, createEffect } from "solid-js";

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

  // ✅ Tracked — runs when count changes
  createEffect(() => {
    console.log("Count is:", count());
  });

  // ❌ NOT tracked — runs once at setup
  console.log("Initial:", count());

  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
}

Key insight: Only signals accessed inside the effect are tracked.

3. Memos — Derived Values

Cache expensive computations:

import { createSignal, createMemo } from "solid-js";

function FilteredList() {
  const [items, setItems] = createSignal([]);
  const [filter, setFilter] = createSignal("");

  // Only recomputes when items or filter change
  const filtered = createMemo(() =>
    items().filter(item => item.includes(filter()))
  );

  return <For each={filtered()}>{item => <div>{item}</div>}</For>;
}

4. Props — Don't Destructure!

Critical: Destructuring props breaks reactivity.

// ❌ BROKEN — loses reactivity
function Greeting({ name }) {
  return <h1>Hello {name}</h1>;
}

// ❌ ALSO BROKEN
function Greeting(props) {
  const { name } = props;
  return <h1>Hello {name}</h1>;
}

// ✅ CORRECT — maintains reactivity
function Greeting(props) {
  return <h1>Hello {props.name}</h1>;
}

For defaults, use mergeProps:

import { mergeProps } from "solid-js";

function Button(props) {
  const merged = mergeProps({ variant: "primary" }, props);
  return <button class={merged.variant}>{merged.children}</button>;
}

For splitting props, use splitProps:

import { splitProps } from "solid-js";

function Input(props) {
  const [local, inputProps] = splitProps(props, ["label"]);
  return (
    <label>
      {local.label}
      <input {...inputProps} />
    </label>
  );
}

5. Control Flow Components

Don't use JS control flow in JSX — use Solid's components:

Conditionals with <Show>:

import { Show } from "solid-js";

<Show when={isLoggedIn()} fallback={<Login />}>
  <Dashboard />
</Show>

Multiple conditions with <Switch>/<Match>:

import { Switch, Match } from "solid-js";

<Switch>
  <Match when={status() === "loading"}>Loading...</Match>
  <Match when={status() === "error"}>Error!</Match>
  <Match when={status() === "success"}><Data /></Match>
</Switch>

Lists with <For>:

import { For } from "solid-js";

<For each={items()}>
  {(item, index) => <li>{index()}: {item.name}</li>}
</For>

<For> vs <Index>: | Use | When | |-----|------| | <For> | List order/length changes (general case) | | <Index> | Fixed positions, content changes (performance optimization) |

With <Index>, item is a signal: {(item, i) => <div>{item().name}</div>}

6. Stores — Complex State

Use stores for nested objects and shared state:

import { createStore } from "solid-js/store";

function TodoApp() {
  const [state, setState] = createStore({
    todos: [],
    filter: "all"
  });

  const addTodo = (text) => {
    setState("todos", todos => [...todos, { text, done: false }]);
  };

  const toggleTodo = (index) => {
    setState("todos", index, "done", done => !done);
  };

  return (/* ... */);
}

When to use:

• Signals: Simple values, local state
• Stores: Objects, arrays, shared state, nested data

7. Data Fetching with Resources

import { createResource, Suspense } from "solid-js";

function UserProfile(props) {
  const [user] = createResource(() => props.userId, fetchUser);

  return (
    <Suspense fallback={<Loading />}>
      <Show when={user()} fallback={<NotFound />}>
        <Profile user={user()} />
      </Show>
    </Suspense>
  );
}

Resource properties:

• user() — the data (or undefined)
• user.loading — boolean
• user.error — error if failed
• user.latest — last successful value

8. Context for Shared State

import { createContext, useContext } from "solid-js";
import { createStore } from "solid-js/store";

const AppContext = createContext();

function AppProvider(props) {
  const [state, setState] = createStore({ user: null, theme: "light" });
  return (
    <AppContext.Provider value={[state, setState]}>
      {props.children}
    </AppContext.Provider>
  );
}

function useApp() {
  return useContext(AppContext);
}

Common Mistakes

| Mistake | Problem | Fix | |---------|---------|-----| | const { name } = props | Breaks reactivity | Access props.name directly | | count instead of count() | Gets function, not value | Call the signal getter | | console.log(count()) outside effect | Only runs once | Put in createEffect | | Using .map() for lists | No keyed updates | Use <For> component | | Ternary in JSX for conditionals | Works but less efficient | Use <Show> component | | Multiple signals for related data | Verbose, hard to manage | Use createStore |

Examples

Complete Component Pattern

import { createSignal, createMemo, createEffect, Show, For } from "solid-js";

function TaskList(props) {
  const [filter, setFilter] = createSignal("all");

  // Derived state
  const filteredTasks = createMemo(() => {
    const f = filter();
    if (f === "all") return props.tasks;
    return props.tasks.filter(t => (f === "done" ? t.done : !t.done));
  });

  // Side effect
  createEffect(() => {
    console.log(`Showing ${filteredTasks().length} tasks`);
  });

  return (
    <div>
      <select onChange={e => setFilter(e.target.value)}>
        <option value="all">All</option>
        <option value="done">Done</option>
        <option value="pending">Pending</option>
      </select>

      <Show when={filteredTasks().length > 0} fallback={<p>No tasks</p>}>
        <ul>
          <For each={filteredTasks()}>
            {task => (
              <li classList={{ done: task.done }}>
                {task.text}
              </li>
            )}
          </For>
        </ul>
      </Show>
    </div>
  );
}