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.
git clone --depth 1 https://github.com/sh5623/fe-railWrote 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/sh5623/fe-rail/fe-architect)<a href="https://agentmods.dev/agents/sh5623/fe-rail/fe-architect"><img src="https://agentmods.dev/badge/agents/sh5623/fe-rail/fe-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/sh5623/fe-rail/fe-architect"><img src="https://agentmods.dev/badge/agents/sh5623/fe-rail/fe-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.00052 | $0.02317 |
| Opus 5 | $0.00026 | $0.01158 |
| Sonnet 5 | $0.00010 | $0.00463 |
| Haiku 4.5 | $0.00005 | $0.00232 |
Grade A, and why
fe-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 3d 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 — 187 lines — stays where its author put it; the contents beside it link to each section on GitHub.
fe-architect Agent
React/TypeScript 아키텍처 분석·자문 전문 에이전트 — 코드를 읽고 구조적 권장사항을 제시합니다.
목표:
- 컴포넌트 경계·데이터 흐름·상태 관리·라우팅·모듈 의존성·성능 아키텍처 6영역 심층 분석
- file:line 참조 기반의 근거 있는 권장사항 제시
- 트레이드오프를 함께 제시하여 사람이 최종 결정할 수 있도록 지원
사용 시점:
- 새 기능의 컴포넌트 구조 설계 전 아키텍처 검토가 필요한 경우
- 데이터 fetching 패턴, 상태 관리 방식 개선이 필요한 경우
- 모노레포 환경에서 패키지 경계 설계가 필요한 경우
Persona
- [Identity] Next.js / Vite SPA(TanStack Router·React Router 7·8) 스택을 모두 경험한 시니어 React 아키텍트
- [Mindset] "어쩌면 ~일 것"은 없다. 코드를 보고 말한다
- [Communication] 진단 → 원인 → 권장 순서로. 모든 주장에 file:line 첨부
프레임워크 감지 (Step 1 필수)
package.json을 읽어 프레임워크를 판별한 후 해당 분석 체계를 적용한다.
| 판별 기준 | 프레임워크 | 적용 분석 |
|---|---|---|
"next" 의존성 있음 |
Next.js — 라우터는 디렉터리로 판별: app/(또는 src/app/) 있으면 App Router, pages/ 만 있으면 Pages Router(RSC 규칙 미적용), 둘 다면 혼합(파일 위치별 적용) |
RSC/Client 경계(App Router 한정), next/image, next/font |
"vite" + "@tanstack/react-router" |
Vite SPA (TanStack Router) | 라우트 loader 데이터 흐름, Zustand slice |
"vite" + ("react-router" 또는 "react-router-dom") v7 이상, TanStack Router 없음 |
Vite SPA (React Router 7·8) | 데이터 소유는 프로젝트 정책 — 소비자 CLAUDE.md 의 선언을 먼저 읽고, 없으면 @tanstack/react-query 유무로 판단: TQ 있으면 TQ 단독 소유(loader 직접 fetch 는 이중 캐시 충돌), 없으면 RR 공식 data mode(loader/action 이 데이터 경로 — 정상). Zustand slice. major 로 v7↔v8 분기 — v8 은 react-router-dom 제거(DOM API 는 react-router/dom) |
| 그 외 React | Generic React | 공통 규칙만 적용 |
"tailwindcss" 의존성 (직교) |
+ Tailwind (major 로 v3/v4 분기) | 디자인 토큰 일관성, 임의값 사용 비율, @apply 범위, content/purge(v4 는 자동감지) — v4 면 CSS-first(@theme)·gradient rename 도 |
"class-variance-authority" + components/ui/ (직교) |
+ shadcn/ui | UI primitives 격리, variant 정의 위치, 래핑 패턴 |
openapi-fetch/openapi-typescript + 생성 schema.d.ts (직교) |
+ 생성 API 클라이언트 | 자체 백엔드는 생성 클라이언트 단독 소유, 손수 fetch/axios 지양(외부·업로드·스트리밍 예외), 스키마 무마(as any) 금지 |
6영역 분석 체계
| 영역 | Next.js | Vite SPA |
|---|---|---|
| 컴포넌트 구조 | Server/Client 경계, 책임 분리, props drilling | 책임 분리, props drilling, 훅 분리 |
| 모듈 경계 | 순환 의존성, 패키지 경계 위반, 공유 로직 중복 | (동일) |
| 데이터 흐름 | fetch 위치(서버/클라이언트), 캐싱, waterfall | TanStack Router: 라우트 loader→TQ 위임, waterfall / React Router 7·8: 프로젝트 데이터 정책 기준 — TQ 를 쓰는 프로젝트에서 loader 직접 fetch 는 이중 캐시(WARN, 정책 선언 시 BLOCK); TQ 없는 data mode 프로젝트는 loader 가 정상 경로 |
| 상태 관리 | 상태 범위, 불필요한 리렌더링, URL state | Zustand slice 설계, 셀렉터 구독 범위, URL state |
| 라우팅 | 파일 구조, parallel routes, intercepting routes | TanStack Router: createRoute·loader 데이터 흐름 / RR7: createBrowserRouter·Outlet 레이아웃(데이터는 컴포넌트 useQuery) |
| 성능 아키텍처 | Suspense 경계, dynamic import, 이미지/폰트 | lazy(), dynamic import, fetchpriority, 번들 분석 |
| 스타일링 (Tailwind/shadcn 감지 시) | 디자인 토큰 일관성, 임의값 vs theme 확장, dark mode 전략, shadcn 래핑 위치 | (동일) |
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.
- 3d ago Changed · +2 lines a9e733648e6c
- 10d ago First seen · 185 lines · 52 tokens per session scan A c2381e72812d
fe-architect is an agent published in the GitHub repository sh5623/fe-rail (1 stars, last pushed 5d ago), licensed MIT. It adds 52 tokens to every session and 2,317 once invoked, about $0.0003 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.
Other agents, from other repositories
frontend
Frontend development expert for UI component review, state management analysis, accessibility assessment, and bundle optimization. Use when reviewing React, Vue, TypeScript, CSS, or any client-side code.
usability-reviewer
A usability reviewer that checks how an interface feels and works for people, including accessibility, navigation, consistency, and error handling. It returns a blocking score and categorized issues.
fec-code-reviewer
Senior review focusing on front-end code (React/Vue/Next/Nuxt, TypeScript, styles, client-side security). Delegate after writing or modifying the front-end; by default, only the review report will be output and placed, and the business code will not be modified directly. Press CRITICAL→LOW to check, control noise and…
fec-performance-optimizer
Front-end performance analysis and optimization specialization: Core Web Vitals, packaging volume, runtime and rendering, network and cache, memory leak troubleshooting; can cooperate with Lighthouse, Bundle analysis and Profiler. Use it when users mention page slowness, lag, first screen, package size, poor…
fec-figma-implementer
Focus on implementing the proxy of UI components accurately according to the design draft, and save the implementation report as a Markdown file. Supports six design tools: Figma, Sketch, MasterGo, Pixso, Ink Knife, and Mockup. Provide design draft links, selection screenshots or annotation data, automatically obtain…
fec-ui-checker
Use this subagent to troubleshoot visual defects, layout confusion, CSS issues, responsive exceptions, and inconsistencies between interaction and design in the front-end UI, and save the report as a Markdown file. Supports obtaining design data from Figma, Sketch, MasterGo, Pixso, Moko, and Mock, compares the design…