superkit-mcp-server 1.2.1 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (170) hide show
  1. package/ARCHITECTURE.md +102 -102
  2. package/README.md +71 -71
  3. package/SUPERKIT.md +168 -168
  4. package/agents/code-archaeologist.md +106 -106
  5. package/agents/coder.md +90 -90
  6. package/agents/data-engineer.md +28 -28
  7. package/agents/devops-engineer.md +242 -242
  8. package/agents/git-manager.md +203 -203
  9. package/agents/orchestrator.md +420 -420
  10. package/agents/penetration-tester.md +188 -188
  11. package/agents/performance-optimizer.md +187 -187
  12. package/agents/planner.md +270 -270
  13. package/agents/qa-automation-engineer.md +103 -103
  14. package/agents/quant-developer.md +32 -32
  15. package/agents/reviewer.md +100 -100
  16. package/agents/scout.md +222 -222
  17. package/agents/security-auditor.md +3 -2
  18. package/agents/tester.md +274 -274
  19. package/agents/ui-designer.md +208 -208
  20. package/build/index.js +21 -2
  21. package/build/tools/__tests__/loggerTools.test.js +5 -5
  22. package/build/tools/archTools.js +2 -19
  23. package/build/tools/autoPreview.js +2 -2
  24. package/build/tools/compoundTools.js +4 -4
  25. package/build/tools/docsTools.js +5 -10
  26. package/build/tools/loggerTools.js +1 -1
  27. package/build/tools/todoTools.js +39 -39
  28. package/build/tools/validators/__tests__/apiSchema.test.js +23 -23
  29. package/build/tools/validators/__tests__/convertRules.test.js +5 -5
  30. package/build/tools/validators/__tests__/frontendDesign.test.js +12 -12
  31. package/build/tools/validators/__tests__/geoChecker.test.js +19 -19
  32. package/build/tools/validators/__tests__/mobileAudit.test.js +12 -12
  33. package/build/tools/validators/__tests__/reactPerformanceChecker.test.js +17 -17
  34. package/build/tools/validators/__tests__/securityScan.test.js +6 -6
  35. package/build/tools/validators/__tests__/seoChecker.test.js +16 -16
  36. package/build/tools/validators/__tests__/typeCoverage.test.js +14 -14
  37. package/build/tools/validators/convertRules.js +2 -2
  38. package/commands/README.md +122 -122
  39. package/commands/ask.toml +72 -72
  40. package/commands/brainstorm.toml +119 -119
  41. package/commands/chat.toml +77 -77
  42. package/commands/code-preview.toml +37 -37
  43. package/commands/code.toml +28 -28
  44. package/commands/content.toml +200 -200
  45. package/commands/cook.toml +77 -77
  46. package/commands/copywrite.toml +131 -131
  47. package/commands/db.toml +192 -192
  48. package/commands/debug.toml +166 -166
  49. package/commands/design.toml +158 -158
  50. package/commands/dev-rules.toml +14 -14
  51. package/commands/do.toml +117 -117
  52. package/commands/doc-rules.toml +14 -14
  53. package/commands/docs.toml +148 -148
  54. package/commands/fix.toml +440 -440
  55. package/commands/fullstack.toml +175 -175
  56. package/commands/git.toml +235 -235
  57. package/commands/help.toml +84 -84
  58. package/commands/integrate.toml +127 -127
  59. package/commands/journal.toml +136 -136
  60. package/commands/kit-setup.toml +40 -40
  61. package/commands/mcp.toml +183 -183
  62. package/commands/orchestration.toml +15 -15
  63. package/commands/plan.toml +171 -171
  64. package/commands/pm.toml +148 -148
  65. package/commands/pr.toml +50 -50
  66. package/commands/project.toml +32 -32
  67. package/commands/research.toml +117 -117
  68. package/commands/review-pr.toml +63 -63
  69. package/commands/review.toml +190 -190
  70. package/commands/scout-ext.toml +97 -97
  71. package/commands/scout.toml +79 -79
  72. package/commands/screenshot.toml +65 -65
  73. package/commands/session.toml +102 -102
  74. package/commands/skill.toml +384 -384
  75. package/commands/status.toml +22 -22
  76. package/commands/team.toml +56 -56
  77. package/commands/test.toml +164 -164
  78. package/commands/ticket.toml +70 -70
  79. package/commands/use.toml +106 -106
  80. package/commands/video.toml +83 -83
  81. package/commands/watzup.toml +71 -71
  82. package/commands/workflow.toml +14 -14
  83. package/package.json +35 -35
  84. package/skills/meta/README.md +30 -30
  85. package/skills/meta/api-design/SKILL.md +134 -134
  86. package/skills/meta/code-review/SKILL.md +44 -44
  87. package/skills/meta/code-review/checklists/pre-merge.md +25 -25
  88. package/skills/meta/code-review/workflows/architecture-pass.md +26 -26
  89. package/skills/meta/code-review/workflows/performance-pass.md +27 -27
  90. package/skills/meta/code-review/workflows/security-pass.md +29 -29
  91. package/skills/meta/compound-docs/SKILL.md +133 -133
  92. package/skills/meta/debug/SKILL.md +40 -40
  93. package/skills/meta/debug/templates/bug-report.template.md +31 -31
  94. package/skills/meta/debug/workflows/reproduce-issue.md +20 -20
  95. package/skills/meta/docker/SKILL.md +126 -126
  96. package/skills/meta/examples/supabase/SKILL.md +46 -46
  97. package/skills/meta/examples/supabase/references/best-practices.md +319 -319
  98. package/skills/meta/examples/supabase/references/common-patterns.md +373 -373
  99. package/skills/meta/examples/supabase/templates/migration-template.sql +49 -49
  100. package/skills/meta/examples/supabase/templates/rls-policy-template.sql +77 -77
  101. package/skills/meta/examples/supabase/workflows/debugging.md +260 -260
  102. package/skills/meta/examples/supabase/workflows/migration-workflow.md +211 -211
  103. package/skills/meta/examples/supabase/workflows/rls-policies.md +244 -244
  104. package/skills/meta/examples/supabase/workflows/schema-design.md +321 -321
  105. package/skills/meta/file-todos/SKILL.md +88 -88
  106. package/skills/meta/mobile/SKILL.md +140 -140
  107. package/skills/meta/nextjs/SKILL.md +101 -101
  108. package/skills/meta/performance/SKILL.md +130 -130
  109. package/skills/meta/react-patterns/SKILL.md +83 -83
  110. package/skills/meta/security/SKILL.md +114 -114
  111. package/skills/meta/session-resume/SKILL.md +96 -96
  112. package/skills/meta/tailwind/SKILL.md +139 -139
  113. package/skills/meta/testing/SKILL.md +43 -43
  114. package/skills/meta/testing/references/vitest-patterns.md +45 -45
  115. package/skills/meta/testing/templates/component-test.template.tsx +37 -37
  116. package/skills/tech/alpha-vantage/SKILL.md +142 -142
  117. package/skills/tech/alpha-vantage/references/commodities.md +153 -153
  118. package/skills/tech/alpha-vantage/references/economic-indicators.md +158 -158
  119. package/skills/tech/alpha-vantage/references/forex-crypto.md +154 -154
  120. package/skills/tech/alpha-vantage/references/fundamentals.md +223 -223
  121. package/skills/tech/alpha-vantage/references/intelligence.md +138 -138
  122. package/skills/tech/alpha-vantage/references/options.md +93 -93
  123. package/skills/tech/alpha-vantage/references/technical-indicators.md +374 -374
  124. package/skills/tech/alpha-vantage/references/time-series.md +157 -157
  125. package/skills/tech/doc.md +6 -6
  126. package/skills/tech/financial-modeling/SKILL.md +18 -18
  127. package/skills/tech/financial-modeling/skills/3-statements/SKILL.md +368 -368
  128. package/skills/tech/financial-modeling/skills/3-statements/references/formatting.md +118 -118
  129. package/skills/tech/financial-modeling/skills/3-statements/references/formulas.md +292 -292
  130. package/skills/tech/financial-modeling/skills/3-statements/references/sec-filings.md +125 -125
  131. package/skills/tech/financial-modeling/skills/dcf-model/SKILL.md +1210 -1210
  132. package/skills/tech/financial-modeling/skills/dcf-model/TROUBLESHOOTING.md +40 -40
  133. package/skills/tech/financial-modeling/skills/dcf-model/requirements.txt +8 -8
  134. package/skills/tech/financial-modeling/skills/dcf-model/scripts/validate_dcf.py +292 -292
  135. package/skills/tech/financial-modeling/skills/lbo-model/SKILL.md +236 -236
  136. package/skills/tech/financial-modeling/skills/merger-model/SKILL.md +108 -108
  137. package/skills/workflows/README.md +203 -203
  138. package/skills/workflows/adr.md +174 -174
  139. package/skills/workflows/changelog.md +74 -74
  140. package/skills/workflows/compound.md +323 -323
  141. package/skills/workflows/compound_health.md +74 -74
  142. package/skills/workflows/create-agent-skill.md +138 -139
  143. package/skills/workflows/cycle.md +144 -144
  144. package/skills/workflows/deploy-docs.md +84 -84
  145. package/skills/workflows/development-rules.md +42 -42
  146. package/skills/workflows/doc.md +95 -95
  147. package/skills/workflows/documentation-management.md +34 -34
  148. package/skills/workflows/explore.md +146 -146
  149. package/skills/workflows/generate_command.md +106 -106
  150. package/skills/workflows/heal-skill.md +97 -97
  151. package/skills/workflows/housekeeping.md +229 -229
  152. package/skills/workflows/kit-setup.md +102 -102
  153. package/skills/workflows/map-codebase.md +78 -78
  154. package/skills/workflows/orchestration-protocol.md +43 -43
  155. package/skills/workflows/plan-compound.md +439 -439
  156. package/skills/workflows/plan_review.md +269 -269
  157. package/skills/workflows/primary-workflow.md +37 -37
  158. package/skills/workflows/promote_pattern.md +86 -86
  159. package/skills/workflows/release-docs.md +82 -82
  160. package/skills/workflows/report-bug.md +135 -135
  161. package/skills/workflows/reproduce-bug.md +118 -118
  162. package/skills/workflows/resolve_pr.md +133 -133
  163. package/skills/workflows/resolve_todo.md +128 -128
  164. package/skills/workflows/review-compound.md +376 -376
  165. package/skills/workflows/skill-review.md +127 -127
  166. package/skills/workflows/specs.md +257 -257
  167. package/skills/workflows/triage-sprint.md +102 -102
  168. package/skills/workflows/triage.md +152 -152
  169. package/skills/workflows/work.md +399 -399
  170. package/skills/workflows/xcode-test.md +93 -93
