fec-react-project-standard

Define React and TypeScript project structure with module boundaries.

21|3|Updated Mar 17, 2026

Search Tags:#typescript #architecture #react #project-structure #component-design #frontend-engineering

Ready to run

npx skills add https://github.com/bovinphang/frontend-craft --skill fec-react-project-standard

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fec-react-project-standard
Source: https://github.com/bovinphang/frontend-craft/tree/main/localized/zh-CN/skills/fec-react-project-standard
Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-react-project-standard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

为 React + TypeScript 项目提供统一的工程结构、模块边界、组件架构、hooks 组织、路由组合，以及状态/API/样式默认约定，帮助团队在中大型项目中保持一致性、可维护性与扩展性。

Core Features & Use Cases

规范化项目结构与模块边界设计，便于跨团队协作与长期维护。
指导组件边界、Hooks、路由、状态与 API 的职责分离，以及代码风格和类型契约的一致性。
适用于中大型前端应用的页面编排、特性模块划分、跨团队协作任务的落地与评估。

Quick Start

Generate an initial React + TypeScript project structure and boundary guidelines aligned with the current repository.

Frequently Asked Questions about fec-react-project-standard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure a large React and TypeScript project to maintain clear module boundaries?▼

Organize large React and TypeScript projects by defining explicit module boundaries across pages, features, components, hooks, routing, and shared utilities. This enforces consistent typing and documented conventions to ensure scalable architecture for mid-to-large front-end applications.

What is the best way to enforce consistent typing and architecture conventions in a React codebase?▼

Enforce React and TypeScript architecture conventions by defining a scalable project structure with explicit module boundaries. These documented conventions can be validated directly against repository rules and references to maintain consistent typing and code quality.

Can I use this React project structure standard for small single-page applications?▼

This React project structure standard targets mid-to-large front-end applications requiring cross-team collaboration. Its explicit module boundaries and feature division guidelines are specifically tailored for scalable architectures rather than small single-page applications.

How do I separate responsibilities between components, hooks, and routing in a React application?▼

Separate React application responsibilities by establishing clear component boundaries, organizing hooks systematically, and structuring routing composition. This ensures distinct roles for state management, API calls, and UI rendering across feature modules.

How do I generate an initial React and TypeScript project structure with predefined boundary guidelines?▼

Generate an initial React and TypeScript project structure by applying standardized rules for module boundaries, component design, and feature division. This produces a foundational architecture aligned with repository conventions and scalable front-end engineering practices.