Agent skill

React To Solid

by carere in carere/zaidan

React-to-SolidJS transformation patterns for porting shadcn-style React components, examples, docs snippets, and blocks into Zaidan.

MITAuto-check passedFrontend & Design

Install React To Solid

skills CLI
$ npx skills add carere/zaidan --skill react-to-solid -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install carere/zaidan react-to-solid --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/carere/zaidan.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/react-to-solid .claude/skills/react-to-solid && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
react-to-solid
GitHub stars
146
Used in
1 other repo
Token cost
~1.6k tokens
SKILL.md length
505 words
Files
5
Skills in repo
3
Repo updated
First seen
Licence
MIT

At a glance

React-to-SolidJS transformation patterns for porting shadcn-style React components, examples, docs snippets, and blocks into Zaidan.

  • Works in 3 steps: Kobalte when it has an equivalent… → Corvu when Kobalte has no adequate… → Vanilla SolidJS when neither primitive…
  • Converting React TSX
  • SKILL.md covers Load References Only When Needed, Core Mappings, Source-of-Truth and Dependency… and Import Rewrites, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

React To Solid is an agent skill from carere/zaidan. React-to-SolidJS transformation patterns for porting shadcn-style React components, examples, docs snippets, and blocks into Zaidan. Use when converting React TSX, React hooks, Radix/Base UI/shadcn patterns, Next-style code, or React-specific dependencies to idiomatic SolidJS.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files (for example `docs/base-ui-mapping.md`, `docs/corvu-patterns.md` and `docs/kobalte-patterns.md`).

It sits in Frontend & Design, covering React components and Design systems. It works with React and shadcn/ui. The repository describes itself as: Shadcn registry for SolidJS. The licence is MIT.

When your agent uses it

  • Converting React TSX
  • Radix/Base UI/shadcn patterns
  • Next-style code
  • React-specific dependencies to idiomatic SolidJS

Example prompts

  • “/react-to-solid”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Kobalte when it has an equivalent accessible primitive.
  2. Corvu when Kobalte has no adequate equivalent and Corvu does.
  3. Vanilla SolidJS when neither primitive library fits.

What it can do on your machine

Read from SKILL.md and the folder at commit 271ffce. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React To Solid loads about 1.6k tokens when it runs. Until then it costs about 73 tokens; SKILL.md has 505 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~73
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from carere/zaidan at commit 271ffce, republished under its MIT licence (© carere). 505 words, ~1,567 tokens.

Download SKILL.mdSave it as .claude/skills/react-to-solid/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
react-to-solid
description
React-to-SolidJS transformation patterns for porting shadcn-style React components, examples, docs snippets, and blocks into Zaidan. Use when converting React TSX, React hooks, Radix/Base UI/shadcn patterns, Next-style code, or React-specific dependencies to idiomatic SolidJS.

React to SolidJS

Use this skill for the translation itself. Use .agents/skills/shadcn-to-zaidan/SKILL.md for the workflow, source URLs, target paths, registry updates, browser testing, and command choices.

