# Solid Core Overview

> >

- **Type:** Skill
- **Install:** `agentstack add skill-impertio-studio-solidjs-claude-skill-package-solid-core-overview`
- **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-core/solid-core-overview

## Install

```sh
agentstack add skill-impertio-studio-solidjs-claude-skill-package-solid-core-overview
```

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

## About

# solid-core-overview

## Quick Reference

### Version Matrix

| Package | Version | Status | Notes |
|---------|---------|--------|-------|
| `solid-js` | 1.x (1.8+) | Stable | Fine-grained reactivity, signals, stores, effects, SSR, streaming |
| `solid-js` | 2.0 | Beta | Microtask batching, async first-class, `onSettled` replaces `onMount` |
| `@solidjs/start` | 0.x | Deprecated | Used `createServerData$`, `createServerAction$` — NEVER use for new projects |
| `@solidjs/start` | 1.0 | Stable | Uses `"use server"` directive, built on Vinxi/Vite/Nitro |
| `@solidjs/router` | ` | Conditional rendering |
| `` | Keyed list rendering (reference identity) |
| `` | Indexed list rendering (position identity) |
| ``/`` | Multi-branch conditional |
| `` | Async loading boundary |
| `` | Error catching boundary |
| `` | Render outside component tree |
| `` | Dynamic component selection |

### Rendering (`solid-js/web`)

| API | Purpose |
|-----|---------|
| `render` | Mount app to DOM element |
| `hydrate` | Attach reactivity to server-rendered HTML |
| `renderToString` | Synchronous SSR |
| `renderToStream` | Streaming SSR |
| `isServer` | Boolean constant for environment detection |

### Router (`@solidjs/router`)

| API | Purpose |
|-----|---------|
| `Router`, `Route`, `A` | Core routing components |
| `useNavigate`, `useParams` | Navigation hooks |
| `useSearchParams`, `useLocation` | URL state hooks |
| `query` | Cached server data fetching |
| `createAsync` | Reactive async primitive (recommended) |
| `action` | Server mutation wrapper |
| `useSubmission` | Track mutation status |

### SolidStart (`@solidjs/start`)

| API | Purpose |
|-----|---------|
| `FileRoutes` | File-based route generation |
| `"use server"` | Server function directive |
| API routes | HTTP method handlers (GET, POST, etc.) |

---

## SolidJS 2.x Changes Summary

| Feature | SolidJS 1.x | SolidJS 2.x |
|---------|-------------|-------------|
| Reactivity | Synchronous by default | Microtask-batched |
| Async | Manual with `createResource` | First-class Promises/async iterables |
| Effects | Single `createEffect` | Split compute/apply pattern |
| Lifecycle | `onMount` | `onSettled` (can return cleanup) |
| Store setters | Path-style | Draft-first by default |
| List rendering | `` component | `` with accessors |
| Derived state | `createMemo` only | `createSignal(fn)` for derived-but-writable |

### New 2.x Primitives

- **``** — Fallback during initial render without tearing down UI
- **`isPending()`** — Track refreshing state
- **`action()`** — Dedicated mutation primitive with optimistic patterns
- **`createOptimistic`** / **`createOptimisticStore`** — Explicit optimistic UI

---

## Getting Started

```bash
npm init solid@latest
```

### Minimal SolidStart Project Structure

```
my-app/
├── public/
├── src/
│   ├── routes/
│   │   └── index.tsx          # / route
│   ├── entry-client.tsx       # Client hydration entry
│   ├── entry-server.tsx       # Server handler entry
│   └── app.tsx                # Root component
├── app.config.ts              # SolidStart configuration
├── package.json
├── tsconfig.json
└── vite.config.ts
```

### Minimal app.tsx (SolidStart)

```tsx
import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";

export default function App() {
  return (
     {props.children}}>
      
    
  );
}
```

### Minimal SolidJS App (No SolidStart)

```tsx
import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function App() {
  const [count, setCount] = createSignal(0);
  return  setCount((c) => c + 1)}>Count: {count()};
}

render(() => , document.getElementById("root")!);
```

---

## Ecosystem Package Map

| Package | npm Name | Purpose |
|---------|----------|---------|
| Solid Router | `@solidjs/router` | Client/server routing, data loading, actions |
| SolidStart | `@solidjs/start` | Full-stack meta-framework (SSR, API routes) |
| Solid Primitives | `@solid-primitives/*` | 40+ community reactive utilities |
| Kobalte | `@kobalte/core` | Accessible unstyled UI components (like Radix UI) |
| Solid Testing Library | `@solidjs/testing-library` | Testing utilities (Testing Library conventions) |
| Solid DevTools | `solid-devtools` | Browser extension for signal/component inspection |
| Babel Preset | `babel-preset-solid` | JSX compilation (required build dependency) |
| Solid Transition Group | `solid-transition-group` | CSS enter/exit animations |

---

## Reference Links

- [references/methods.md](references/methods.md) -- Complete import map for all entry points
- [references/examples.md](references/examples.md) -- App setup, SolidStart setup, version-specific patterns
- [references/anti-patterns.md](references/anti-patterns.md) -- Wrong imports, version mismatches, ecosystem confusion

### Official Sources

- https://docs.solidjs.com/concepts/intro-to-reactivity
- https://docs.solidjs.com/solid-start
- https://docs.solidjs.com/solid-router
- https://github.com/solidjs/solid
- https://github.com/solidjs-community/solid-primitives

## 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-core-overview
- 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%.