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 agentmods add skills/pproenca/dot-skills/react-19-component-scaffoldernpx skills add pproenca/dot-skills --skill react-19-component-scaffoldergit clone --depth 1 https://github.com/pproenca/dot-skillsWrote 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/pproenca/dot-skills/react-19-component-scaffolder)<a href="https://agentmods.dev/skills/pproenca/dot-skills/react-19-component-scaffolder"><img src="https://agentmods.dev/badge/skills/pproenca/dot-skills/react-19-component-scaffolder.svg" alt="Measured on agentmods" 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 | $0.00153 | $0.01967 |
| Opus 5 | $0.00077 | $0.00983 |
| Sonnet 5 | $0.00031 | $0.00393 |
| Haiku 4.5 | $0.00015 | $0.00197 |
Grade A, and why
react-19-component-scaffolder 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 5d 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 — 98 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React 19 Component Scaffolder
Generate React 19/19.2 components, pages, hooks, and supporting files from parameterized templates. Every template enforces the patterns codified in the sibling react skill — refs as regular props (never forwardRef), Context rendered directly as provider (never .Provider), form actions with useActionState + useFormStatus, inline document metadata, useSyncExternalStore for external subscriptions, and YMNNAE-compliant hook bodies.
When to Apply
- Creating a new React component (Server, Client, or unspecified — defaults to Server)
- Adding a new route/page in a React 19 app
- Building a form that needs progressive enhancement, optimistic UI, or pending state
- Setting up a new Context provider with state + dispatch split
- Writing a custom hook that subscribes to external state or wraps async work
- Modeling complex state with a typed reducer
- Adding document metadata (
<title>,<meta>,<link>) or resource hints (preload,preconnect,prefetchDNS) - The user says "scaffold", "boilerplate", "generate", "new component", "new page", "new hook", or names any of the template types
Available Templates
All filenames are kebab-case; the exported React identifier ({Name}, use{Name}) is PascalCase / camelCase.
| # | Template | When to use | Files generated |
|---|---|---|---|
| 1 | function-component | Generic reusable component (works in Server or Client) | {name-kebab}.tsx, {name-kebab}.test.tsx |
| 2 | server-component-page | Route page with server data fetch + Suspense + metadata | page.tsx |
| 3 | client-island | 'use client' interactivity nested inside a server page |
{name-kebab}-island.tsx, {name-kebab}-island.test.tsx |
| 4 | form-action | Mutation form with useActionState + Zod schema + server action |
{name-kebab}-form.tsx, actions.ts, schema.ts |
| 5 | context-provider | Shared state with state/dispatch split and accessor hook | {name-kebab}-context.tsx |
| 6 | custom-hook | YMNNAE-compliant hook (external subscription or composed effect) | use-{name-kebab}.ts, use-{name-kebab}.test.ts |
| 7 | reducer | Typed reducer with discriminated-union actions + exhaustive switch | {name-kebab}-reducer.ts, {name-kebab}-reducer.test.ts |
| 8 | head-and-hints | Document metadata + resource hints for above-the-fold assets | {name-kebab}-head.tsx |
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.
- AGENTS.md 189 B
- assets/templates/client-island.test.tsx.template 864 B
- assets/templates/client-island.tsx.template 1.0 KB
- assets/templates/context-provider.tsx.template 1.1 KB
- assets/templates/custom-hook.test.ts.template 921 B
- assets/templates/custom-hook.ts.template 582 B
- assets/templates/form-action-actions.ts.template 1.3 KB
- assets/templates/form-action-schema.ts.template 406 B
- assets/templates/form-action.tsx.template 1.5 KB
- assets/templates/function-component.test.tsx.template 791 B
- assets/templates/function-component.tsx.template 1.3 KB
- assets/templates/head-and-hints.tsx.template 685 B
- assets/templates/reducer.test.ts.template 1008 B
- assets/templates/reducer.ts.template 800 B
- assets/templates/server-component-page.tsx.template 2.2 KB
- config.json 1011 B
- gotchas.md 311 B
- metadata.json 1.0 KB
- references/_conform-algorithm.md 6.9 KB
- references/conventions.md 7.5 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.
- 5d ago First seen · 98 lines · 153 tokens per session scan A 0e4752edc573
react-19-component-scaffolder is a skill published in the GitHub repository pproenca/dot-skills (202 stars, last pushed 20d ago), licensed MIT. It adds 153 tokens to every session and 1,967 once invoked, about $0.0008 per session on Opus 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-08-30.
Other skills, from other repositories
client-setup
Create a vanilla tRPC client with createTRPCClient (), configure link chain with httpBatchLink/httpLink, dynamic headers for auth, transformer on links (not client constructor). Infer types with inferRouterInputs and inferRouterOutputs. AbortController signal support. TRPCClientError typing.
adapter-express
Mount tRPC as Express middleware with createExpressMiddleware() from @trpc/server/adapters/express. Access Express req/res in createContext via CreateExpressContextOptions. Mount at a path prefix like app.use('/trpc', ...). Avoid global express.json() conflicting with tRPC body parsing for FormData.
trpc-router
Entry point for all tRPC skills. Decision tree routing by task: initTRPC.create(), t.router(), t.procedure, createTRPCClient, adapters, subscriptions, React Query, Next.js, links, middleware, validators, error handling, caching, FormData.
frontend-conventions
Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types.
frontend-dev-guidelines
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features…
fast-typescript-check
Keep www-sacred's TypeScript fast to type-check and fast to run. Use when touching the ASCII/canvas animation components (the only real per-frame code here), tightening type-check wall-clock, or auditing a change for runtime or compiler regressions. Scoped to this repo — a React 19 / Next.js 16 component library plus…