superkit-mcp-server 1.2.4 → 1.2.6
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.
- package/ARCHITECTURE.md +102 -102
- package/README.md +71 -71
- package/SUPERKIT.md +168 -168
- package/agents/code-archaeologist.md +106 -106
- package/agents/coder.md +90 -90
- package/agents/data-engineer.md +28 -28
- package/agents/devops-engineer.md +242 -242
- package/agents/git-manager.md +203 -203
- package/agents/orchestrator.md +420 -420
- package/agents/penetration-tester.md +188 -188
- package/agents/performance-optimizer.md +187 -187
- package/agents/planner.md +270 -270
- package/agents/qa-automation-engineer.md +103 -103
- package/agents/quant-developer.md +32 -32
- package/agents/reviewer.md +100 -100
- package/agents/scout.md +222 -222
- package/agents/tester.md +274 -274
- package/agents/ui-designer.md +208 -208
- package/build/__tests__/test_apply_prompt_args.js +104 -0
- package/build/index.js +106 -45
- package/build/tools/todoTools.js +39 -39
- package/build/tools/validators/__tests__/apiSchema.test.js +23 -23
- package/build/tools/validators/__tests__/convertRules.test.js +5 -5
- package/build/tools/validators/__tests__/frontendDesign.test.js +12 -12
- package/build/tools/validators/__tests__/geoChecker.test.js +19 -19
- package/build/tools/validators/__tests__/mobileAudit.test.js +12 -12
- package/build/tools/validators/__tests__/reactPerformanceChecker.test.js +17 -17
- package/build/tools/validators/__tests__/securityScan.test.js +6 -6
- package/build/tools/validators/__tests__/seoChecker.test.js +16 -16
- package/build/tools/validators/__tests__/typeCoverage.test.js +14 -14
- package/commands/README.md +122 -122
- package/commands/ask.toml +72 -72
- package/commands/brainstorm.toml +119 -119
- package/commands/chat.toml +77 -77
- package/commands/code-preview.toml +37 -37
- package/commands/code.toml +28 -28
- package/commands/content.toml +200 -200
- package/commands/cook.toml +77 -77
- package/commands/copywrite.toml +131 -131
- package/commands/db.toml +192 -192
- package/commands/debug.toml +166 -166
- package/commands/design.toml +158 -158
- package/commands/dev-rules.toml +14 -14
- package/commands/do.toml +117 -117
- package/commands/doc-rules.toml +14 -14
- package/commands/docs.toml +148 -148
- package/commands/fix.toml +440 -440
- package/commands/fullstack.toml +175 -175
- package/commands/git.toml +235 -235
- package/commands/help.toml +84 -84
- package/commands/integrate.toml +127 -127
- package/commands/journal.toml +136 -136
- package/commands/kit-setup.toml +40 -40
- package/commands/mcp.toml +183 -183
- package/commands/orchestration.toml +15 -15
- package/commands/plan.toml +206 -172
- package/commands/pm.toml +148 -148
- package/commands/pr.toml +50 -50
- package/commands/project.toml +32 -32
- package/commands/research.toml +117 -117
- package/commands/review-pr.toml +63 -63
- package/commands/review.toml +190 -190
- package/commands/scout-ext.toml +97 -97
- package/commands/scout.toml +79 -79
- package/commands/screenshot.toml +65 -65
- package/commands/session.toml +102 -102
- package/commands/skill.toml +384 -384
- package/commands/status.toml +22 -22
- package/commands/team.toml +56 -56
- package/commands/test.toml +164 -164
- package/commands/ticket.toml +70 -70
- package/commands/use.toml +106 -106
- package/commands/video.toml +83 -83
- package/commands/watzup.toml +71 -71
- package/commands/workflow.toml +14 -14
- package/package.json +35 -35
- package/skills/meta/README.md +30 -30
- package/skills/meta/api-design/SKILL.md +134 -134
- package/skills/meta/code-review/SKILL.md +44 -44
- package/skills/meta/code-review/checklists/pre-merge.md +25 -25
- package/skills/meta/code-review/workflows/architecture-pass.md +26 -26
- package/skills/meta/code-review/workflows/performance-pass.md +27 -27
- package/skills/meta/code-review/workflows/security-pass.md +29 -29
- package/skills/meta/compound-docs/SKILL.md +133 -133
- package/skills/meta/debug/SKILL.md +40 -40
- package/skills/meta/debug/templates/bug-report.template.md +31 -31
- package/skills/meta/debug/workflows/reproduce-issue.md +20 -20
- package/skills/meta/docker/SKILL.md +126 -126
- package/skills/meta/examples/supabase/SKILL.md +46 -46
- package/skills/meta/examples/supabase/references/best-practices.md +319 -319
- package/skills/meta/examples/supabase/references/common-patterns.md +373 -373
- package/skills/meta/examples/supabase/templates/migration-template.sql +49 -49
- package/skills/meta/examples/supabase/templates/rls-policy-template.sql +77 -77
- package/skills/meta/examples/supabase/workflows/debugging.md +260 -260
- package/skills/meta/examples/supabase/workflows/migration-workflow.md +211 -211
- package/skills/meta/examples/supabase/workflows/rls-policies.md +244 -244
- package/skills/meta/examples/supabase/workflows/schema-design.md +321 -321
- package/skills/meta/file-todos/SKILL.md +88 -88
- package/skills/meta/mobile/SKILL.md +140 -140
- package/skills/meta/nextjs/SKILL.md +101 -101
- package/skills/meta/performance/SKILL.md +130 -130
- package/skills/meta/react-patterns/SKILL.md +83 -83
- package/skills/meta/security/SKILL.md +114 -114
- package/skills/meta/session-resume/SKILL.md +96 -96
- package/skills/meta/tailwind/SKILL.md +139 -139
- package/skills/meta/testing/SKILL.md +43 -43
- package/skills/meta/testing/references/vitest-patterns.md +45 -45
- package/skills/meta/testing/templates/component-test.template.tsx +37 -37
- package/skills/tech/alpha-vantage/SKILL.md +142 -142
- package/skills/tech/alpha-vantage/references/commodities.md +153 -153
- package/skills/tech/alpha-vantage/references/economic-indicators.md +158 -158
- package/skills/tech/alpha-vantage/references/forex-crypto.md +154 -154
- package/skills/tech/alpha-vantage/references/fundamentals.md +223 -223
- package/skills/tech/alpha-vantage/references/intelligence.md +138 -138
- package/skills/tech/alpha-vantage/references/options.md +93 -93
- package/skills/tech/alpha-vantage/references/technical-indicators.md +374 -374
- package/skills/tech/alpha-vantage/references/time-series.md +157 -157
- package/skills/tech/financial-modeling/SKILL.md +18 -18
- package/skills/tech/financial-modeling/skills/3-statements/SKILL.md +368 -368
- package/skills/tech/financial-modeling/skills/3-statements/references/formatting.md +118 -118
- package/skills/tech/financial-modeling/skills/3-statements/references/formulas.md +292 -292
- package/skills/tech/financial-modeling/skills/3-statements/references/sec-filings.md +125 -125
- package/skills/tech/financial-modeling/skills/dcf-model/SKILL.md +1210 -1210
- package/skills/tech/financial-modeling/skills/dcf-model/TROUBLESHOOTING.md +40 -40
- package/skills/tech/financial-modeling/skills/dcf-model/requirements.txt +8 -8
- package/skills/tech/financial-modeling/skills/dcf-model/scripts/validate_dcf.py +292 -292
- package/skills/tech/financial-modeling/skills/lbo-model/SKILL.md +236 -236
- package/skills/tech/financial-modeling/skills/merger-model/SKILL.md +108 -108
- package/skills/workflows/README.md +203 -203
- package/skills/workflows/adr.md +174 -174
- package/skills/workflows/changelog.md +74 -74
- package/skills/workflows/compound.md +323 -323
- package/skills/workflows/compound_health.md +74 -74
- package/skills/workflows/create-agent-skill.md +138 -138
- package/skills/workflows/cycle.md +144 -144
- package/skills/workflows/deploy-docs.md +84 -84
- package/skills/workflows/development-rules.md +42 -42
- package/skills/workflows/doc.md +95 -95
- package/skills/workflows/documentation-management.md +34 -34
- package/skills/workflows/explore.md +146 -146
- package/skills/workflows/generate_command.md +106 -106
- package/skills/workflows/heal-skill.md +97 -97
- package/skills/workflows/housekeeping.md +229 -229
- package/skills/workflows/kit-setup.md +102 -102
- package/skills/workflows/map-codebase.md +78 -78
- package/skills/workflows/orchestration-protocol.md +43 -43
- package/skills/workflows/plan-compound.md +439 -439
- package/skills/workflows/plan_review.md +269 -269
- package/skills/workflows/primary-workflow.md +37 -37
- package/skills/workflows/promote_pattern.md +86 -86
- package/skills/workflows/release-docs.md +82 -82
- package/skills/workflows/report-bug.md +135 -135
- package/skills/workflows/reproduce-bug.md +118 -118
- package/skills/workflows/resolve_pr.md +133 -133
- package/skills/workflows/resolve_todo.md +128 -128
- package/skills/workflows/review-compound.md +376 -376
- package/skills/workflows/skill-review.md +127 -127
- package/skills/workflows/specs.md +257 -257
- package/skills/workflows/triage-sprint.md +102 -102
- package/skills/workflows/triage.md +152 -152
- package/skills/workflows/work.md +399 -399
- 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
|