# Solid Syntax Context

> >

- **Type:** Skill
- **Install:** `agentstack add skill-impertio-studio-solidjs-claude-skill-package-solid-syntax-context`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Impertio-Studio](https://agentstack.voostack.com/s/impertio-studio)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Impertio-Studio](https://github.com/Impertio-Studio)
- **Source:** https://github.com/Impertio-Studio/SolidJS-Claude-Skill-Package/tree/main/skills/source/solid-syntax/solid-syntax-context

## Install

```sh
agentstack add skill-impertio-studio-solidjs-claude-skill-package-solid-syntax-context
```

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

## About

# solid-syntax-context

## Quick Reference

### Context API Surface

| Function | Import | Purpose |
|----------|--------|---------|
| `createContext(default?)` | `solid-js` | Create a context object with optional default value |
| `useContext(ctx)` | `solid-js` | Read the nearest Provider's value for a context |
| `` | (from context object) | Supply a value to all descendants |

### Type Signatures

```typescript
// createContext
interface Context {
  id: symbol;
  Provider: (props: { value: T; children: any }) => any;
  defaultValue: T;
}
function createContext(): Context;
function createContext(defaultValue: T): Context;

// useContext
function useContext(context: Context): T;
```

### Critical Warnings

**ALWAYS** provide a typed generic to `createContext()` — omitting the generic results in `Context` which provides no type safety for consumers.

**ALWAYS** wrap `useContext` in a custom hook with an error check — calling `useContext` directly gives no feedback when a Provider is missing.

**NEVER** destructure or access signals/stores when passing them to `value` — pass the signal accessor or store object directly to preserve reactivity.

**NEVER** rely on the default value as a functional substitute for a Provider — defaults exist only as a type-narrowing fallback, not as working application state.

**ALWAYS** define context objects in separate modules — this prevents Hot Module Replacement (HMR) issues where context identity is lost on file reload.

---

## Decision Tree: Context vs Props vs Global Signals

```
Need to share state between components?
├── Only parent → child (1-2 levels)?
│   └── USE PROPS — simplest, most explicit
├── Deep tree (3+ levels) but single subtree?
│   └── USE CONTEXT — avoids prop drilling, scoped to Provider
├── Multiple unrelated trees need same state?
│   ├── Read-only singleton?
│   │   └── USE MODULE-LEVEL SIGNAL — simplest global state
│   └── Needs encapsulation + methods?
│       └── USE CONTEXT + STORE — full reactive state container
└── Server-provided data needed in deep components?
    └── USE CONTEXT — Provider wraps at route level
```

---

## Core Patterns

### 1. Basic Context (Typed, with Custom Hook)

This is the **recommended pattern** for all context usage:

```tsx
// counter-context.tsx — ALWAYS define in a separate module
import { createContext, useContext, type ParentProps } from "solid-js";
import { createSignal } from "solid-js";

interface CounterState {
  count: () => number;
  increment: () => void;
  decrement: () => void;
}

const CounterContext = createContext();

// ALWAYS export a custom hook — NEVER export the raw context
export function useCounter(): CounterState {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error("useCounter: must be used within a ");
  }
  return context;
}

export function CounterProvider(props: ParentProps) {
  const [count, setCount] = createSignal(0);

  const value: CounterState = {
    count,
    increment: () => setCount((c) => c + 1),
    decrement: () => setCount((c) => c - 1),
  };

  return (
    
      {props.children}
    
  );
}
```

```tsx
// app.tsx — usage
import { CounterProvider, useCounter } from "./counter-context";

function Display() {
  const { count } = useCounter();
  return Count: {count()};
}

function Controls() {
  const { increment, decrement } = useCounter();
  return (
    
      -
      +
    
  );
}

export default function App() {
  return (
    
      
      
    
  );
}
```

### 2. Context with Store (Complex State)

```tsx
import { createContext, useContext, type ParentProps } from "solid-js";
import { createStore, type SetStoreFunction } from "solid-js/store";

interface Todo {
  id: number;
  text: string;
  done: boolean;
}

interface TodoState {
  todos: Todo[];
}

type TodoContextValue = [
  state: TodoState,
  actions: {
    addTodo: (text: string) => void;
    toggleTodo: (id: number) => void;
  },
];

const TodoContext = createContext();

export function useTodos(): TodoContextValue {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error("useTodos: must be used within a ");
  }
  return context;
}

export function TodoProvider(props: ParentProps) {
  const [state, setState] = createStore({ todos: [] });

  const actions = {
    addTodo(text: string) {
      setState("todos", (prev) => [
        ...prev,
        { id: Date.now(), text, done: false },
      ]);
    },
    toggleTodo(id: number) {
      setState("todos", (t) => t.id === id, "done", (d) => !d);
    },
  };

  return (
    
      {props.children}
    
  );
}
```

### 3. Nested Context Override

Inner Providers override outer Providers for the same context:

```tsx
import { ThemeProvider, useTheme } from "./theme-context";

function ThemedBox() {
  const { theme } = useTheme();
  return {theme().name};
}

function App() {
  return (
    
                  {/* reads "light" */}
      
                  {/* reads "dark" — inner overrides outer */}
      
    
  );
}
```

---

## Reactivity Rules

| Pattern | Reactive? | Why |
|---------|-----------|-----|
| `value={{ count: count() }}` | NO | Object is created once at Provider render; `count()` is read once |
| `value={{ count }}` (passing accessor) | YES | Accessor function is called in consuming component's render |
| `value={store}` (passing store proxy) | YES | Store proxy tracks property access in consumers |
| `value={[state, actions]}` (tuple) | YES | If `state` is a store or contains accessors |

**Rule**: ALWAYS pass signal accessors (functions) or store proxies as context values. NEVER call signals inside the `value` prop object literal — this reads the value once and breaks reactivity.

---

## Reference Links

- [references/methods.md](references/methods.md) — Full type signatures for createContext, useContext, Provider
- [references/examples.md](references/examples.md) — Extended examples: reactive context, typed context, nested contexts, context + stores
- [references/anti-patterns.md](references/anti-patterns.md) — Common mistakes: missing Provider, broken reactivity, React contamination

### Official Sources

- https://docs.solidjs.com/concepts/context
- https://docs.solidjs.com/reference/component-apis/create-context
- https://docs.solidjs.com/reference/component-apis/use-context

## Source & license

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

- **Author:** [Impertio-Studio](https://github.com/Impertio-Studio)
- **Source:** [Impertio-Studio/SolidJS-Claude-Skill-Package](https://github.com/Impertio-Studio/SolidJS-Claude-Skill-Package)
- **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-impertio-studio-solidjs-claude-skill-package-solid-syntax-context
- Seller: https://agentstack.voostack.com/s/impertio-studio
- 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%.