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.
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.
curl -O https://raw.githubusercontent.com/coollabsio/jean/main/.claude/agents/react-architect.mdgit clone --depth 1 https://github.com/coollabsio/jeanWrote 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/agents/coollabsio/jean/react-architect)<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.
<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>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.00000 | $0.01039 |
| Opus 5.5 | $0.00000 | $0.00416 |
| Sonnet 5.5 | $0.00000 | $0.00208 |
| Haiku 4.5 | $0.00000 | $0.00104 |
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.
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:
- Analyze component structure and architectural fit within the existing codebase
- Evaluate performance implications and potential optimization opportunities
- Check TypeScript usage and type safety
- Review state management patterns and data flow
- Assess testability and suggest testing strategies
- Verify adherence to project's established patterns from docs/developer/architecture-guide.md and docs/developer/performance-patterns.md
- 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.
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.
- 1mo ago First seen · 71 lines · 0 tokens per session scan A 0c74b55963d9
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.
Other agents, from other repositories
Agent Prompt: Session title and branch generation
Agent for generating succinct session titles and git branch names.
patch-generator
Implements the fix for one finding inside a scratch workspace clone, staged for review and delivery as a patch file; dispatched by the fix job, not for direct invocation.
git-commit-assistant
A Git commit agent that splits workspace changes into focused commits and writes Chinese Conventional Commit messages in a required dependency order.
release-manager
Delivery & Versioning Architect. Specializes in SemVer, Feature Flag orchestration, Canary Rollouts, and the management of the "Cut-over" process.
ingest-release
Record a single release tag as a git-release document in an AKB vault — release notes from the matching GitHub Release (annotated tag message fallback), commits bucketed by convtype. Requires range commits pre-ingested.
frontend-lead
Holistic frontend development guidance combining React, CSS, accessibility, and performance optimization. Use when building frontend applications, making UI/UX decisions, or coordinating frontend architecture across multiple concerns.