What makes React Project Standard notable?

984 downloads. Trust evidence available

How should React Project Standard be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

React Project Standard

Use when designing or reviewing React + TypeScript project structure, feature/module boundaries, component architecture, hooks organization, routing composition, state/API/error/styling defaults, or repository-wide React conventions. Prefer narrower skills for forms, data fetching, tests, accessibil Skill: React Project Standard Owner: bovinphang Summary: Use when designing or reviewing React + TypeScript project structure, feature/module boundaries, component architecture, hooks organization, routing composition, state/API/error/styling defaults, or repository-wide React conventions. Prefer narrower skills for forms, data fetching, tests, accessibil Tags: latest:2.9.0 Version history: v2.9.0 | 2026-09-26T14:43:

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

984

Updated

Oct 11, 2026

Version

2.9.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 984 downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 984 downloadsadoption · observed Oct 11, 2026
Latest release: 2.9.0release · observed Sep 26, 2026
Handshake status: UNKNOWNsecurity

What changed

Newest first. Only changes that point at a source are listed.

Release 2.9.0release
- Added LICENSE file to clarify usage terms and licensing. - Removed skill-card.md. - SKILL.md content updated from Chinese to English for broader accessibility. - No functional or technical changes to logic or process; documentation and licensing updates only.
Observed Sep 26, 2026 · source

Install and run

Setup complexity: low.

clawhub skill install s175m64gr8tsfc06cj22czzfys83mp52:fec-react-project-standard

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-react-project-standard/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

95,170 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: fec-react-project-standard
description: Use when designing or reviewing React + TypeScript project structure, feature/module boundaries, component architecture, hooks organization, routing composition, state/API/error/styling defaults, or repository-wide React conventions. Prefer narrower skills for forms, data fetching, tests, accessibility, virtualization, animation, or security deep dives; Chinese triggers include React project specification, React component architecture.
---

# React project specifications

Suitable for medium and large module construction, page reconstruction and engineering structure design in React + TypeScript warehouse.

## Purpose

Provide engineering structure, module boundaries and default implementation conventions for React + TypeScript projects to ensure clear architecture and maintainable code.

## Procedure

This skill mainly solves the problem of "how to design and implement" React engineering tasks, without repeating the basic coding bottom line. When handling React engineering tasks, perform them in the following order:

1. Identify the warehouse and have an agreement
   - Directory organization
   - Style system
   - Status management solution
   - Request packaging method
   - Testing framework
   - UI component library/design system

2. Determine which layer the target belongs to
   - Routing page
   -Page private components
   - feature business module
   - Global common components
   - hooks / services / stores / utils

3. Design the boundaries before writing the code
   - What logic belongs to page layout
   - Which logic belongs to feature
   - Which logic should be transferred to general capabilities?
   - Which state should be managed locally and which should be handed over to store/query/URL
   - When the status ownership is complex, use the status management process to make a status list first
   - When the boundaries of DTO, public props, generic components or `tsconfig` are complex, first use the TypeScript project specification process to converge cross-framework type contracts

4. Complete key quality items when outputting
   - loading / error / empty / data status
   - Error handling and retrying
   - Type constraints
   - Key test entrance
   - Diversion of necessary special skills
   - Check whether the dependency already exists in `package.json`. If it is missing, give the installation command first and then use it.
   - Whether heavy UI capabilities (animation, charts, 3D, editors, maps) are isolated as leaf components and loaded on demand
   - Whether images, videos, fonts and other resources are localized and cacheable, and avoid placeholder URLs from entering delivery
   - Whether page-level Error Boundary, module-level fallback, API error mapping and user-recoverable actions are consistent
   - Whether Tailwind token/variant or responsive layout requirements should be diverted to the corresponding special skill
- Perform lightweight screening for obvious architectural performa

README.md

# React project specifications

Organize React and TypeScript components, hooks, routes, state boundaries, and project structure.

## Skill

- ID: `fec-react-project-standard`
- Category: `project-standard`
- Version: `2.9.0`
- Source: `skills/fec-react-project-standard/SKILL.md`

## Description

Use when designing or reviewing React + TypeScript project structure, feature/module boundaries, component architecture, hooks organization, routing composition, state/API/error/styling defaults, or repository-wide React conventions. Prefer narrower skills for forms, data fetching, tests, accessibility, virtualization, animation, or security deep dives; Chinese triggers include React project specification, React component architecture.

## Usage

Install or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.

## Packaged Files

- [references/react-performance-patterns.md](references/react-performance-patterns.md)
- [references/react-project-structure.md](references/react-project-structure.md)
- [references/react-quality-patterns.md](references/react-quality-patterns.md)
- [references/react-runtime-patterns.md](references/react-runtime-patterns.md)

## Optional Related Packages

- `@bovinphang/fec-typescript-project-standard`
- `@bovinphang/fec-state-management`
- `@bovinphang/fec-tailwind-design-system`
- `@bovinphang/fec-responsive-layout`
- `@bovinphang/fec-form-handling`
- `@bovinphang/fec-data-fetching`
- `@bovinphang/fec-component-testing`
- `@bovinphang/fec-e2e-testing`
- `@bovinphang/fec-accessibility-check`
- `@bovinphang/fec-security-review`
- `@bovinphang/fec-list-virtualization`
- `@bovinphang/fec-svg-animation`
- `@bovinphang/fec-canvas-threejs`
- `@bovinphang/fec-api-integration`
- `@bovinphang/fec-motion-interaction`