Load References Only When Needed

  • Read docs/base-ui-mapping.md for @base-ui/react-*, @radix-ui/*, Base UI data attributes, or Base UI CSS variables.
  • Read docs/kobalte-patterns.md when typing or composing Kobalte primitive parts.
  • Read docs/corvu-patterns.md when using Corvu primitives.
  • Read docs/third-party-deps.md when replacing React-specific third-party packages.

Core Mappings

ReactSolidJS
classNameclass
className?: stringclass?: string
Destructured propssplitProps(props, [...])
Destructured default propsmergeProps(defaults, props) before splitProps
{condition && <El />}<Show when={condition}><El /></Show>
items.map(...) in JSX<For each={items}>{(item) => ...}</For>
useStatecreateSignal or createStore
useEffectcreateEffect, onMount, or onCleanup
useMemocreateMemo only for reactive derived values
useCallbackUsually remove
forwardRefUsually remove
React.ReactNodeJSX.Element
React.ComponentProps<"div">ComponentProps<"div">
lucide-reactlucide-solid
next/imageNative <img> unless local code has a wrapper
next/linkTanStack Router Link or native <a> based on local usage

Use e.currentTarget for typed form events. Use signal calls such as value(); do not treat signals like React state variables.

Source-of-Truth and Dependency Policy

For Zaidan's shadcn release sync, the pinned Base UI component API, behavior, slots, and styling contract are authoritative. Do not preserve an older Zaidan API merely for backward compatibility. Record only unavoidable Solid-specific divergences.

Choose an implementation foundation in this order:

  1. Kobalte when it has an equivalent accessible primitive.
  2. Corvu when Kobalte has no adequate equivalent and Corvu does.
  3. Vanilla SolidJS when neither primitive library fits.

For other React-only packages, read docs/third-party-deps.md, search for an actively maintained SolidJS flavor, and compare behavior/API coverage before writing a local adapter. Never carry a React runtime dependency into registry code merely because upstream imports it.

Import Rewrites

tsx
// Remove React imports:
import * as React from "react";

// Add Solid imports only when used:
import type { ComponentProps, JSX, ValidComponent } from "solid-js";
import { For, Show, createMemo, createSignal, mergeProps, splitProps } from "solid-js";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import { cn } from "@/lib/utils";

Common path rewrites:

React source pathZaidan path
@/registry/bases/base/lib/utils@/lib/utils
@/registry/bases/base/ui/*@/registry/kobalte/ui/*
@/registry/bases/base/hooks/*@/registry/kobalte/hooks/*
@/registry/bases/base/blocks/*@/registry/kobalte/blocks/*
Show full SKILL.md (212 more words)Show less

Props Pattern

Use splitProps; do not destructure props directly when values are used in JSX.

tsx
import type { ComponentProps } from "solid-js";
import { splitProps } from "solid-js";
import { cn } from "@/lib/utils";

type CardProps = ComponentProps<"div">;

const Card = (props: CardProps) => {
  const [local, others] = splitProps(props, ["class"]);

  return <div data-slot="card" class={cn("z-card", local.class)} {...others} />;
};

Use mergeProps first when defaults are needed:

tsx
const mergedProps = mergeProps({ side: "top" } as TooltipProps, props);
const [local, others] = splitProps(mergedProps, ["class", "side"]);

Use Solid's children() helper when children must be inspected, normalized, or reused.

Primitive Pattern

Prefer Kobalte for accessible shadcn-style primitives. Use Corvu only when Kobalte does not provide an adequate equivalent. Use vanilla SolidJS when neither library fits.

tsx
import * as ButtonPrimitive from "@kobalte/core/button";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ComponentProps, ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
import { cn } from "@/lib/utils";

type ButtonProps<T extends ValidComponent = "button"> = PolymorphicProps<
  T,
  ButtonPrimitive.ButtonRootProps<T>
> &
  Pick<ComponentProps<T>, "class" | "children">;

const Button = <T extends ValidComponent = "button">(props: ButtonProps<T>) => {
  const [local, others] = splitProps(props as ButtonProps, ["class"]);

  return (
    <ButtonPrimitive.Root
      data-slot="button"
      class={cn("z-button", local.class)}
      {...others}
    />
  );
};

Keep primitive imports inside wrapper components. In examples, docs, and blocks, prefer existing Zaidan wrappers when they exist.

Preservation Rules

  • Preserve behavior, accessibility, public API, Tailwind classes, CSS variables, and data-slot attributes unless the Solid primitive requires an adaptation.
  • Match nearby Zaidan files for naming, exports, data attributes, and types.
  • Keep imports minimal.
  • Prefer cn() from @/lib/utils for class merging.
  • Replace upstream app-only helpers such as IconPlaceholder with the concrete Zaidan icon choice, normally lucide-solid.
  • Preserve upstream semantic cn-* style markers as Zaidan z-* markers. Translate selectors, data attributes, and CSS variables to the actual Kobalte/Corvu DOM; do not assume a mechanical rename is sufficient.
  • When a component changes, inspect and update its section in all eight Zaidan styles: Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea.
  • Verify state selectors in the browser. The Base UI mapping reference is a starting table, not proof that a selector matches the rendered primitive.

© carere, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files in .agents/skills/react-to-solid of carere/zaidan.

  • SKILL.md
  • docs/base-ui-mapping.md
  • docs/corvu-patterns.md
  • docs/kobalte-patterns.md
  • docs/third-party-deps.md

Open the folder on GitHubat commit 271ffce

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in carere/zaidan, which our catalogue first saw on October 7, 2026.

Compare with similar skills

React To Solid next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React To Solid compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React To Solid this skillcarere/zaidan1461 repos~1.6kAutomated safety check: PassMIT
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Animated React Component LibrariesHainrixz/editor-pro-max2611 repos~5.7kAutomated safety check: PassCustom licence
Shadcn Tailwind UILiarMTTT/TavernWeave150—~1.7kAutomated safety check: PassCustom licence
Aceternity UITerminalSkills/skills163—~1.8kAutomated safety check: PassApache-2.0
Tailwind V4 Shadcnsecondsky/claude-skills227—~4kAutomated safety check: PassMIT

Similar skills

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes
  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    261 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed
  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    150 GitHub stars~1.7k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed
  • Aceternity UI

    TerminalSkills/skills

    Aceternity UI is a collection of animated React components (3D cards, spotlight, background beams, moving borders, wavy backgrounds) built with Tailwind CSS and the motion library, installed into…

    163 GitHub stars~1.8k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed
  • Tailwind V4 Shadcn

    secondsky/claude-skills

    | Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    227 GitHub stars~4k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed
  • Hero UI Craft

    hashgraph-online/awesome-codex-plugins

    A skill your agent uses when Codex works on any front-end implementation, UI polish, dashboard, product screen, internal tool, design system, React component, Tailwind CSS v4 surface, HeroUI React…

    1.2k GitHub stars~3.4k tokensUpdated today
    Frontend & DesignAuto-check passed

More from carere/zaidan

  • Zaidan

    carere/zaidan

    Install and configure the Zaidan component registry in an existing SolidJS codebase, and recommend Zaidan components for a product or interaction need.

    146 GitHub starsUsed in 1 repo~1.4k tokens
    Auto-check passed
  • Shadcn To Zaidan

    carere/zaidan

    Port and sync shadcn-style React components, blocks, examples, and documentation into Zaidan.

    146 GitHub stars~2.9k tokensUpdated 2 days ago
    Auto-check passed

Works with

Questions about React To Solid

What does React To Solid do?

React-to-SolidJS transformation patterns for porting shadcn-style React components, examples, docs snippets, and blocks into Zaidan. React To Solid is an agent skill from carere/zaidan. React-to-SolidJS transformation patterns for porting shadcn-style React components, examples, docs snippets, and blocks into Zaidan.

When should I use React To Solid?

React To Solid fits situations like: converting React TSX; radix/Base UI/shadcn patterns; Next-style code; React-specific dependencies to idiomatic SolidJS.

How do I install React To Solid in Claude Code?

Run `npx skills add carere/zaidan --skill react-to-solid -a claude-code`. Or copy the skill folder (.agents/skills/react-to-solid in carere/zaidan) into .claude/skills/react-to-solid in your project. Claude Code loads it when a task matches its description.

How do I install React To Solid in Codex?

Run `npx skills add carere/zaidan --skill react-to-solid -a codex`. Or copy the skill folder (.agents/skills/react-to-solid in carere/zaidan) into .agents/skills/react-to-solid in your project. Codex loads it when a task matches its description.

Can I use React To Solid in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add carere/zaidan --skill react-to-solid -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-to-solid, .gemini/skills/react-to-solid, .github/skills/react-to-solid and .opencode/skills/react-to-solid in your project.

What does React To Solid need to run?

SKILL.md names no scripts, command-line tools or credentials: React To Solid is instructions for the agent only.

Does React To Solid access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is React To Solid safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React To Solid use?

React To Solid is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React To Solid use?

About 1.6k tokens (SKILL.md is roughly 6.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to React To Solid?

Skills that share tags, products or a category with React To Solid: Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 261 stars), Shadcn Tailwind UI (LiarMTTT/TavernWeave, 150 stars) and Aceternity UI (TerminalSkills/skills, 163 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React To Solid?

carere (a GitHub user) maintains it in carere/zaidan, which has 146 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 5, 2026.

Source: carere/zaidan on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.