Process

Overview

Write complete Markdown documents for each node. Integrate local materials with the model's internalized knowledge to generate detailed content including overview, directory, charts, image links, and reference materials.

Workflow

1. Read Material Mapping

Read the list of material files for each node from

download.txt

2. Parallel Writing Strategy

Launch multiple sub-agents (execute in parallel using the Task tool):

Each sub-agent is responsible for 1 node
Dynamically adjust the number of sub-agents based on the number of nodes
It is recommended to run 3-6 sub-agents simultaneously

3. Material Reading and Integration

Complete Material Reading:

Use the Read tool to read all associated materials files
Extract key information, data, and sample code
Integrate viewpoints and methods from different sources
Cross-verify the accuracy of information

Information Extraction Checklist:

Core concept definitions
Key technical principles
Practical cases and code
Data and statistical information
Best practice recommendations
Common issues and solutions

4. Document Structure Requirements

Each node document must include the following sections:

markdown

# {Node Title}

## Overview
Briefly describe the content of this section (2-3 sentences)

## Directory
Or mind map/flow chart

## Main Content
Detailed, accurate, and complete content description

## Charts and Visualization
- Flow chart (using Mermaid syntax)
- Architecture diagram (using Mermaid syntax)
- Data tables
- Online image URL

## Reference Materials
List all cited sources

## Related Links
Extended reading resources

5. Output Format

Each node outputs an independent Markdown file:

File name:
```
{Node Content}.md
```
(use the node name from node-list.txt)
Encoding: UTF-8
Format: Standard Markdown (GitHub Flavored)

6. Content Quality Standards

Level of Detail:

500-2000 words per node
Code examples with comments
Complete and usable configuration files

Accuracy:

Accurate technical terms
Runable code
Clear version information

Completeness:

Cover core knowledge points
Include practical sessions
Provide extended resources

Scripts

scripts/validate_document.py

Verify whether the generated documents meet quality standards.

Check Items:

Completeness of document structure
Existence of required sections
Correctness of Markdown format
Validity of image links

scripts/word_count.py

Count the number of words in documents to ensure content is substantial.

References

references/writing-guidelines.md

Detailed writing specifications and style guides.

See Writing Guidelines for:

Title hierarchy specifications
Code block format requirements
Image citation specifications
Reference format

references/mermaid-cheatsheet.md

Mermaid chart syntax cheat sheet.

See Mermaid Cheatsheet for:

Flow chart syntax
Sequence diagram syntax
State diagram syntax
Class diagram syntax

Examples

Example: Node Document

Input:

Node:
```
Introduction to React Hooks
```

Materials:

1_hooks_intro.md

1_hooks_guide.md

1_hooks_best_practices.md

Output (

Introduction to React Hooks.md

markdown

# Introduction to React Hooks

## Overview

React Hooks is a new feature introduced in React 16.8 that allows the use of state and other React features in function components. Hooks solve the complexity issues of class components and provide a more concise code organization method.

## Directory

1. Introduction to Hooks
2. useState Hook
3. useEffect Hook
4. Custom Hooks
5. Best Practices

## Introduction to Hooks

### What are Hooks

Hooks are JavaScript functions used to "hook into" React state and lifecycle features in function components.

### Why Do We Need Hooks

- Solve the this pointer problem in class components
- Simplify component logic reuse
- Better code organization method

## useState Hook

### Basic Usage

```jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

State Update Patterns

Pattern	Description	Example
Direct Replacement	Simple types	`setCount(count + 1)`
Functional Update	Depends on old value	`setCount(prev => prev + 1)`
Object Update	Retain other fields	`setUser({...user, name: 'New Name'})`

useEffect Hook

Basic Usage

jsx

useEffect(() => {
  // Side effect logic
  document.title = `You clicked ${count} times`;

  return () => {
    // Cleanup function
  };
}, [count]); // Dependency array

Dependency Array Rules

mermaid

graph TD
    A[useEffect] --> B{Dependency Array}
    B -->|None| C[Execute on every render]
    B -->|Empty []| D[Execute only on mount]
    B -->|With values| E[Execute when dependencies change]

Custom Hooks

Create Custom Hook

jsx

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

Best Practices

Only use Hooks at the top level: Do not call them in loops, conditions, or nested functions
Only call Hooks in React functions: Call in function components or custom Hooks
Use ESLint plugin:
```
eslint-plugin-react-hooks
```
automatically detects violations

process

NPX Install

Tags

SKILL.md Content (Chinese)