React Best Practices
mastra-ai/mastra
React performance optimization guidelines from Mastra Engineering.
Migrate Mastra code-based agents (agents built with new Agent(...) and registered in a Mastra({ agents }) map) to the file-based convention: one directory per agent under src/mastra/agents.
$ npx skills add shadcn-labs/agentcn --skill mastra-file-agents -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install shadcn-labs/agentcn mastra-file-agents --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/shadcn-labs/agentcn.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/mastra-file-agents .claude/skills/mastra-file-agents && 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 "mastra-file-agents" agent skill from https://github.com/shadcn-labs/agentcn/tree/main/.agents/skills/mastra-file-agents into .claude/skills/mastra-file-agents/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mastra-file-agents", 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/shadcn-labs/agentcn/tree/main/.agents/skills/mastra-file-agentsType 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 shadcn-labs/agentcn --skill mastra-file-agents -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install shadcn-labs/agentcn mastra-file-agents --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shadcn-labs/agentcn.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/mastra-file-agents .agents/skills/mastra-file-agents && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "mastra-file-agents" agent skill from https://github.com/shadcn-labs/agentcn/tree/main/.agents/skills/mastra-file-agents into .agents/skills/mastra-file-agents/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mastra-file-agents", 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 shadcn-labs/agentcn --skill mastra-file-agents -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install shadcn-labs/agentcn mastra-file-agents --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shadcn-labs/agentcn.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/mastra-file-agents .cursor/skills/mastra-file-agents && 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 "mastra-file-agents" agent skill from https://github.com/shadcn-labs/agentcn/tree/main/.agents/skills/mastra-file-agents into .cursor/skills/mastra-file-agents/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mastra-file-agents", 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/shadcn-labs/agentcn.git --path .agents/skills/mastra-file-agents--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 shadcn-labs/agentcn --skill mastra-file-agents -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install shadcn-labs/agentcn mastra-file-agents --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shadcn-labs/agentcn.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/mastra-file-agents .gemini/skills/mastra-file-agents && 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 "mastra-file-agents" agent skill from https://github.com/shadcn-labs/agentcn/tree/main/.agents/skills/mastra-file-agents into .gemini/skills/mastra-file-agents/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mastra-file-agents", 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 shadcn-labs/agentcn mastra-file-agentsInstalls 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 shadcn-labs/agentcn --skill mastra-file-agents -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/shadcn-labs/agentcn.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/mastra-file-agents .github/skills/mastra-file-agents && 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 "mastra-file-agents" agent skill from https://github.com/shadcn-labs/agentcn/tree/main/.agents/skills/mastra-file-agents into .github/skills/mastra-file-agents/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mastra-file-agents", 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 shadcn-labs/agentcn --skill mastra-file-agents -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install shadcn-labs/agentcn mastra-file-agents --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shadcn-labs/agentcn.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/mastra-file-agents .opencode/skills/mastra-file-agents && 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 "mastra-file-agents" agent skill from https://github.com/shadcn-labs/agentcn/tree/main/.agents/skills/mastra-file-agents into .opencode/skills/mastra-file-agents/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mastra-file-agents", 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.
mastra-file-agentsMigrate Mastra code-based agents (agents built with new Agent(...) and registered in a Mastra({ agents }) map) to the file-based convention: one directory per agent under src/mastra/agents.
Mastra File Agents is an agent skill from shadcn-labs/agentcn. Migrate Mastra code-based agents (agents built with new Agent(...) and registered in a Mastra({ agents }) map) to the file-based convention: one directory per agent under src/mastra/agents. Use when the user wants to convert or refactor Mastra agents to the per-directory convention, mentions Mastra "file-based agents" or agentConfig, or wants to split a big src/mastra/index.ts or agents.ts into one folder per agent — even if they do not name this skill. Requires @mastra/core 1.48+.
Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 22 other files, including reference files (for example `evals/evals.json`, `evals/files/research-project/package.json` and `evals/files/research-project/src/mastra/index.ts`). Compatibility notes: A Mastra project using @mastra/core = 1.48.0. Agents must run through the Mastra CLI (mastra dev / mastra build) for file-based discovery.
It works with Mastra. The repository describes itself as: shadcn/ui, but for building agents. 🤖. The licence is MIT.
6 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 4cd4d83. 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.
Ships script files (TypeScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
npxFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
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.
A Mastra project using @mastra/core >= 1.48.0. Agents must run through the Mastra CLI (mastra dev / mastra build) for file-based discovery.
From compatibility in the SKILL.md frontmatter.
Mastra File Agents loads about 2.4k tokens when it runs, and up to ~4.7k if it reads all its reference files. Until then it costs about 126 tokens; SKILL.md has 1,048 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 shadcn-labs/agentcn at commit 4cd4d83, republished under its MIT licence (© shadcn-labs). 1,048 words, ~2,363 tokens.
.claude/skills/mastra-file-agents/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.Convert agents built in code with new Agent({...}) and registered in a
new Mastra({ agents: {...} }) map into the file-based convention: one directory
per agent under src/mastra/agents/<name>/, where sibling files supply what used to
be constructor options.
This is a behavior-preserving refactor, not a redesign. Move each option to the file that owns it, keep the same model, instructions, tools, memory, skills, and subagents, and don't invent config the agent didn't have.
1. File-based agents are discovered ONLY by the Mastra bundler (mastra dev /
mastra build). If the app imports the mastra instance directly (Mastra used as a
library, a custom server, tests that import { mastra }), agents/<name>/
directories are never discovered and the agent silently disappears. Before migrating,
confirm how the app runs: through the CLI → migrate freely; imported directly → do
not migrate that agent, keep it in code and tell the user why.
2. Code wins on name collisions. If an agent exists in both a config.ts
directory and the Mastra({ agents }) map, the code one is kept and the file-based
one is ignored (with a warning). The migration is a no-op until you remove the code
registration (Step 5). Half-migrating changes nothing.
Work one agent at a time. Copy this checklist and track it:
Migration progress for <agent>:
- [ ] Confirmed the app runs via mastra dev/build (not a direct import)
- [ ] Created src/mastra/agents/<name>/
- [ ] config.ts (agentConfig) with model + non-instruction/tool config
- [ ] instructions.md OR dynamic instructions kept in config.ts
- [ ] tools/*.ts (one default export each, filename = tool key)
- [ ] memory.ts / workspace.ts / skills/ / subagents/ if present (see references/mapping.md)
- [ ] Removed the agent from the Mastra({ agents }) map
- [ ] Deleted now-dead imports / the old agent file if nothing else uses it
- [ ] Verified with mastra devLocate every new Agent({...}) and how it is registered. Usually the registration
is in src/mastra/index.ts inside new Mastra({ agents: { ... } }), but agents
may be defined in separate files (src/mastra/agents/*.ts, a big agents.ts) and
imported. Read the full Agent config for each — you need every option to map it
faithfully. Note the key used in the agents map — that key is how the agent is
registered and looked up (e.g. mastra.getAgent('weather'), Studio, client SDK),
and it becomes the directory name.
For an agent registered as agents: { weather: weatherAgent }, create
src/mastra/agents/weather/.
Name the directory after the map key, not the id. The directory name becomes
the agent's registration/lookup key, so using the map key preserves every existing
getAgent(...) call and client reference. This matters when the map key differs
from the id — e.g. agents: { browserAgent } where new Agent({ id: 'browser-agent' }).
Name the folder browserAgent (the key), and because id/name would otherwise
default to browserAgent, set them explicitly in config.ts to keep the
original 'browser-agent' / 'Browser Agent'. If the map key and id already
match, id/name default to the folder and you can drop them.
config.ts — everything except instructions and tools that were passed inline.
Use agentConfig() so the partial is typed and sibling files fill the rest:
import { agentConfig } from '@mastra/core/agent'
export default agentConfig({
model: 'openai/gpt-5.5',
// instructions omitted -> taken from instructions.md
// tools omitted -> taken from tools/*.ts
})model is required — a missing model fails the build and names the directory.
instructions.md — if the original instructions was a string (or array of
static strings/messages), move the text into instructions.md and omit
instructions from config.ts. instructions.md wins over a static instructions
string, so leaving both is redundant.
If the original instructions was a function (dynamic instructions that read
runtime context), it CANNOT live in instructions.md. Keep it in config.ts —
dynamic function instructions win over instructions.md. See references/mapping.md.
Each tool becomes its own file under tools/, default-exporting the
createTool() call. The filename becomes the tool key, so name the file after
the key used in the original tools map (or the tool's id). If the original was
tools: { get_weather: getWeatherTool }, the file must be tools/get_weather.ts.
import { createTool } from '@mastra/core/tools'
import { z } from 'zod'
export default createTool({
id: 'get_weather',
description: 'Get the current weather for a city',
inputSchema: z.object({ city: z.string() }),
execute: async ({ context }) => ({ city: context.city, tempC: 21 }),
})Tools from tools/*.ts merge with any config.tools. On a key collision
config.tools wins (with a warning), so don't list a tool in both places. If
config.tools is a function, discovered tool files are ignored — in that case
keep tools in config.ts and say so. Test files (*.test.ts, *.spec.ts, etc.)
are ignored by discovery.
Not every tool is a createTool(). Provider-native tools (e.g.
openai.tools.webSearch({})) and other pre-built tool objects don't fit the
createTool() shape. Either leave them inline in config.tools, or default-export
the tool object from a tools/<key>.ts file — both are discovered. When in doubt,
keeping a provider tool in config.tools is the simplest faithful move. Reserve
tools/*.ts files for the project's own createTool() definitions.
If a tool is shared by multiple agents, don't force it into one agent's tools/.
Keep the shared tool in a common module and reference it from config.tools, or
duplicate deliberately. Note the choice for the user.
Memory, workspace, skills, and subagents each have their own file/directory and
precedence rules. When the agent you're migrating uses any of them, read
references/mapping.md for the exact mapping and gotchas
(dynamic-config caveats, subagent description requirement, seed files, etc.).
Do not drop these during migration — losing an agent's memory or subagent silently
changes behavior.
This is what completes the migration (gotcha 2). Delete the agent's entry from the
Mastra({ agents: {...} }) map, then remove imports and definitions that are now
unused — if the old new Agent(...) lived in its own file and nothing else imports
it, delete that file.
Leave code-registered any agent that must stay in code: direct-import/library usage, programmatic or dynamic registration, or a shared instance imported elsewhere. Both styles coexist fine.
Run the app through the CLI so the bundler discovers the new directories:
npx mastra devnpx mastra build is a good non-interactive check when you can't start the dev
server — it runs the same discovery and fails loudly on missing models, missing
subagent descriptions, or unresolved directories. If dependencies aren't installed
in your environment, say so and mark verification as structural only rather than
claiming it runs.
Confirm each migrated agent still appears (under its original registration key) and responds, and that no "code agent overrides file-based" or "config.X wins" warnings are logged (those signal a leftover collision or a redundant config entry). Fix warnings before calling it done.
new Agent({...}) option | File-based location |
|---|---|
| agents map key | Directory name (preserves registration/lookup key) |
id / name | Default to directory name; set explicitly in config.ts when they differ from the folder |
model | config.ts (required) |
instructions (string/array) | instructions.md |
instructions (function) | keep in config.ts |
description | config.ts (required for subagents) |
tools: { key: createTool(...) } | tools/<key>.ts (default export) |
provider/pre-built tools (e.g. openai.tools.*) | keep in config.tools, or default-export from tools/<key>.ts |
skills | skills/ (see references/mapping.md) |
memory | memory.ts (see references/mapping.md) |
workspace | workspace.ts + workspace/ seed files |
delegated agents (agents) | subagents/<childId>/ |
| everything else | config.ts via agentConfig() |
© shadcn-labs, 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 10 other files (references) in .agents/skills/mastra-file-agents of shadcn-labs/agentcn.
Open the folder on GitHubat commit 4cd4d83
Mastra File Agents 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 |
|---|---|---|---|---|---|---|
| Mastra File Agents this skillshadcn-labs/agentcn | 490 | — | ~2.4k | Automated safety check: Pass | MIT | |
| React Best Practicesmastra-ai/mastra | 29k | — | ~1.9k | Automated safety check: Pass | Custom licence | |
| Nestjs Best Practicesrolling-scopes/rsschool-app | 10k | 6 repos | ~1.2k | Automated safety check: Pass | MIT | |
| Guidelinesakash-network/node | 1.1k | 20 repos | ~577 | Automated safety check: Pass | MIT | |
| Migrate Core Code to Submodulestinyhumansai/openhuman | 42k | — | ~2.6k | Automated safety check: Pass | GPL-3.0 | |
| Component Refactoringlangflow-ai/langflow | 155k | — | ~3.5k | Automated safety check: Pass | MIT |
mastra-ai/mastra
React performance optimization guidelines from Mastra Engineering.
rolling-scopes/rsschool-app
NestJS best practices and architecture patterns for building production-ready applications.
akash-network/node
Behavioral guidelines to reduce common LLM coding mistakes. An agent skill from akash-network/node.
tinyhumansai/openhuman
Plans and carries out moving non-host-specific code and its tests from the OpenHuman core into vendored tiny submodule libraries, then releases the submodule and re-pins the host.
langflow-ai/langflow
Refactor high-complexity React components in Langflow frontend.
DietrichGebert/ponytail
Makes the agent pick the laziest solution that works: skip unneeded work, reuse what exists, prefer the standard library and platform features, and keep diffs small.
shadcn-labs/agentcn
A skill your agent uses when building, debugging, reviewing, or documenting Flue agents, workflows, channels, skills, tools, sandboxes, targets, routing, persistence, observability, or CLI usage…
shadcn-labs/agentcn
How to present the deterministic AI-SEO audit returned by auditpage.
shadcn-labs/agentcn
Iterative, self-evaluating web research. An agent skill from shadcn-labs/agentcn.
shadcn-labs/agentcn
How to safely operate the sandboxed workspace. An agent skill from shadcn-labs/agentcn.
Works with
Migrate Mastra code-based agents (agents built with new Agent(...) and registered in a Mastra({ agents }) map) to the file-based convention: one directory per agent under src/mastra/agents. Mastra File Agents is an agent skill from shadcn-labs/agentcn.) and registered in a Mastra({ agents }) map) to the file-based convention: one directory per agent under src/mastra/agents.
Mastra File Agents fits situations like: the user wants to convert; refactor Mastra agents to the per-directory convention; mentions Mastra file-based agents; wants to split a big src/mastra/index.ts.
Run `npx skills add shadcn-labs/agentcn --skill mastra-file-agents -a claude-code`. Or copy the skill folder (.agents/skills/mastra-file-agents in shadcn-labs/agentcn) into .claude/skills/mastra-file-agents in your project. Claude Code loads it when a task matches its description.
Run `npx skills add shadcn-labs/agentcn --skill mastra-file-agents -a codex`. Or copy the skill folder (.agents/skills/mastra-file-agents in shadcn-labs/agentcn) into .agents/skills/mastra-file-agents 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 shadcn-labs/agentcn --skill mastra-file-agents -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mastra-file-agents, .gemini/skills/mastra-file-agents, .github/skills/mastra-file-agents and .opencode/skills/mastra-file-agents in your project.
Going by SKILL.md and its folder, Mastra File Agents needs TypeScript for the scripts in its folder and the command-line tools its instructions call (npx). Our summary lists: Node.js. Compatibility (from SKILL.md): A Mastra project using @mastra/core >= 1.48.0. Agents must run through the Mastra CLI (mastra dev / mastra build) for file-based discovery..
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. 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.
Mastra File Agents is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.4k tokens (SKILL.md is roughly 9.5k 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 2.3k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Mastra File Agents: React Best Practices (mastra-ai/mastra, 29k stars), Nestjs Best Practices (rolling-scopes/rsschool-app, 10k stars), Guidelines (akash-network/node, 1.1k stars) and Migrate Core Code to Submodules (tinyhumansai/openhuman, 42k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
shadcn-labs (a GitHub organization) maintains it in shadcn-labs/agentcn, which has 490 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 7, 2026.
Source: shadcn-labs/agentcn on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.