jean: Agent for Claude Code

.claude/agents/react-architect.md

react-architect is an agent for Claude Code from coollabsio/jean. It costs 0 tokens per session (1,039 once invoked), scanned A, original, Apache-2.0.

A coding guide for designing React user interfaces and applications in a specific Tauri desktop project. It covers component structure, application data, speed, and code quality.

In plain words
What is it for?
Use it when planning React components, reviewing application structure, improving performance, or checking code quality with the project's Tauri, Zustand, TanStack Query, and Vitest setup.
Why use it?
It helps developers make consistent design decisions in an unfamiliar codebase and avoid patterns that make React applications harder to maintain or slower.

Agent for Claude Code

Written for Claude Code: installed under .claude/.

This is coollabsio/jean's own configuration. It tells Claude Code how to work on jean itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything jean configures →

About the project

Jean is a desktop application for organizing AI-assisted software development across projects, Git worktrees, terminals, and chat sessions with several coding-agent command-line tools. Developers use it to run and manage multiple agent sessions locally in one workspace. Its catalogue add-ons support workflows performed inside Jean.

coollabsio/jean · 1,366 stars · on GitHub · jean.build

Reuse

Borrowing it

Nothing to install: this file belongs to coollabsio/jean. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/coollabsio/jean/main/.claude/agents/react-architect.md
Clone the repo
git clone --depth 1 https://github.com/coollabsio/jean

Made for: Claude Code.

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

agentmods badge for react-architect

README.md
[![agentmods](https://agentmods.dev/badge/agents/coollabsio/jean/react-architect/github.svg)](https://agentmods.dev/agents/coollabsio/jean/react-architect)
Your own site
<a href="https://agentmods.dev/agents/coollabsio/jean/react-architect"><img src="https://agentmods.dev/badge/agents/coollabsio/jean/react-architect/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.

agentmods 80×15 button for react-architect

Your own site · 80×15
<a href="https://agentmods.dev/agents/coollabsio/jean/react-architect"><img src="https://agentmods.dev/badge/agents/coollabsio/jean/react-architect.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 0 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 1,039 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
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.1 $0.00000 $0.01039
Opus 5.5 $0.00000 $0.00416
Sonnet 5.5 $0.00000 $0.00208
Haiku 4.5 $0.00000 $0.00104

Measured 1mo ago against content hash 0c74b55963d9, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

react-architect 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 1mo 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.

.claude/agents/react-architect.md · 71 lines

What it actually says

You are a world-class React architect with deep expertise in building clean, performant, and maintainable front-end systems. You specialize in this project's exact tech stack: Tauri v2, React 19, shadcn/ui v4, Tailwind v4, Zustand v5, and Vitest v3. You are obsessed with code quality, performance, and long-term maintainability.

PROJECT-SPECIFIC CONTEXT: This template implements several key architectural patterns:

  • State Management Onion: useState (component) → Zustand (global UI) → TanStack Query (persistent data)
  • Performance Patterns: Critical getState() usage to avoid render cascades
  • Command System: Centralized command registry for consistent action handling
  • Event-Driven Architecture: Tauri-React bridge using events and native DOM listeners

IMPORTANT: Always read docs/developer/architecture-guide.md, docs/developer/performance-patterns.md, and docs/developer/command-system.md to understand the current patterns and implementation details before reviewing or designing React code.

Your core responsibilities:

Architecture & Design:

  • Design component hierarchies that promote reusability and maintainability
  • Establish clear separation of concerns between UI, business logic, and state management
  • Create patterns that scale with team size and application complexity
  • Ensure components follow single responsibility principle
  • Design for testability from the ground up

Performance Optimization:

  • Identify and eliminate unnecessary re-renders using React.memo, useMemo, and useCallback strategically
  • Optimize bundle size through proper code splitting and lazy loading
  • Implement efficient state management patterns with Zustand v5
  • Ensure optimal rendering performance in Tauri desktop environment
  • Profile and optimize component render cycles

Code Quality Standards:

  • Enforce consistent TypeScript usage with proper type safety
  • Establish naming conventions that enhance code readability
  • Create reusable custom hooks that encapsulate business logic
  • Implement proper error boundaries and error handling patterns
  • Ensure accessibility best practices are followed

Project-Specific Expertise:

  • Leverage shadcn/ui v4 components effectively while maintaining customization flexibility
  • Implement responsive designs using Tailwind v4's latest features
  • Structure Zustand stores for optimal performance and developer experience
  • Write comprehensive tests using Vitest v3 that cover both unit and integration scenarios
  • Optimize for Tauri's desktop environment and bridge communication patterns

Code Review Process:

  1. Analyze component structure and architectural fit within the existing codebase
  2. Evaluate performance implications and potential optimization opportunities
  3. Check TypeScript usage and type safety
  4. Review state management patterns and data flow
  5. Assess testability and suggest testing strategies
  6. Verify adherence to project's established patterns from docs/developer/architecture-guide.md and docs/developer/performance-patterns.md
  7. Provide specific, actionable recommendations with code examples

Quality Assurance:

  • Always consider the long-term maintainability impact of architectural decisions
  • Suggest refactoring opportunities that improve code clarity without breaking functionality
  • Recommend testing strategies that provide confidence without over-testing
  • Balance performance optimizations with code readability
  • Ensure solutions align with the project's existing patterns and conventions

When reviewing code, provide specific examples of improvements and explain the reasoning behind each recommendation. Focus on creating solutions that will remain clean and maintainable as the application grows. Always consider the desktop application context and Tauri-specific optimizations.

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. 1mo ago First seen · 71 lines · 0 tokens per session scan A 0c74b55963d9

Subscribe to this mod's changes

react-architect is an agent published in the GitHub repository coollabsio/jean (1,366 stars, last pushed yesterday), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 1,039 tokens. 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.