agentmods.dev

react

Frontend coding guidelines for building and changing user interfaces with React, a JavaScript interface library, and TypeScript, a language that adds type checks to JavaScript. They cover the project's routing, data fetching, forms, styling, notifications, and icons.

In plain words
What is it for?
Use it when modifying, extending, or refactoring the frontend in the web/ directory, including components, pages, API interactions, forms, and styles.
Why use it?
It keeps interface code consistent with the project's chosen tools and current React practices. This reduces guesswork and prevents changes that conflict with the existing frontend structure.

Skill for Claude CodeCodex

2 3mo ago A scan 25 tokens original Apache-2.0
View the source file aps08/fullstack-clean-architecture
Install

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.

agentmods
npx agentmods add skills/aps08/fullstack-clean-architecture/react
Any agent
npx skills add aps08/fullstack-clean-architecture --skill react
Clone the repo
git clone --depth 1 https://github.com/aps08/fullstack-clean-architecture

Made for: Claude Code, Codex.

Per session 25 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 917 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00025 $0.00917
Opus 5 $0.00013 $0.00458
Sonnet 5 $0.00005 $0.00183
Haiku 4.5 $0.00003 $0.00092

Measured yesterday against content hash 8f7f97c893eb, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

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 yesterday.

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.

.agents/skills/react/SKILL.md · 113 lines

How it starts

The opening of the file, as written. The whole thing — 113 lines — stays where its author put it; the contents beside it link to each section on GitHub.

React & TypeScript Frontend Guide

Use this skill when modifying, extending, or refactoring the frontend codebase in web/.

1. Technical Stack

  • Core: React 19 (compatible with React Compiler) & TypeScript 6.
  • Routing: TanStack Router (Vite file-based routing plugin).
  • State & Query: TanStack Query (React Query) for API interactions.
  • Forms: TanStack Form + Zod validation.
  • Styling: Tailwind CSS v4 (configured via @tailwindcss/vite).
  • Notifications: Sonner (toast).
  • Icons: Lucide React.

2. React 19 & TypeScript Best Practices

  • Strict Typing: Always define TypeScript types/interfaces for component props, API request/response structures, and state.
  • Functional Components: Write pure functional components.
  • React Compiler: React Compiler is enabled. Avoid manual optimizations using useMemo or useCallback for simple variables or handlers unless explicitly required for stability of dependency arrays in deep custom hooks. Let the compiler optimize renders automatically.
  • File Structure:
    • src/components/: Shared UI components (like common/Button.tsx, common/Input.tsx).
    • src/features/: Complex feature-specific components (e.g., todo/TodoList.tsx).
    • src/hooks/: Reusable hooks.
    • src/routes/: Route definitions matching TanStack Router conventions.

3. TanStack Router & Routing

  • Route Definitions: Located under src/routes/. Defined via createFileRoute.

  • Navigation:

    • Use <Link to="..."> for declarative navigation to support type-safe routes.

    • Use useNavigate for programmatic navigation:

      const navigate = useNavigate();
navigate({ to: "/todos" });

  • Route Trees: The route tree is automatically generated under src/routeTree.gen.ts. Never edit this file manually.

4. Data Fetching & Mutations (TanStack Query)

  • Isolation: Keep query and mutation hooks separate from component logic.
    • Queries belong in src/hooks/queries/.
    • Mutations belong in src/hooks/mutations/.
  • Invalidation: Always invalidate the query cache on mutation success to keep the UI in sync:

Read the full file on GitHub · 113 lines

Changes

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.

  1. yesterday First seen · 113 lines · 25 tokens per session scan A 8f7f97c893eb

Subscribe to this mod's changes

react is a skill published in the GitHub repository aps08/fullstack-clean-architecture (2 stars, last pushed 3mo ago), licensed Apache-2.0. It adds 25 tokens to every session and 917 once invoked, about $0.0001 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-31.

Backend and APIsDatabasesFrontendagent-skillsclean-architecturedockerfastapipostgresqlreact-typescript
Related

Other skills, from other repositories

backend-conventions

Backend convention reference (.NET 10 / C# 13). Auto-injected into backend-aware agents - not user-invocable.

fpindej/netrock · 27 tokens

frontend-conventions

Frontend convention reference (SvelteKit / Svelte 5). Auto-injected into frontend-aware agents - not user-invocable.

fpindej/netrock · 27 tokens

add-test

Add tests following project test patterns.

fpindej/netrock · 6 tokens

polish-ui

Design-quality workflow that combines design taste, aesthetic direction, image-to-code, a Web Interface Guidelines audit, and real-browser verification. Use when building or polishing a UI surface, implementing a mockup/screenshot, or when asked to make a page "look great".

fpindej/netrock · 53 tokens

review-dependabot

Reviews a Dependabot PR and evaluates whether the dependency update is safe to merge. Use when a Dependabot PR is opened, when evaluating dependency updates, or when asked to check if a version bump is safe.

fpindej/netrock · 42 tokens

add-background-job

Add a Hangfire background job (recurring or one-time).

fpindej/netrock · 13 tokens