struxadotcloud/struxa

public

initial commitd4cb9e15 months ago127 lines · 3.3 KB

1	# React Best Practices
2
3	A structured repository for creating and maintaining React Best Practices optimized for agents and LLMs.
4
5	## Structure
6
7	- `rules/` - Individual rule files (one per rule)
8	- `_sections.md` - Section metadata (titles, impacts, descriptions)
9	- `_template.md` - Template for creating new rules
10	- `area-description.md` - Individual rule files
11	- `src/` - Build scripts and utilities
12	- `metadata.json` - Document metadata (version, organization, abstract)
13	- **`AGENTS.md`
14	- **`test-cases.json`
15
16	## Getting Started
17
18	1. Install dependencies:
19
20	```bash
21	pnpm install
22	```
23
24	2. Build AGENTS.md from rules:
25
26	```bash
27	pnpm build
28	```
29
30	3. Validate rule files:
31
32	```bash
33	pnpm validate
34	```
35
36	4. Extract test cases:
37	```bash
38	pnpm extract-tests
39	```
40
41	## Creating a New Rule
42
43	1. Copy `rules/_template.md` to `rules/area-description.md`
44	2. Choose the appropriate area prefix:
45	- `async-` for Eliminating Waterfalls (Section 1)
46	- `bundle-` for Bundle Size Optimization (Section 2)
47	- `server-` for Server-Side Performance (Section 3)
48	- `client-` for Client-Side Data Fetching (Section 4)
49	- `rerender-` for Re-render Optimization (Section 5)
50	- `rendering-` for Rendering Performance (Section 6)
51	- `js-` for JavaScript Performance (Section 7)
52	- `advanced-` for Advanced Patterns (Section 8)
53	3. Fill in the frontmatter and content
54	4. Ensure you have clear examples with explanations
55	5. Run `pnpm build` to regenerate AGENTS.md and test-cases.json
56
57	## Rule File Structure
58
59	Each rule file should follow this structure:
60
61	````markdown
62	---
63	title: Rule Title Here
64	impact: MEDIUM
65	impactDescription: Optional description
66	tags: tag1, tag2, tag3
67	---
68
69	## Rule Title Here
70
71	Brief explanation of the rule and why it matters.
72
73	Incorrect (description of what's wrong):
74
75	```typescript
76	// Bad code example
77	```
78	````
79
80	Correct (description of what's right):
81
82	```typescript
83	// Good code example
84	```
85
86	Optional explanatory text after examples.
87
88	Reference: [Link](https://example.com
89
90	## File Naming Convention
91
92	- Files starting with `_` are special (excluded from build)
93	- Rule files: `area-description.md` (e.g., `async-parallel.md`)
94	- Section is automatically inferred from filename prefix
95	- Rules are sorted alphabetically by title within each section
96	- IDs (e.g., 1.1, 1.2) are auto-generated during build
97
98	## Impact Levels
99
100	- `CRITICAL` - Highest priority, major performance gains
101	- `HIGH` - Significant performance improvements
102	- `MEDIUM-HIGH` - Moderate-high gains
103	- `MEDIUM` - Moderate performance improvements
104	- `LOW-MEDIUM` - Low-medium gains
105	- `LOW` - Incremental improvements
106
107	## Scripts
108
109	- `pnpm build` - Compile rules into AGENTS.md
110	- `pnpm validate` - Validate all rule files
111	- `pnpm extract-tests` - Extract test cases for LLM evaluation
112	- `pnpm dev` - Build and validate
113
114	## Contributing
115
116	When adding or modifying rules:
117
118	1. Use the correct filename prefix for your section
119	2. Follow the `_template.md` structure
120	3. Include clear bad/good examples with explanations
121	4. Add appropriate tags
122	5. Run `pnpm build` to regenerate AGENTS.md and test-cases.json
123	6. Rules are automatically sorted by title - no need to manage numbers!
124
125	## Acknowledgments
126
127	Originally created by [@shuding](https://x.com/shuding