diff --git a/profiles/opencode/skill/solidjs/SKILL.md b/profiles/opencode/skill/solidjs/SKILL.md
new file mode 100644
index 0000000..8e00ae7
--- /dev/null
+++ b/profiles/opencode/skill/solidjs/SKILL.md
@@ -0,0 +1,464 @@
+---
+name: solidjs
+description: |
+ SolidJS framework development skill for building reactive web applications with fine-grained reactivity.
+ Use when working with SolidJS projects including: (1) Creating components with signals, stores, and effects,
+ (2) Implementing reactive state management, (3) Using control flow components (Show, For, Switch/Match),
+ (4) Setting up routing with Solid Router, (5) Building full-stack apps with SolidStart,
+ (6) Data fetching with createResource, (7) Context API for shared state, (8) SSR/SSG configuration.
+ Triggers: solid, solidjs, solid-js, solid start, solidstart, createSignal, createStore, createEffect.
+---
+
+# 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
+
+```tsx
+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:**
+```tsx
+const [value, setValue] = createSignal(initialValue, {
+ equals: false, // Always trigger updates, even if value unchanged
+ name: "debugName" // For devtools
+});
+```
+
+### Effects — Side Effects
+
+```tsx
+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
+
+```tsx
+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
+
+```tsx
+import { createResource } from "solid-js";
+
+const [user, { mutate, refetch }] = createResource(userId, fetchUser);
+
+// In JSX
+}>
+
{user()?.name}
+
+
+// Resource properties
+user.loading // boolean
+user.error // error if failed
+user.state // "unresolved" | "pending" | "ready" | "refreshing" | "errored"
+user.latest // last successful value
+```
+
+## Stores — Complex State
+
+For nested objects/arrays with fine-grained updates:
+
+```tsx
+import { createStore } from "solid-js/store";
+
+const [state, setState] = createStore({
+ user: { name: "John", age: 30 },
+ todos: []
+});
+
+// Path syntax updates
+setState("user", "name", "Jane");
+setState("todos", todos => [...todos, newTodo]);
+setState("todos", 0, "completed", true);
+
+// Produce for immer-like updates
+import { produce } from "solid-js/store";
+setState(produce(s => {
+ s.user.age++;
+ s.todos.push(newTodo);
+}));
+```
+
+**Store utilities:**
+- `produce` — Immer-like mutations
+- `reconcile` — Diff and patch data (for API responses)
+- `unwrap` — Get raw non-reactive object
+
+## Components
+
+### Basic Component
+
+```tsx
+import { Component } from "solid-js";
+
+const MyComponent: Component<{ name: string }> = (props) => {
+ return
Hello, {props.name}
;
+};
+```
+
+### Props Handling
+
+```tsx
+import { splitProps, mergeProps } from "solid-js";
+
+// Default props
+const merged = mergeProps({ size: "medium" }, props);
+
+// Split props (for spreading)
+const [local, others] = splitProps(props, ["class", "onClick"]);
+return ;
+```
+
+**Props rules:**
+- Props are reactive getters — don't destructure at top level
+- Use `props.value` in JSX, not `const { value } = props`
+
+### Children Helper
+
+```tsx
+import { children } from "solid-js";
+
+const Wrapper: Component = (props) => {
+ const resolved = children(() => props.children);
+
+ createEffect(() => {
+ console.log("Children:", resolved());
+ });
+
+ return
{resolved()}
;
+};
+```
+
+## Control Flow Components
+
+### Show — Conditional Rendering
+
+```tsx
+import { Show } from "solid-js";
+
+}>
+ {(user) => }
+
+```
+
+### For — List Rendering (keyed by reference)
+
+```tsx
+import { For } from "solid-js";
+
+}>
+ {(item, index) => (
+
{index()}: {item.name}
+ )}
+
+```
+
+**Note:** `index` is a signal, `item` is the value.
+
+### Index — List Rendering (keyed by index)
+
+```tsx
+import { Index } from "solid-js";
+
+
+ {(item, index) => (
+
+ )}
+
+```
+
+**Note:** `item` is a signal, `index` is the value. Better for primitive arrays or inputs.
+
+### Switch/Match — Multiple Conditions
+
+```tsx
+import { Switch, Match } from "solid-js";
+
+}>
+
+
+
+
+
+
+
+
+
+
+```
+
+### Dynamic — Dynamic Component
+
+```tsx
+import { Dynamic } from "solid-js/web";
+
+
+```
+
+### Portal — Render Outside DOM Hierarchy
+
+```tsx
+import { Portal } from "solid-js/web";
+
+
+
+
+```
+
+### ErrorBoundary — Error Handling
+
+```tsx
+import { ErrorBoundary } from "solid-js";
+
+ (
+