Formik Form Patterns
ChrisWiles/claude-code-showcase
Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.
Guide for React 19 development with Actions, Server Components, and new hooks.
Install React 19
$ npx skills add aiskillstore/marketplace --skill react-19 -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install aiskillstore/marketplace react-19 --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/aiskillstore/marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/calel33/react-19 .claude/skills/react-19 && 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-19" agent skill from https://github.com/aiskillstore/marketplace/tree/main/skills/calel33/react-19 into .claude/skills/react-19/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-19", 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/aiskillstore/marketplace/tree/main/skills/calel33/react-19Type 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 aiskillstore/marketplace --skill react-19 -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install aiskillstore/marketplace react-19 --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aiskillstore/marketplace.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/calel33/react-19 .agents/skills/react-19 && 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-19" agent skill from https://github.com/aiskillstore/marketplace/tree/main/skills/calel33/react-19 into .agents/skills/react-19/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-19", 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 aiskillstore/marketplace --skill react-19 -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install aiskillstore/marketplace react-19 --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aiskillstore/marketplace.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/calel33/react-19 .cursor/skills/react-19 && 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-19" agent skill from https://github.com/aiskillstore/marketplace/tree/main/skills/calel33/react-19 into .cursor/skills/react-19/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-19", 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/aiskillstore/marketplace.git --path skills/calel33/react-19--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 aiskillstore/marketplace --skill react-19 -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install aiskillstore/marketplace react-19 --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aiskillstore/marketplace.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/calel33/react-19 .gemini/skills/react-19 && 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-19" agent skill from https://github.com/aiskillstore/marketplace/tree/main/skills/calel33/react-19 into .gemini/skills/react-19/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-19", 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 aiskillstore/marketplace react-19Installs 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 aiskillstore/marketplace --skill react-19 -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/aiskillstore/marketplace.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/calel33/react-19 .github/skills/react-19 && 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-19" agent skill from https://github.com/aiskillstore/marketplace/tree/main/skills/calel33/react-19 into .github/skills/react-19/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-19", 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 aiskillstore/marketplace --skill react-19 -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install aiskillstore/marketplace react-19 --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aiskillstore/marketplace.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/calel33/react-19 .opencode/skills/react-19 && 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-19" agent skill from https://github.com/aiskillstore/marketplace/tree/main/skills/calel33/react-19 into .opencode/skills/react-19/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-19", 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.
Facts
- Skill name
react-19- GitHub stars
- 430
- Token cost
- ~1.4k tokens
- SKILL.md length
- 291 words
- Files
- 8 (incl. references)
- Skills in repo
- 1,085
- Repo updated
- First seen
- Licence
- None found
At a glance
Guide for React 19 development with Actions, Server Components, and new hooks.
- Works in 4 steps: Forms with useActionState → Optimistic Updates → Server Actions → …
- Building React 19 apps
- SKILL.md covers When to Use, Installation, Core Concepts and Essential Patterns, plus 5 more sections
- Calls npm and npx; needs API_SECRET
What it does
React 19 is an agent skill from aiskillstore/marketplace. Guide for React 19 development with Actions, Server Components, and new hooks. Use for building React 19 apps, form handling, optimistic updates, and migrations.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including reference files (for example `references/advanced-examples.md`, `references/core-workflows.md` and `references/hooks-api.md`).
It sits in Frontend & Design, covering Forms and validation. It works with React and TypeScript. The repository describes itself as: Security-audited skills for Claude, Codex & Claude Code. One-click install, quality verified.
When your agent uses it
- Building React 19 apps
- Optimistic updates
Example prompts
- “/react-19”
Requirements
- Node.js
- A credential in API_SECRET
Workflow steps
4 steps, taken from the step headings in SKILL.md.
- Forms with useActionState
- Optimistic Updates
- Server Actions
- Streaming with Suspense
What it can do on your machine
Read from SKILL.md and the folder at commit 4ac52da. 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
Shell commands in SKILL.md call:
npmnpx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
react.devnextjs.org
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
API_SECRET
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
React 19 loads about 1.4k tokens when it runs, and up to ~21k if it reads all its reference files. Until then it costs about 43 tokens; SKILL.md has 291 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.
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
Without a licence we can't republish the file, so here is its outline and opening line. It has 291 words (~1,399 tokens).
“React 19 (stable since Dec 2024) simplifies async operations, improves SSR, and enhances DX with Actions, Server Components, and new hooks.”
- name
- react-19
Files
SKILL.md and 7 other files (references) in skills/calel33/react-19 of aiskillstore/marketplace.
- SKILL.md
- references/advanced-examples.md
- references/core-workflows.md
- references/hooks-api.md
- references/migration-patterns.md
- references/security-guide.md
- references/upgrade-checklist.md
- skill-report.json
Open the folder on GitHubat commit 4ac52da
Compare with similar skills
React 19 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 19 this skillaiskillstore/marketplace | 430 | — | ~1.4k | Automated safety check: Pass | None | |
| Formik Form PatternsChrisWiles/claude-code-showcase | 6.1k | 3 repos | ~2.1k | Automated safety check: Pass | None | |
| Hooks Patternzosmaai/zosma-cowork | 123 | — | ~5.1k | Automated safety check: Pass | MIT | |
| Frontend Developmentavibebuilder/claude-prime | 120 | — | ~1.3k | Automated safety check: Pass | MIT | |
| React TypescriptMadAppGang/claude-code | 283 | — | ~4.1k | Automated safety check: Pass | MIT | |
| Olore Tanstack Form Latestolorehq/olore | 103 | — | ~1.1k | Automated safety check: Pass | MIT |
Similar skills
Hooks Pattern
zosmaai/zosma-cowork
Teaches React Hooks for reusing stateful logic across components.
Frontend Development
avibebuilder/claude-prime
A skill your agent uses for ANY work involving React, Next.js, TypeScript, or Tailwind in the browser layer.
React Typescript
MadAppGang/claude-code
Modern React 19+ patterns with TypeScript including function components, hooks, state management, TanStack Query integration, form handling with Zod, error boundaries, and performance optimization.
Olore Tanstack Form Latest
olorehq/olore
Local TanStack Form documentation reference (latest, v1.33.5).
- Official
Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
More from aiskillstore/marketplace
All 1,085 skills in this repoCode Stats
aiskillstore/marketplace
Analyze codebase with tokei (fast line counts by language) and difft (semantic AST-aware diffs).
Data Processing
aiskillstore/marketplace
Process JSON with jq and YAML/TOML with yq. An agent skill from aiskillstore/marketplace.
Doc Scanner
aiskillstore/marketplace
Scans for project documentation files (AGENTS.md, CLAUDE.md, GEMINI.md, COPILOT.md, CURSOR.md, WARP.md, and 15+ other formats) and synthesizes guidance.
File Search
aiskillstore/marketplace
Modern file and content search using fd, ripgrep (rg), and fzf.
Find Replace
aiskillstore/marketplace
Modern find-and-replace using sd (simpler than sed) and batch replacement patterns.
Investigating Codebases
aiskillstore/marketplace
Automatically activated when user asks how something works, wants to understand unfamiliar code, needs to explore a new codebase, or asks questions like "where is X implemented?", "how does Y…
Related
Works with
Categories
Questions about React 19
What does React 19 do?
Guide for React 19 development with Actions, Server Components, and new hooks. React 19 is an agent skill from aiskillstore/marketplace. Guide for React 19 development with Actions, Server Components, and new hooks.
When should I use React 19?
React 19 fits situations like: building React 19 apps; optimistic updates.
How do I install React 19 in Claude Code?
Run `npx skills add aiskillstore/marketplace --skill react-19 -a claude-code`. Or copy the skill folder (skills/calel33/react-19 in aiskillstore/marketplace) into .claude/skills/react-19 in your project. Claude Code loads it when a task matches its description.
How do I install React 19 in Codex?
Run `npx skills add aiskillstore/marketplace --skill react-19 -a codex`. Or copy the skill folder (skills/calel33/react-19 in aiskillstore/marketplace) into .agents/skills/react-19 in your project. Codex loads it when a task matches its description.
Can I use React 19 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 aiskillstore/marketplace --skill react-19 -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-19, .gemini/skills/react-19, .github/skills/react-19 and .opencode/skills/react-19 in your project.
What does React 19 need to run?
Going by SKILL.md and its folder, React 19 needs the command-line tools its instructions call (npm and npx) and credentials named API_SECRET. Our summary lists: Node.js; A credential in API_SECRET.
Does React 19 access the network?
SKILL.md names 2 domains. As links in the text: react.dev and nextjs.org. This is read from the text; nothing was executed.
Is React 19 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 19 use?
No licence was found for React 19 or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does React 19 use?
About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 19k tokens, read only when the agent opens those files.
What are the alternatives to React 19?
Skills that share tags, products or a category with React 19: Formik Form Patterns (ChrisWiles/claude-code-showcase, 6.1k stars), Hooks Pattern (zosmaai/zosma-cowork, 123 stars), Frontend Development (avibebuilder/claude-prime, 120 stars) and React Typescript (MadAppGang/claude-code, 283 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains React 19?
aiskillstore (a GitHub organization) maintains it in aiskillstore/marketplace, which has 430 GitHub stars. The repository holds 1,085 skills in this directory. The repository was last updated on October 7, 2026.
Source: aiskillstore/marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.