@@ -1,88 +1,88 @@
1
- ---
2
- name: file-todos
3
- description: Manage file-based todo tracking in the todos/ directory
4
- ---
5
-
6
- # File-Based Todo Tracking
7
-
8
- Provides workflows for creating, managing, and completing todos stored as markdown files.
9
-
10
- ## Overview
11
-
12
- The `todos/` directory contains markdown files with YAML frontmatter for tracking work items.
13
-
14
- ## File Naming Convention
15
-
16
- ```
17
- {issue_id}-{status}-{priority}-{description}.md
18
-
19
- Examples:
20
- 001-pending-p1-security-fix.md
21
- 002-ready-p2-performance-opt.md
22
- 003-complete-p3-cleanup.md
23
- ```
24
-
25
- ## Status Lifecycle
26
-
27
- ```
28
- pending → ready → complete
29
-
30
- (deleted if skipped)
31
- ```
32
-
33
- ## What do you want to do?
34
-
35
- 1. **Create a todo** → See "Creating Todos" below
36
- 2. **Triage pending items** → Use `/triage`
37
- 3. **Work on todos** → Use `/resolve_todo`
38
- 4. **Check dependencies** → See "Dependency Management" below
39
-
40
- ---
41
-
42
- ## Instrumentation
43
-
44
- ```bash
45
- # Log usage when using this skill
46
- Call MCP `call_tool_logger_manager` { action: "logSkill", name: "file-todos", outcome: "manual" }
47
- ```
48
-
49
- ## Creating Todos
50
-
51
- ```bash
52
- # Get next ID
53
- next_id=$(ls todos/*.md 2>/dev/null | grep -o '[0-9]\+' | sort -n | tail -1 | awk '{printf "%03d", $1+1}')
54
- [ -z "$next_id" ] && next_id="001"
55
-
56
- # Copy template
57
- cp todos/todo-template.md todos/${next_id}-pending-{priority}-{description}.md
58
- ```
59
-
60
- ## Dependency Management
61
-
62
- ```yaml
63
- # In YAML frontmatter
64
- dependencies: ["001", "002"] # Blocked by these issues
65
- dependencies: [] # No blockers
66
- ```
67
-
68
- Check blockers:
69
- ```bash
70
- grep "dependencies:" todos/{file}.md
71
- ```
72
-
73
- ## Quick Commands
74
-
75
- ```bash
76
- # List by status
77
- ls todos/*-pending-*.md
78
- ls todos/*-ready-*.md
79
- ls todos/*-complete-*.md
80
-
81
- # List by priority
82
- ls todos/*-p1-*.md
83
-
84
- # Count by status
85
- for s in pending ready complete; do
86
- echo "$s: $(ls todos/*-$s-*.md 2>/dev/null | wc -l)"
87
- done
88
- ```
1
+ ---
2
+ name: file-todos
3
+ description: Manage file-based todo tracking in the todos/ directory
4
+ ---
5
+
6
+ # File-Based Todo Tracking
7
+
8
+ Provides workflows for creating, managing, and completing todos stored as markdown files.
9
+
10
+ ## Overview
11
+
12
+ The `todos/` directory contains markdown files with YAML frontmatter for tracking work items.
13
+
14
+ ## File Naming Convention
15
+
16
+ ```
17
+ {issue_id}-{status}-{priority}-{description}.md
18
+
19
+ Examples:
20
+ 001-pending-p1-security-fix.md
21
+ 002-ready-p2-performance-opt.md
22
+ 003-complete-p3-cleanup.md
23
+ ```
24
+
25
+ ## Status Lifecycle
26
+
27
+ ```
28
+ pending → ready → complete
29
+
30
+ (deleted if skipped)
31
+ ```
32
+
33
+ ## What do you want to do?
34
+
35
+ 1. **Create a todo** → See "Creating Todos" below
36
+ 2. **Triage pending items** → Use `/triage`
37
+ 3. **Work on todos** → Use `/resolve_todo`
38
+ 4. **Check dependencies** → See "Dependency Management" below
39
+
40
+ ---
41
+
42
+ ## Instrumentation
43
+
44
+ ```bash
45
+ # Log usage when using this skill
46
+ Call MCP `call_tool_logger_manager` { action: "logSkill", name: "file-todos", outcome: "manual" }
47
+ ```
48
+
49
+ ## Creating Todos
50
+
51
+ ```bash
52
+ # Get next ID
53
+ next_id=$(ls todos/*.md 2>/dev/null | grep -o '[0-9]\+' | sort -n | tail -1 | awk '{printf "%03d", $1+1}')
54
+ [ -z "$next_id" ] && next_id="001"
55
+
56
+ # Copy template
57
+ cp todos/todo-template.md todos/${next_id}-pending-{priority}-{description}.md
58
+ ```
59
+
60
+ ## Dependency Management
61
+
62
+ ```yaml
63
+ # In YAML frontmatter
64
+ dependencies: ["001", "002"] # Blocked by these issues
65
+ dependencies: [] # No blockers
66
+ ```
67
+
68
+ Check blockers:
69
+ ```bash
70
+ grep "dependencies:" todos/{file}.md
71
+ ```
72
+
73
+ ## Quick Commands
74
+
75
+ ```bash
76
+ # List by status
77
+ ls todos/*-pending-*.md
78
+ ls todos/*-ready-*.md
79
+ ls todos/*-complete-*.md
80
+
81
+ # List by priority
82
+ ls todos/*-p1-*.md
83
+
84
+ # Count by status
85
+ for s in pending ready complete; do
86
+ echo "$s: $(ls todos/*-$s-*.md 2>/dev/null | wc -l)"
87
+ done
88
+ ```
@@ -1,140 +1,140 @@
1
- # Mobile Development Skill
2
-
3
- ## Overview
4
- React Native, Flutter, and mobile development best practices.
5
-
6
- ## React Native Patterns
7
-
8
- ### 1. Project Structure
9
- ```
10
- src/
11
- ├── components/ # Reusable UI components
12
- │ ├── Button.tsx
13
- │ └── Card.tsx
14
- ├── screens/ # Screen components
15
- │ ├── Home.tsx
16
- │ └── Profile.tsx
17
- ├── navigation/ # Navigation config
18
- │ └── AppNavigator.tsx
19
- ├── hooks/ # Custom hooks
20
- ├── services/ # API calls
21
- ├── stores/ # State management
22
- └── utils/ # Utilities
23
- ```
24
-
25
- ### 2. Navigation
26
- ```tsx
27
- import { NavigationContainer } from '@react-navigation/native';
28
- import { createNativeStackNavigator } from '@react-navigation/native-stack';
29
-
30
- const Stack = createNativeStackNavigator();
31
-
32
- function AppNavigator() {
33
- return (
34
- <NavigationContainer>
35
- <Stack.Navigator initialRouteName="Home">
36
- <Stack.Screen name="Home" component={HomeScreen} />
37
- <Stack.Screen name="Profile" component={ProfileScreen} />
38
- </Stack.Navigator>
39
- </NavigationContainer>
40
- );
41
- }
42
- ```
43
-
44
- ### 3. Styling
45
- ```tsx
46
- import { StyleSheet, View, Text } from 'react-native';
47
-
48
- const styles = StyleSheet.create({
49
- container: {
50
- flex: 1,
51
- padding: 16,
52
- backgroundColor: '#fff',
53
- },
54
- title: {
55
- fontSize: 24,
56
- fontWeight: 'bold',
57
- marginBottom: 12,
58
- },
59
- });
60
-
61
- // Or use styled-components
62
- import styled from 'styled-components/native';
63
-
64
- const Container = styled.View`
65
- flex: 1;
66
- padding: 16px;
67
- `;
68
- ```
69
-
70
- ## Performance Optimization
71
-
72
- ### FlatList Best Practices
73
- ```tsx
74
- <FlatList
75
- data={items}
76
- renderItem={({ item }) => <ItemCard item={item} />}
77
- keyExtractor={(item) => item.id}
78
-
79
- // Performance props
80
- removeClippedSubviews={true}
81
- maxToRenderPerBatch={10}
82
- windowSize={5}
83
- initialNumToRender={10}
84
- getItemLayout={(data, index) => ({
85
- length: ITEM_HEIGHT,
86
- offset: ITEM_HEIGHT * index,
87
- index,
88
- })}
89
- />
90
- ```
91
-
92
- ### Memoization
93
- ```tsx
94
- // Memoize expensive components
95
- const MemoizedItem = React.memo(({ item }) => (
96
- <View>
97
- <Text>{item.title}</Text>
98
- </View>
99
- ));
100
-
101
- // useCallback for event handlers
102
- const handlePress = useCallback(() => {
103
- navigation.navigate('Details', { id: item.id });
104
- }, [item.id]);
105
- ```
106
-
107
- ## Platform-Specific Code
108
- ```tsx
109
- import { Platform } from 'react-native';
110
-
111
- const styles = StyleSheet.create({
112
- shadow: Platform.select({
113
- ios: {
114
- shadowColor: '#000',
115
- shadowOffset: { width: 0, height: 2 },
116
- shadowOpacity: 0.25,
117
- },
118
- android: {
119
- elevation: 5,
120
- },
121
- }),
122
- });
123
-
124
- // Or use file extensions
125
- // Button.ios.tsx
126
- // Button.android.tsx
127
- ```
128
-
129
- ## Testing
130
- ```typescript
131
- import { render, fireEvent } from '@testing-library/react-native';
132
-
133
- test('button press', () => {
134
- const onPress = jest.fn();
135
- const { getByText } = render(<Button onPress={onPress} title="Click" />);
136
-
137
- fireEvent.press(getByText('Click'));
138
- expect(onPress).toHaveBeenCalled();
139
- });
140
- ```
1
+ # Mobile Development Skill
2
+
3
+ ## Overview
4
+ React Native, Flutter, and mobile development best practices.
5
+
6
+ ## React Native Patterns
7
+
8
+ ### 1. Project Structure
9
+ ```
10
+ src/
11
+ ├── components/ # Reusable UI components
12
+ │ ├── Button.tsx
13
+ │ └── Card.tsx
14
+ ├── screens/ # Screen components
15
+ │ ├── Home.tsx
16
+ │ └── Profile.tsx
17
+ ├── navigation/ # Navigation config
18
+ │ └── AppNavigator.tsx
19
+ ├── hooks/ # Custom hooks
20
+ ├── services/ # API calls
21
+ ├── stores/ # State management
22
+ └── utils/ # Utilities
23
+ ```
24
+
25
+ ### 2. Navigation
26
+ ```tsx
27
+ import { NavigationContainer } from '@react-navigation/native';
28
+ import { createNativeStackNavigator } from '@react-navigation/native-stack';
29
+
30
+ const Stack = createNativeStackNavigator();
31
+
32
+ function AppNavigator() {
33
+ return (
34
+ <NavigationContainer>
35
+ <Stack.Navigator initialRouteName="Home">
36
+ <Stack.Screen name="Home" component={HomeScreen} />
37
+ <Stack.Screen name="Profile" component={ProfileScreen} />
38
+ </Stack.Navigator>
39
+ </NavigationContainer>
40
+ );
41
+ }
42
+ ```
43
+
44
+ ### 3. Styling
45
+ ```tsx
46
+ import { StyleSheet, View, Text } from 'react-native';
47
+
48
+ const styles = StyleSheet.create({
49
+ container: {
50
+ flex: 1,
51
+ padding: 16,
52
+ backgroundColor: '#fff',
53
+ },
54
+ title: {
55
+ fontSize: 24,
56
+ fontWeight: 'bold',
57
+ marginBottom: 12,
58
+ },
59
+ });
60
+
61
+ // Or use styled-components
62
+ import styled from 'styled-components/native';
63
+
64
+ const Container = styled.View`
65
+ flex: 1;
66
+ padding: 16px;
67
+ `;
68
+ ```
69
+
70
+ ## Performance Optimization
71
+
72
+ ### FlatList Best Practices
73
+ ```tsx
74
+ <FlatList
75
+ data={items}
76
+ renderItem={({ item }) => <ItemCard item={item} />}
77
+ keyExtractor={(item) => item.id}
78
+
79
+ // Performance props
80
+ removeClippedSubviews={true}
81
+ maxToRenderPerBatch={10}
82
+ windowSize={5}
83
+ initialNumToRender={10}
84
+ getItemLayout={(data, index) => ({
85
+ length: ITEM_HEIGHT,
86
+ offset: ITEM_HEIGHT * index,
87
+ index,
88
+ })}
89
+ />
90
+ ```
91
+
92
+ ### Memoization
93
+ ```tsx
94
+ // Memoize expensive components
95
+ const MemoizedItem = React.memo(({ item }) => (
96
+ <View>
97
+ <Text>{item.title}</Text>
98
+ </View>
99
+ ));
100
+
101
+ // useCallback for event handlers
102
+ const handlePress = useCallback(() => {
103
+ navigation.navigate('Details', { id: item.id });
104
+ }, [item.id]);
105
+ ```
106
+
107
+ ## Platform-Specific Code
108
+ ```tsx
109
+ import { Platform } from 'react-native';
110
+
111
+ const styles = StyleSheet.create({
112
+ shadow: Platform.select({
113
+ ios: {
114
+ shadowColor: '#000',
115
+ shadowOffset: { width: 0, height: 2 },
116
+ shadowOpacity: 0.25,
117
+ },
118
+ android: {
119
+ elevation: 5,
120
+ },
121
+ }),
122
+ });
123
+
124
+ // Or use file extensions
125
+ // Button.ios.tsx
126
+ // Button.android.tsx
127
+ ```
128
+
129
+ ## Testing
130
+ ```typescript
131
+ import { render, fireEvent } from '@testing-library/react-native';
132
+
133
+ test('button press', () => {
134
+ const onPress = jest.fn();
135
+ const { getByText } = render(<Button onPress={onPress} title="Click" />);
136
+
137
+ fireEvent.press(getByText('Click'));
138
+ expect(onPress).toHaveBeenCalled();
139
+ });
140
+ ```
@@ -1,101 +1,101 @@
1
- # Next.js Best Practices Skill
2
-
3
- ## Overview
4
- Next.js App Router architecture, Server Components, and modern patterns.
5
-
6
- ## Core Concepts
7
-
8
- ### 1. App Router Structure
9
- ```
10
- app/
11
- ├── layout.tsx # Root layout
12
- ├── page.tsx # Home page
13
- ├── loading.tsx # Loading UI
14
- ├── error.tsx # Error UI
15
- ├── not-found.tsx # 404 page
16
- ├── (marketing)/ # Route group
17
- │ ├── about/
18
- │ └── contact/
19
- └── api/
20
- └── route.ts # API route
21
- ```
22
-
23
- ### 2. Server vs Client Components
24
-
25
- ```tsx
26
- // Server Component (default)
27
- async function UserProfile({ userId }: { userId: string }) {
28
- const user = await getUser(userId); // Direct DB access
29
- return <div>{user.name}</div>;
30
- }
31
-
32
- // Client Component
33
- 'use client';
34
- import { useState } from 'react';
35
-
36
- function Counter() {
37
- const [count, setCount] = useState(0);
38
- return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
39
- }
40
- ```
41
-
42
- ### 3. Data Fetching
43
- ```tsx
44
- // Server Component with fetch
45
- async function Posts() {
46
- const posts = await fetch('https://api.example.com/posts', {
47
- next: { revalidate: 3600 } // ISR: revalidate every hour
48
- }).then(res => res.json());
49
-
50
- return posts.map(post => <PostCard key={post.id} post={post} />);
51
- }
52
-
53
- // Server Actions
54
- 'use server';
55
- async function createPost(formData: FormData) {
56
- const title = formData.get('title');
57
- await db.posts.create({ title });
58
- revalidatePath('/posts');
59
- }
60
- ```
61
-
62
- ### 4. Metadata & SEO
63
- ```tsx
64
- export const metadata: Metadata = {
65
- title: 'My App',
66
- description: 'App description',
67
- openGraph: {
68
- title: 'My App',
69
- images: ['/og-image.png'],
70
- },
71
- };
72
-
73
- // Dynamic metadata
74
- export async function generateMetadata({ params }): Promise<Metadata> {
75
- const post = await getPost(params.id);
76
- return { title: post.title };
77
- }
78
- ```
79
-
80
- ### 5. Route Handlers (API)
81
- ```tsx
82
- // app/api/users/route.ts
83
- import { NextResponse } from 'next/server';
84
-
85
- export async function GET(request: Request) {
86
- const users = await getUsers();
87
- return NextResponse.json(users);
88
- }
89
-
90
- export async function POST(request: Request) {
91
- const body = await request.json();
92
- const user = await createUser(body);
93
- return NextResponse.json(user, { status: 201 });
94
- }
95
- ```
96
-
97
- ## Performance Tips
98
- - Use `<Image>` for automatic optimization
99
- - Leverage Streaming with `<Suspense>`
100
- - Use `next/dynamic` for conditional imports
101
- - Enable PPR (Partial Prerendering) where applicable
1
+ # Next.js Best Practices Skill
2
+
3
+ ## Overview
4
+ Next.js App Router architecture, Server Components, and modern patterns.
5
+
6
+ ## Core Concepts
7
+
8
+ ### 1. App Router Structure
9
+ ```
10
+ app/
11
+ ├── layout.tsx # Root layout
12
+ ├── page.tsx # Home page
13
+ ├── loading.tsx # Loading UI
14
+ ├── error.tsx # Error UI
15
+ ├── not-found.tsx # 404 page
16
+ ├── (marketing)/ # Route group
17
+ │ ├── about/
18
+ │ └── contact/
19
+ └── api/
20
+ └── route.ts # API route
21
+ ```
22
+
23
+ ### 2. Server vs Client Components
24
+
25
+ ```tsx
26
+ // Server Component (default)
27
+ async function UserProfile({ userId }: { userId: string }) {
28
+ const user = await getUser(userId); // Direct DB access
29
+ return <div>{user.name}</div>;
30
+ }
31
+
32
+ // Client Component
33
+ 'use client';
34
+ import { useState } from 'react';
35
+
36
+ function Counter() {
37
+ const [count, setCount] = useState(0);
38
+ return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
39
+ }
40
+ ```
41
+
42
+ ### 3. Data Fetching
43
+ ```tsx
44
+ // Server Component with fetch
45
+ async function Posts() {
46
+ const posts = await fetch('https://api.example.com/posts', {
47
+ next: { revalidate: 3600 } // ISR: revalidate every hour
48
+ }).then(res => res.json());
49
+
50
+ return posts.map(post => <PostCard key={post.id} post={post} />);
51
+ }
52
+
53
+ // Server Actions
54
+ 'use server';
55
+ async function createPost(formData: FormData) {
56
+ const title = formData.get('title');
57
+ await db.posts.create({ title });
58
+ revalidatePath('/posts');
59
+ }
60
+ ```
61
+
62
+ ### 4. Metadata & SEO
63
+ ```tsx
64
+ export const metadata: Metadata = {
65
+ title: 'My App',
66
+ description: 'App description',
67
+ openGraph: {
68
+ title: 'My App',
69
+ images: ['/og-image.png'],
70
+ },
71
+ };
72
+
73
+ // Dynamic metadata
74
+ export async function generateMetadata({ params }): Promise<Metadata> {
75
+ const post = await getPost(params.id);
76
+ return { title: post.title };
77
+ }
78
+ ```
79
+
80
+ ### 5. Route Handlers (API)
81
+ ```tsx
82
+ // app/api/users/route.ts
83
+ import { NextResponse } from 'next/server';
84
+
85
+ export async function GET(request: Request) {
86
+ const users = await getUsers();
87
+ return NextResponse.json(users);
88
+ }
89
+
90
+ export async function POST(request: Request) {
91
+ const body = await request.json();
92
+ const user = await createUser(body);
93
+ return NextResponse.json(user, { status: 201 });
94
+ }
95
+ ```
96
+
97
+ ## Performance Tips
98
+ - Use `<Image>` for automatic optimization
99
+ - Leverage Streaming with `<Suspense>`
100
+ - Use `next/dynamic` for conditional imports
101
+ - Enable PPR (Partial Prerendering) where applicable