## License

MIT

_meta.json

{
  "ownerId": "kn7b0nh7hvj1pffeqc8y0dqwwh83m726",
  "slug": "fec-react-project-standard",
  "version": "2.9.0",
  "publishedAt": 1790433799038
}

references/react-performance-patterns.md

# React performance patterns

This file keeps lightweight React project-standard performance guidance. Use the frontend performance workflow when the task needs metrics, traces, profiles, bundle analysis, network evidence, or a formal performance report.

### Performance (in conjunction with the "Performance Optimization" section)

- **useMemo**: Expensive derivation, large list sorting/filtering; pay attention to immutable data, such as `useMemo(() => [...list].sort(...), [list])`, and avoid directly `sort` the mutable original array.
- **useCallback**: passed to **`React.memo`** sub-component or used as a callback for other Hook dependencies, used when there is a stable reference requirement.
- **React.memo**: An acceptable component with pure display and shallow props; do not apply memo globally.
- **Virtual List**: For very long lists, use **TanStack Virtual**, **react-window**, etc., and only render nodes in the viewport (see "Suspense and Lazy Loading" for routing-level and component-level lazy loading).

## Performance optimization

Consider performance optimization in the following scenarios:

- Large list/large table
- High frequency re-rendering components
- Complex trees passed with a large number of props
- Heavy-duty third-party components
- High frequency changing context

### Recommended means

- Use `React.memo` appropriately
- Use `useMemo` / `useCallback` only when necessary
- List uses stable `key`
- Use virtual scrolling for large lists
- Code splitting at routing level
- Avoid putting high-frequency changing values into the top-level context
- Avoid meaninglessly creating a large number of new objects/new functions/new arrays in render
- Heavy charting, editor, map, 3D and media processing capabilities into leaf components or route-level lazy loading boundaries
- Lazy loading components must be equipped with loading, error, empty or downgraded UI to avoid only optimizing the package body but destroying the user state

---

references/react-project-structure.md

# React project structure and component boundaries

## Project structure (recommended reference)

The following is the industry's best practice structure for medium and large React projects, tailored according to the actual situation of the project:

```text
src/
├── app/ # Application entry and global configuration
│ ├── App.tsx # Root component (Provider combination)
│ ├── routes.tsx # Routing configuration
│ └── providers.tsx # Global Provider assembly
│
├── pages/ # Page components (one-to-one correspondence with routing)
│   ├── Dashboard/
│   │   ├── DashboardPage.tsx
│ │ ├── components/ # Page private components
│ │ └── hooks/ # Page private hooks
│   ├── UserList/
│   └── Settings/
│
├── layouts/ # Layout component
│ ├── MainLayout.tsx # Main layout (sidebar + top bar + content area)
│ ├── AuthLayout.tsx # Login/registration page layout
│ └── BlankLayout.tsx # Blank layout (error page, etc.)
│
├── features/ # Function modules (divided by business areas)
│   ├── auth/
│ │ ├── components/ # Module components
│ │ ├── hooks/ # module hooks
│ │ ├── api.ts # Module API call
│ │ ├── types.ts # Module type definition
│ │ ├── constants.ts # Module constants
│ │ └── index.ts # Module publicly exported
│   └── order/
│
├── components/ # Globally shared UI components
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.styles.css
│   │   └── __tests__/
│   ├── Modal/
│   ├── Form/
│ └── ErrorBoundary/ # Thin wrapper (function component) for react-error-boundary etc.
│
├── hooks/ # Global shared hooks
│   ├── useAuth.ts
│   ├── useDebounce.ts
│   └── useMediaQuery.ts
│
├── services/ # API base layer
│ ├── request.ts # Axios/fetch instance and interceptor
│ └── endpoints/ # API endpoint definition (such as split by field)
│
├── stores/ # Global status management
│   ├── authStore.ts
│   └── uiStore.ts
│
├── locales/ # International language pack
│ ├── zh-CN.json # Simplified Chinese
│ ├── en-US.json # English
│ └── index.ts # i18n instance initialization (i18next / react-intl)
│
├── assets/ # Static resources
│ ├── images/ # Pictures (PNG, JPG, WebP)
│ ├── icons/ # SVG icon
│ └── fonts/ # Custom fonts
│
├── config/ # Application configuration
│ ├── env.ts # Typed encapsulation of environment variables
│ └── features.ts # Feature Flags Management
│
├── types/ # Global shared types
│ ├── api.ts # API response/request common type
│ ├── models.ts #Business entity type
│ └── global.d.ts # Global type extension (picture module declaration, etc.)
│
├── utils/ # Pure utility function
│ ├── format.ts # Date, number, currency formatting
│ ├── validators.ts # Form validation rules
│ └── storage.ts # LocalStorage / SessionStorage package
│
├── styles/ # Global styles and themes
│ ├── global.css # Global basic style (reset/normalize)
│ ├── variables.css # CSS variables (color, spacing, font size)
│ ├── breakpoints.ts # Responsive breakpoint constants
│ └── themes/ # theme definition
│ ├── light.css # Light theme variable
│ ├── dark.css # Dark theme variable
│

Github ReposUpdated 3d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW

Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular