# Solid Agents Review > > - **Type:** Skill - **Install:** `agentstack add skill-impertio-studio-solidjs-claude-skill-package-solid-agents-review` - **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-agents/solid-agents-review ## Install ```sh agentstack add skill-impertio-studio-solidjs-claude-skill-package-solid-agents-review ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # solid-agents-review ## Quick Reference Run this checklist on EVERY generated SolidJS code block. Each item has a severity level: - **CRITICAL** -- Breaks reactivity silently. Code appears to work but updates fail. - **WARNING** -- Suboptimal pattern. Works but causes performance issues or maintenance problems. - **INFO** -- Style issue. Does not break functionality but violates SolidJS idioms. --- ## 1. Signal Access Checks ### CRITICAL: Signals MUST be called as functions in JSX and reactive scopes ```tsx // WRONG -- signal value read once, never updates const [count, setCount] = createSignal(0); return {count}; // CORRECT -- signal called as function, tracked reactively return {count()}; ``` ### CRITICAL: NEVER store signal results in variables outside reactive scopes ```tsx // WRONG -- snapshot, never updates const value = count(); return {value}; // CORRECT -- call getter where the value is needed return {count()}; ``` ### CRITICAL: NEVER destructure signal getters from arrays or objects ```tsx // WRONG -- extracted once, loses tracking const currentCount = count(); // CORRECT -- use createMemo for derived state const doubled = createMemo(() => count() * 2); ``` ### WARNING: Use createMemo for derived values, NOT createEffect + setSignal ```tsx // WRONG -- unnecessary effect/signal pair const [doubled, setDoubled] = createSignal(0); createEffect(() => setDoubled(count() * 2)); // CORRECT -- createMemo caches derived state const doubled = createMemo(() => count() * 2); ``` ### CRITICAL: NEVER access signals conditionally before other signals in effects ```tsx // WRONG -- name() not tracked when loading() is true createEffect(() => { if (loading()) return; console.log(name()); }); // CORRECT -- access all signals first, then use conditionally createEffect(() => { const isLoading = loading(); const currentName = name(); if (isLoading) return; console.log(currentName); }); ``` --- ## 2. Props Checks ### CRITICAL: NEVER destructure props ```tsx // WRONG -- kills reactivity function Greeting({ name }: { name: string }) { return {name}; } // WRONG -- also kills reactivity function Greeting(props: { name: string }) { const { name } = props; return {name}; } // CORRECT -- access props directly function Greeting(props: { name: string }) { return {props.name}; } ``` ### WARNING: Use splitProps to separate prop groups reactively ```tsx // CORRECT -- preserves reactivity while splitting const [local, others] = splitProps(props, ["class", "onClick"]); return ; ``` ### WARNING: Use mergeProps for default prop values ```tsx // CORRECT -- reactive defaults const merged = mergeProps({ variant: "primary" }, props); return {props.children}; ``` ### WARNING: Use children() helper when manipulating props.children ```tsx // WRONG -- may re-create children on each access const kids = props.children; // CORRECT -- resolve and cache children import { children } from "solid-js"; const resolved = children(() => props.children); return {resolved()}; ``` --- ## 3. Control Flow Checks ### WARNING: Use `` instead of Array.map for list rendering ```tsx // WRONG -- re-creates all DOM nodes on change {items().map((item) => {item.name})} // CORRECT -- fine-grained updates per item {(item) => {item.name}} ``` ### WARNING: Use `` instead of ternary for conditional rendering ```tsx // WRONG -- can cause unnecessary DOM recreation {isLoggedIn() ? : } // CORRECT -- reactive conditional rendering }> ``` ### WARNING: Use ``/`` instead of switch statements or chained ternaries ```tsx // CORRECT }> ``` ### INFO: NEVER use the `key` prop -- SolidJS `` tracks by reference ```tsx // WRONG -- key prop is ignored in SolidJS {(item) => {item.name}} // CORRECT -- no key needed {(item) => {item.name}} ``` ### INFO: Use `` for arrays of primitives, `` for arrays of objects --- ## 4. Store Checks ### CRITICAL: NEVER destructure store properties ```tsx // WRONG -- snapshot, loses reactivity const { username } = store.users[0]; // CORRECT -- access in tracking scope {store.users[0].username} ``` ### CRITICAL: Use setStore path syntax for updates, NEVER spread-replace ```tsx // WRONG -- replaces entire state, breaks fine-grained tracking setStore({ ...store, count: store.count + 1 }); // CORRECT -- surgical path update setStore("count", (c) => c + 1); setStore("users", 0, "loggedIn", true); ``` ### WARNING: Use produce for complex mutations ```tsx // CORRECT -- Immer-style mutations applied immutably setStore(produce((state) => { state.users.push(newUser); state.count += 1; })); ``` --- ## 5. Component Checks ### CRITICAL: NEVER use early returns for conditional rendering ```tsx // WRONG -- component body runs once, early return is permanent function Profile(props: { user: User | null }) { if (!props.user) return Loading...; return {props.user.name}; } // CORRECT -- use Show for reactive conditional function Profile(props: { user: User | null }) { return ( Loading...}> {(user) => {user().name}} ); } ``` ### WARNING: Use correct event binding patterns ```tsx // WRONG -- calls handler immediately, assigns return value Click // CORRECT -- passes handler reference Click // CORRECT -- arrow function for arguments handleClick(id)}>Click // CORRECT -- array syntax avoids closure creation Click ``` ### INFO: Use `let ref!: HTMLElement` for refs, NOT useRef ```tsx // CORRECT let inputRef!: HTMLInputElement; onMount(() => inputRef.focus()); return ; ``` ### INFO: Declare directives in module scope for TypeScript ```tsx declare module "solid-js" { namespace JSX { interface Directives { clickOutside: () => void; } } } ``` --- ## 6. React Contamination Scan ### CRITICAL: Scan for ALL React imports and hooks NEVER allow these in SolidJS code: | React Pattern | SolidJS Replacement | |---------------|-------------------| | `useState` | `createSignal` | | `useEffect` | `createEffect` | | `useMemo` | `createMemo` | | `useRef` | `let ref!: T` | | `useCallback` | Not needed (no re-renders) | | `useContext` | `useContext` (same name, different import) | | `forwardRef` | Pass `ref` as regular prop | | `React.createElement` | SolidJS JSX compiler | | `React.memo` | Not needed (no re-renders) | | `useReducer` | `createStore` | ### CRITICAL: NEVER use dependency arrays ```tsx // WRONG -- dependency arrays are a React concept createEffect(() => { console.log(count()); }, [count]); // CORRECT -- automatic tracking, no deps createEffect(() => { console.log(count()); }); ``` ### CRITICAL: NEVER return cleanup from effects ```tsx // WRONG -- React cleanup pattern createEffect(() => { const id = setInterval(fn, 1000); return () => clearInterval(id); }); // CORRECT -- use onCleanup createEffect(() => { const id = setInterval(fn, 1000); onCleanup(() => clearInterval(id)); }); ``` ### CRITICAL: NEVER use `element={}` on Route definitions ```tsx // WRONG -- React Router pattern } /> // CORRECT -- Solid Router pattern ``` --- ## Review Procedure Execute these checks in order on every generated SolidJS code block: 1. **Import scan** -- Flag ANY import from `react`, `react-dom`, `react-router-dom` 2. **Hook scan** -- Flag `useState`, `useEffect`, `useMemo`, `useRef`, `useCallback`, `useReducer`, `forwardRef` 3. **Signal access** -- Verify ALL signals are called as functions `signal()` in JSX 4. **Props handling** -- Verify NO destructuring of props objects 5. **Control flow** -- Verify ``, ``, `` used instead of `.map()`, ternaries, switch statements 6. **Store access** -- Verify NO destructuring of store properties 7. **Store updates** -- Verify path syntax used, no spread-replace 8. **Early returns** -- Verify NO early returns in component bodies for conditional rendering 9. **Cleanup** -- Verify `onCleanup()` used, NOT return from effects 10. **Dependency arrays** -- Verify NO `[deps]` passed to createEffect/createMemo 11. **key prop** -- Flag any usage of `key={}` in JSX 12. **Refs** -- Verify `let ref!: T` pattern, NOT `useRef` --- ## Reference Links - [references/methods.md](references/methods.md) -- Complete validation checklist organized by area - [references/examples.md](references/examples.md) -- Review scenarios with good code, bad code, and fixes - [references/anti-patterns.md](references/anti-patterns.md) -- All React contamination patterns consolidated for scanning ### Official Sources - https://docs.solidjs.com/concepts/intro-to-reactivity - https://docs.solidjs.com/concepts/components/props - https://docs.solidjs.com/reference/basic-reactivity/create-signal - https://docs.solidjs.com/reference/basic-reactivity/create-effect - https://docs.solidjs.com/reference/basic-reactivity/create-memo - https://docs.solidjs.com/reference/store-utilities/create-store - https://docs.solidjs.com/reference/components/for - https://docs.solidjs.com/reference/components/show ## 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-agents-review - 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%.