Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add formio/ai --skill formio-reactgit clone --depth 1 https://github.com/formio/aiWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/formio/ai/formio-react)<a href="https://agentmods.dev/skills/formio/ai/formio-react"><img src="https://agentmods.dev/badge/skills/formio/ai/formio-react/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/formio/ai/formio-react"><img src="https://agentmods.dev/badge/skills/formio/ai/formio-react.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00226 | $0.03319 |
| Opus 5.5 | $0.00090 | $0.01328 |
| Sonnet 5.5 | $0.00045 | $0.00664 |
| Haiku 4.5 | $0.00023 | $0.00332 |
Grade A, and why
formio-react scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 110 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Form.io + React — Framework Implementor
React is where this library's work lands three different ways, so this skill routes before it builds. One request wants a new application stood up around a Form.io project; another wants Form.io CRUD added to a React codebase that already exists and has its own conventions; a third wants a single form on a page. They share a preflight and very little else.
This file is a router. It holds the dispatch table, the shared preflight, and the handoff contracts. Every branch's own steps live in a sibling document, so a reader arriving for one branch never has to read another branch's steps to find their own.
What this skill does not do: choose the framework, design the data model, or import a template. Those belong upstream, to formio-application and formio-resource-planner, and they run before you.
Dispatch — pick the branch first
Determine which branch the request belongs to BEFORE loading any branch document.
| Branch | Request shape | Chain |
|---|---|---|
| Greenfield application | Build a new React application around a Form.io project | SETUP.md → BOOTSTRAP.md → CONFIG.md → AUTH.md → formio-react-resources/SKILL.md |
| Existing application | Add Form.io resource CRUD to a React application that already exists | SETUP.md → EXISTING.md → backfill CONFIG.md / AUTH.md as needed → formio-react-resources/SKILL.md |
| Embed a form | Render one Form.io form inside a React page | SETUP.md (project URLs only, when needed) → formio-react-form/SKILL.md |
The branches are mutually exclusive. When the request does not make the branch obvious, ask which one applies in ONE question round, using the client's structured question mechanism (in Claude Code, AskUserQuestion), before loading anything.
When the workspace contradicts the stated branch, say so and confirm. A greenfield request in a directory that already holds a React application, or an existing-application request in an empty directory, is a mismatch to surface rather than proceed through. Scaffolding over someone's app because they said "new" is not a recoverable mistake.
What ships with it
20 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- AUTH.md 2.4 KB
- BOOTSTRAP.md 8.4 KB
- CONFIG.md 4.8 KB
- EXISTING.md 4.9 KB
- formio-react-form/references/control.md 2.8 KB
- formio-react-form/references/environments.md 2.9 KB
- formio-react-form/references/lifecycle.md 3.8 KB
- formio-react-form/references/mounting.md 6.5 KB
- formio-react-form/references/provider.md 3.6 KB
- formio-react-form/references/styling.md 3.4 KB
- formio-react-form/SKILL.md 14 KB
- formio-react-resources/references/app-integration.md 6.6 KB
- formio-react-resources/references/hierarchy.md 6.7 KB
- formio-react-resources/references/interview-guide.md 2.7 KB
- formio-react-resources/references/kernel-contract.md 16 KB
- formio-react-resources/references/phase-a-plan-template.md 3.1 KB
- formio-react-resources/references/resource-patterns.md 8.2 KB
- formio-react-resources/references/worked-example.md 4.0 KB
- formio-react-resources/SKILL.md 22 KB
- SETUP.md 2.8 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 3d ago Changed dba0afc03b65
- 4d ago Changed · +10 tokens per session 679c2acee2ac
- 7d ago Changed c9bad3c74360
- 1mo ago First seen · 110 lines · 216 tokens per session scan A a0fae0917cb8
formio-react is a skill published in the GitHub repository formio/ai (8 stars, last pushed 2d ago), licensed MIT. It adds 226 tokens to every session and 3,319 once invoked, about $0.0009 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-04.
Other skills, from other repositories
design-to-code
Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts a screenshot, a description, or a URL and produces production-ready React components, checking existing Storybook components before generating anything new. Use when implementing UI from a mockup or screenshot. To call the MCP tool…
multi-surface-render
Multi-surface rendering with json-render — one JSON spec produces React web, Next.js, React Native, Ink terminal UIs, PDFs, emails, Remotion videos, OG images, and 3D scenes. Covers renderer target selection, registry mapping, and platform APIs (renderToBuffer, renderToStream, renderToFile). Use when generating output…
ai-ui-generation
AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality…
design-import
Scaffolds React components from a Claude Design handoff bundle and stops at files on disk: no stories, no tests, no pull request. Use when handed a claude.ai/design URL or a local bundle file; when that same scaffold should carry on through test generation, browser verification and an opened PR, run /ork:design-ship…
i18n-date-patterns
Implements internationalization (i18n) in React applications. Covers user-facing strings, date/time handling, locale-aware formatting, ICU MessageFormat, and RTL support. Use when building multilingual UIs or formatting dates/currency.
react-server-components-framework
Use when building Next.js 16+ apps with React Server Components. Covers App Router, Cache Components (replacing experimentalppr), streaming SSR, Server Actions, and React 19 patterns for server-first architecture.