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.
npx skills add bovinphang/frontend-craft --skill fec-react-project-standardgit clone --depth 1 https://github.com/bovinphang/frontend-craftWrote 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/skills/bovinphang/frontend-craft/fec-react-project-standard)<a href="https://agentmods.dev/skills/bovinphang/frontend-craft/fec-react-project-standard"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-react-project-standard/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/skills/bovinphang/frontend-craft/fec-react-project-standard"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-react-project-standard.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.00101 | $0.01408 |
| Opus 5 | $0.00051 | $0.00704 |
| Sonnet 5 | $0.00020 | $0.00282 |
| Haiku 4.5 | $0.00010 | $0.00141 |
Grade A, and why
fec-react-project-standard 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 9d 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 — 92 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React 项目规范
适用于 React + TypeScript 仓库中的中大型模块建设、页面重构和工程结构设计。
用途
为 React + TypeScript 项目提供工程结构、模块边界和默认实现约定，确保架构清晰、代码可维护。
流程
本 skill 主要解决 React 工程任务“如何设计和落地”的问题，不重复声明基础编码底线。处理 React 工程化任务时，按以下顺序执行：
-
识别仓库已有约定
- 目录组织方式
- 样式体系
- 状态管理方案
- 请求封装方式
- 测试框架
- UI 组件库 / 设计系统
-
判断目标属于哪一层
- 路由页面
- 页面私有组件
- feature 业务模块
- 全局通用组件
- hooks / services / stores / utils
-
设计边界后再落代码
- 哪些逻辑属于页面编排
- 哪些逻辑属于 feature
- 哪些逻辑应下沉为通用能力
- 哪些状态应本地管理，哪些应交给 store / query / URL
- 状态归属复杂时使用状态管理流程先做状态清单
- DTO、公共 props、泛型组件或
tsconfig边界复杂时，先使用 TypeScript 项目规范流程收敛跨框架类型契约
-
输出时补齐关键质量项
- loading / error / empty / data 状态
- 错误处理与重试
- 类型约束
- 关键测试入口
- 必要的专项 skill 分流
- 依赖是否已存在于
package.json，缺失时先给安装命令再使用 - 重型 UI 能力（动效、图表、3D、编辑器、地图）是否隔离为 leaf component 并按需加载
- 图片、视频、字体等资源是否本地化、可缓存，并避免占位 URL 进入交付
- 页面级 Error Boundary、模块级 fallback、API 错误映射和用户可恢复动作是否一致
- Tailwind token/variant 或响应式布局需求是否应分流到对应专项 skill
- 对明显架构性能风险做轻量筛查，如重型依赖边界、过宽 Context、高频派生值和懒加载 fallback；需要指标证据时进入性能优化 workflow
详细参考
按需要加载更细的参考文件：
- 项目目录、组件分层、组件边界和组件目录建议：加载 references/react-project-structure.md。
- 组件模式、Hooks、路由、状态归属、API 层、错误处理和 Suspense/懒加载：加载 references/react-runtime-patterns.md。
- 样式、注释、TypeScript、测试、反模式和输出检查清单：加载 references/react-quality-patterns.md。
- React 项目规范层面的轻量性能约定：加载 references/react-performance-patterns.md。
约束
- 默认遵守仓库现有全局规则和 React rule
- 若仓库已有明确目录结构、样式体系、状态管理或请求封装，优先沿用仓库约定
- 组件文件规模宜约 300 行内；逾 500 行或复杂度过高须拆分子组件、Hooks、utils、类型
- 禁止新增类组件（Error Boundary 用
react-error-boundary等库） - 禁止绕过模块出口，从 feature 深层路径导入
- 不要用
useEffect + setState模拟本可直接计算的派生值 - 避免 prop drilling 过深却不考虑组合或局部封装
- 不在通用页面组件里同步引入 GSAP、Three.js、Lottie、富文本编辑器或地图 SDK；需要时用动态导入、路由级分包或叶子组件隔离。
- 不在 React 组件中散落裸
fetch、API URL、token refresh 或上传流程；跨边界请求应收敛到 API 集成层。 - 不用 Error Boundary 处理普通 API 失败；请求错误应优先落到 loading/error/empty/data 状态和可恢复操作。
- 不把 React 性能建议写成无证据的全局 memo 化；先定位请求瀑布、bundle 边界、重复渲染或 effect 误用。
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 9d ago First seen · 92 lines · 101 tokens per session scan A 541effd60f01
fec-react-project-standard is a skill published in the GitHub repository bovinphang/frontend-craft (21 stars, last pushed 7d ago), licensed MIT. It adds 101 tokens to every session and 1,408 once invoked, about $0.0005 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-30.
Other skills, from other repositories
brand-design
Brand-aware design system generator that acts as Head of Brand. Translates abstract brand language into a mathematically-validated, implementation-ready design system, writes creative-brief.md as the source of truth for all UI/UX in a project, and optionally compiles it to framework tokens (Tailwind v4 @theme, v3…
liveview-patterns
Build LiveView: async data (assignasync), PubSub (check connected?), phx-change events, form components/modals/uploads, streams for lists, livepatch. Use when handling interactions, debugging events, or tracking Presence.
cesiumjs-core-utilities
CesiumJS core utilities and networking - Resource, Color, Event, Request, RequestScheduler, error handling, helper functions, feature detection. Use when fetching remote data, managing HTTP requests, working with colors, handling events, debugging errors, or using utility functions like defined, clone, or…
litestar-vite
Auto-activate for litestarvite, VitePlugin, ViteConfig, PathConfig, RuntimeConfig, TypeGenConfig, InertiaConfig, vite.config.ts, HMR, typegen, assets, or modes. Not for plain Vite.
litestar-inertia
Auto-activate for litestarvite.inertia, InertiaConfig, component=, @inertia, @inertiajs/, createInertiaApp, useForm, usePage, Link, router, or pages/. Not for HTMX.
litestar-htmx
Auto-activate for litestarhtmx, HTMXPlugin, HTMXConfig, HTMXRequest, HTMXTemplate, HXLocation, ReplaceUrl, TriggerEvent, HX- headers, or Litestar partial HTML. Not for generic browser-side HTMX or Litestar Vite JSON templating — those are client concerns.