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.
React-to-SolidJS transformation patterns for porting shadcn-style React components, examples, docs snippets, and blocks into Zaidan.
$ npx skills add carere/zaidan --skill react-to-solid -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install carere/zaidan react-to-solid --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "react-to-solid" agent skill from https://github.com/carere/zaidan/tree/main/.agents/skills/react-to-solid into .claude/skills/react-to-solid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-to-solid", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/carere/zaidan/tree/main/.agents/skills/react-to-solidType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add carere/zaidan --skill react-to-solid -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install carere/zaidan react-to-solid --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/carere/zaidan.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/react-to-solid .agents/skills/react-to-solid && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "react-to-solid" agent skill from https://github.com/carere/zaidan/tree/main/.agents/skills/react-to-solid into .agents/skills/react-to-solid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-to-solid", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add carere/zaidan --skill react-to-solid -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install carere/zaidan react-to-solid --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/carere/zaidan.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/react-to-solid .cursor/skills/react-to-solid && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "react-to-solid" agent skill from https://github.com/carere/zaidan/tree/main/.agents/skills/react-to-solid into .cursor/skills/react-to-solid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-to-solid", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/carere/zaidan.git --path .agents/skills/react-to-solid--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add carere/zaidan --skill react-to-solid -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install carere/zaidan react-to-solid --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/carere/zaidan.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/react-to-solid .gemini/skills/react-to-solid && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "react-to-solid" agent skill from https://github.com/carere/zaidan/tree/main/.agents/skills/react-to-solid into .gemini/skills/react-to-solid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-to-solid", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install carere/zaidan react-to-solidInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add carere/zaidan --skill react-to-solid -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/carere/zaidan.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/react-to-solid .github/skills/react-to-solid && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "react-to-solid" agent skill from https://github.com/carere/zaidan/tree/main/.agents/skills/react-to-solid into .github/skills/react-to-solid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-to-solid", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add carere/zaidan --skill react-to-solid -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install carere/zaidan react-to-solid --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/carere/zaidan.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/react-to-solid .opencode/skills/react-to-solid && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "react-to-solid" agent skill from https://github.com/carere/zaidan/tree/main/.agents/skills/react-to-solid into .opencode/skills/react-to-solid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-to-solid", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
react-to-solidReact-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. 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.
3 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 271ffce. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from carere/zaidan at commit 271ffce, republished under its MIT licence (© carere). 505 words, ~1,567 tokens.
.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.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.
docs/base-ui-mapping.md for @base-ui/react-*, @radix-ui/*, Base UI
data attributes, or Base UI CSS variables.docs/kobalte-patterns.md when typing or composing Kobalte primitive
parts.docs/corvu-patterns.md when using Corvu primitives.docs/third-party-deps.md when replacing React-specific third-party
packages.| React | SolidJS |
|---|---|
className | class |
className?: string | class?: string |
| Destructured props | splitProps(props, [...]) |
| Destructured default props | mergeProps(defaults, props) before splitProps |
{condition && <El />} | <Show when={condition}><El /></Show> |
items.map(...) in JSX | <For each={items}>{(item) => ...}</For> |
useState | createSignal or createStore |
useEffect | createEffect, onMount, or onCleanup |
useMemo | createMemo only for reactive derived values |
useCallback | Usually remove |
forwardRef | Usually remove |
React.ReactNode | JSX.Element |
React.ComponentProps<"div"> | ComponentProps<"div"> |
lucide-react | lucide-solid |
next/image | Native <img> unless local code has a wrapper |
next/link | TanStack 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.
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:
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.
// 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 path | Zaidan 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/* |
Use splitProps; do not destructure props directly when values are used in JSX.
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:
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.
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.
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.
data-slot attributes unless the Solid primitive requires an adaptation.cn() from @/lib/utils for class merging.IconPlaceholder with the concrete
Zaidan icon choice, normally lucide-solid.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.© carere, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 4 other files in .agents/skills/react-to-solid of carere/zaidan.
Open the folder on GitHubat commit 271ffce
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.
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| React To Solid this skillcarere/zaidan | 146 | 1 repos | ~1.6k | Automated safety check: Pass | MIT | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Animated React Component LibrariesHainrixz/editor-pro-max | 261 | 1 repos | ~5.7k | Automated safety check: Pass | Custom licence | |
| Shadcn Tailwind UILiarMTTT/TavernWeave | 150 | — | ~1.7k | Automated safety check: Pass | Custom licence | |
| Aceternity UITerminalSkills/skills | 163 | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Tailwind V4 Shadcnsecondsky/claude-skills | 227 | — | ~4k | Automated safety check: Pass | MIT |
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.
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.
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
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…
secondsky/claude-skills
| Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.
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…
carere/zaidan
Install and configure the Zaidan component registry in an existing SolidJS codebase, and recommend Zaidan components for a product or interaction need.
carere/zaidan
Port and sync shadcn-style React components, blocks, examples, and documentation into Zaidan.
Categories
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.
React To Solid fits situations like: converting React TSX; radix/Base UI/shadcn patterns; Next-style code; React-specific dependencies to idiomatic SolidJS.
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.
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.
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.
SKILL.md names no scripts, command-line tools or credentials: React To Solid is instructions for the agent only.
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.
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.
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.
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.
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.
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.