superkit-mcp-server 1.2.4 → 1.2.5
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/index.js +88 -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,96 +1,96 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: session-resume
|
|
3
|
-
description: Resume context from previous session
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# Session Resume Skill
|
|
7
|
-
|
|
8
|
-
Helps agents quickly understand where work left off when starting a new session.
|
|
9
|
-
|
|
10
|
-
## When To Use
|
|
11
|
-
|
|
12
|
-
- At the **start of any new conversation**
|
|
13
|
-
- When context seems missing
|
|
14
|
-
- When user asks "what were we working on?"
|
|
15
|
-
|
|
16
|
-
## Instrumentation
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
# Log usage when using this skill
|
|
20
|
-
Call MCP `call_tool_logger_manager` { action: "logSkill", name: "session-resume", outcome: "manual" }
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
---
|
|
24
|
-
|
|
25
|
-
## Quick Resume Checklist
|
|
26
|
-
|
|
27
|
-
### 1. Check Active Work
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
# Ready todos (highest priority)
|
|
31
|
-
ls todos/*-ready-*.md 2>/dev/null | head -5
|
|
32
|
-
|
|
33
|
-
# In-progress plans
|
|
34
|
-
ls plans/*.md 2>/dev/null
|
|
35
|
-
|
|
36
|
-
# Recent solutions (for context)
|
|
37
|
-
ls -t docs/solutions/**/*.md 2>/dev/null | head -3
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### 2. Check Recent Git Activity
|
|
41
|
-
|
|
42
|
-
```bash
|
|
43
|
-
# Recent commits
|
|
44
|
-
git log --oneline -5
|
|
45
|
-
|
|
46
|
-
# Uncommitted changes
|
|
47
|
-
git status --short
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### 3. Summarize Context
|
|
51
|
-
|
|
52
|
-
After gathering info, summarize:
|
|
53
|
-
|
|
54
|
-
### 4. Check System Health
|
|
55
|
-
|
|
56
|
-
```bash
|
|
57
|
-
Call MCP `call_tool_compound_manager` { action: "dashboard" }
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
Review health grade and recommendations before starting work.
|
|
61
|
-
|
|
62
|
-
### 5. Final Summary
|
|
63
|
-
|
|
64
|
-
```
|
|
65
|
-
📍 Session Context:
|
|
66
|
-
|
|
67
|
-
**Active Work:**
|
|
68
|
-
- {X} ready todos waiting
|
|
69
|
-
- Plan in progress: {plan name if any}
|
|
70
|
-
|
|
71
|
-
**Recent Activity:**
|
|
72
|
-
- Last commit: {subject}
|
|
73
|
-
- {Changed files if uncommitted}
|
|
74
|
-
|
|
75
|
-
**Suggested Next Steps:**
|
|
76
|
-
1. {Most logical next action}
|
|
77
|
-
2. {Alternative}
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
---
|
|
81
|
-
|
|
82
|
-
## Automatic Triggers
|
|
83
|
-
|
|
84
|
-
Consider running this skill when you see:
|
|
85
|
-
- User starts with "continue", "resume", "where were we"
|
|
86
|
-
- First message in a new session
|
|
87
|
-
- User seems to lack context
|
|
88
|
-
|
|
89
|
-
---
|
|
90
|
-
|
|
91
|
-
## References
|
|
92
|
-
|
|
93
|
-
- Todos: `todos/`
|
|
94
|
-
- Plans: `plans/`
|
|
95
|
-
- Solutions: `docs/solutions/`
|
|
96
|
-
- Workflows: `skills/workflows/`
|
|
1
|
+
---
|
|
2
|
+
name: session-resume
|
|
3
|
+
description: Resume context from previous session
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Session Resume Skill
|
|
7
|
+
|
|
8
|
+
Helps agents quickly understand where work left off when starting a new session.
|
|
9
|
+
|
|
10
|
+
## When To Use
|
|
11
|
+
|
|
12
|
+
- At the **start of any new conversation**
|
|
13
|
+
- When context seems missing
|
|
14
|
+
- When user asks "what were we working on?"
|
|
15
|
+
|
|
16
|
+
## Instrumentation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
# Log usage when using this skill
|
|
20
|
+
Call MCP `call_tool_logger_manager` { action: "logSkill", name: "session-resume", outcome: "manual" }
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## Quick Resume Checklist
|
|
26
|
+
|
|
27
|
+
### 1. Check Active Work
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
# Ready todos (highest priority)
|
|
31
|
+
ls todos/*-ready-*.md 2>/dev/null | head -5
|
|
32
|
+
|
|
33
|
+
# In-progress plans
|
|
34
|
+
ls plans/*.md 2>/dev/null
|
|
35
|
+
|
|
36
|
+
# Recent solutions (for context)
|
|
37
|
+
ls -t docs/solutions/**/*.md 2>/dev/null | head -3
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### 2. Check Recent Git Activity
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
# Recent commits
|
|
44
|
+
git log --oneline -5
|
|
45
|
+
|
|
46
|
+
# Uncommitted changes
|
|
47
|
+
git status --short
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### 3. Summarize Context
|
|
51
|
+
|
|
52
|
+
After gathering info, summarize:
|
|
53
|
+
|
|
54
|
+
### 4. Check System Health
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
Call MCP `call_tool_compound_manager` { action: "dashboard" }
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Review health grade and recommendations before starting work.
|
|
61
|
+
|
|
62
|
+
### 5. Final Summary
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
📍 Session Context:
|
|
66
|
+
|
|
67
|
+
**Active Work:**
|
|
68
|
+
- {X} ready todos waiting
|
|
69
|
+
- Plan in progress: {plan name if any}
|
|
70
|
+
|
|
71
|
+
**Recent Activity:**
|
|
72
|
+
- Last commit: {subject}
|
|
73
|
+
- {Changed files if uncommitted}
|
|
74
|
+
|
|
75
|
+
**Suggested Next Steps:**
|
|
76
|
+
1. {Most logical next action}
|
|
77
|
+
2. {Alternative}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## Automatic Triggers
|
|
83
|
+
|
|
84
|
+
Consider running this skill when you see:
|
|
85
|
+
- User starts with "continue", "resume", "where were we"
|
|
86
|
+
- First message in a new session
|
|
87
|
+
- User seems to lack context
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
## References
|
|
92
|
+
|
|
93
|
+
- Todos: `todos/`
|
|
94
|
+
- Plans: `plans/`
|
|
95
|
+
- Solutions: `docs/solutions/`
|
|
96
|
+
- Workflows: `skills/workflows/`
|
|
@@ -1,139 +1,139 @@
|
|
|
1
|
-
# Tailwind CSS Skill
|
|
2
|
-
|
|
3
|
-
## Overview
|
|
4
|
-
Tailwind CSS v4 patterns, design systems, and responsive design.
|
|
5
|
-
|
|
6
|
-
## Core Concepts
|
|
7
|
-
|
|
8
|
-
### 1. Utility-First Approach
|
|
9
|
-
```html
|
|
10
|
-
<!-- Instead of writing CSS -->
|
|
11
|
-
<div class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-lg">
|
|
12
|
-
<img class="size-16 rounded-full" src="avatar.jpg" alt="">
|
|
13
|
-
<div>
|
|
14
|
-
<h3 class="text-lg font-semibold text-gray-900">John Doe</h3>
|
|
15
|
-
<p class="text-gray-500">Developer</p>
|
|
16
|
-
</div>
|
|
17
|
-
</div>
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
### 2. Responsive Design
|
|
21
|
-
```html
|
|
22
|
-
<!-- Mobile-first approach -->
|
|
23
|
-
<div class="
|
|
24
|
-
grid grid-cols-1 gap-4
|
|
25
|
-
sm:grid-cols-2
|
|
26
|
-
md:grid-cols-3
|
|
27
|
-
lg:grid-cols-4
|
|
28
|
-
">
|
|
29
|
-
<!-- Cards -->
|
|
30
|
-
</div>
|
|
31
|
-
|
|
32
|
-
<!-- Container widths -->
|
|
33
|
-
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
34
|
-
<!-- Content -->
|
|
35
|
-
</div>
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
### 3. Dark Mode
|
|
39
|
-
```html
|
|
40
|
-
<div class="bg-white dark:bg-gray-900">
|
|
41
|
-
<h1 class="text-gray-900 dark:text-white">Title</h1>
|
|
42
|
-
<p class="text-gray-600 dark:text-gray-300">Description</p>
|
|
43
|
-
</div>
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
### 4. State Variants
|
|
47
|
-
```html
|
|
48
|
-
<button class="
|
|
49
|
-
bg-blue-500
|
|
50
|
-
hover:bg-blue-600
|
|
51
|
-
focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
|
|
52
|
-
active:bg-blue-700
|
|
53
|
-
disabled:opacity-50 disabled:cursor-not-allowed
|
|
54
|
-
transition-colors duration-200
|
|
55
|
-
">
|
|
56
|
-
Submit
|
|
57
|
-
</button>
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
## Component Patterns
|
|
61
|
-
|
|
62
|
-
### Card Component
|
|
63
|
-
```html
|
|
64
|
-
<div class="
|
|
65
|
-
bg-white rounded-2xl shadow-md
|
|
66
|
-
overflow-hidden
|
|
67
|
-
hover:shadow-xl transition-shadow duration-300
|
|
68
|
-
">
|
|
69
|
-
<img class="w-full h-48 object-cover" src="..." alt="">
|
|
70
|
-
<div class="p-6">
|
|
71
|
-
<h3 class="text-xl font-bold mb-2">Card Title</h3>
|
|
72
|
-
<p class="text-gray-600 line-clamp-2">Description...</p>
|
|
73
|
-
</div>
|
|
74
|
-
</div>
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
### Form Input
|
|
78
|
-
```html
|
|
79
|
-
<div class="space-y-2">
|
|
80
|
-
<label class="block text-sm font-medium text-gray-700">Email</label>
|
|
81
|
-
<input
|
|
82
|
-
type="email"
|
|
83
|
-
class="
|
|
84
|
-
w-full px-4 py-2
|
|
85
|
-
border border-gray-300 rounded-lg
|
|
86
|
-
focus:ring-2 focus:ring-blue-500 focus:border-blue-500
|
|
87
|
-
placeholder:text-gray-400
|
|
88
|
-
"
|
|
89
|
-
placeholder="you@example.com"
|
|
90
|
-
>
|
|
91
|
-
</div>
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
### Button Variants
|
|
95
|
-
```html
|
|
96
|
-
<!-- Primary -->
|
|
97
|
-
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
|
|
98
|
-
Primary
|
|
99
|
-
</button>
|
|
100
|
-
|
|
101
|
-
<!-- Secondary -->
|
|
102
|
-
<button class="px-4 py-2 bg-gray-100 text-gray-900 rounded-lg hover:bg-gray-200">
|
|
103
|
-
Secondary
|
|
104
|
-
</button>
|
|
105
|
-
|
|
106
|
-
<!-- Outline -->
|
|
107
|
-
<button class="px-4 py-2 border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50">
|
|
108
|
-
Outline
|
|
109
|
-
</button>
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
## Custom Design System
|
|
113
|
-
|
|
114
|
-
### tailwind.config.js
|
|
115
|
-
```javascript
|
|
116
|
-
module.exports = {
|
|
117
|
-
theme: {
|
|
118
|
-
extend: {
|
|
119
|
-
colors: {
|
|
120
|
-
primary: {
|
|
121
|
-
50: '#eff6ff',
|
|
122
|
-
500: '#3b82f6',
|
|
123
|
-
600: '#2563eb',
|
|
124
|
-
700: '#1d4ed8',
|
|
125
|
-
},
|
|
126
|
-
},
|
|
127
|
-
fontFamily: {
|
|
128
|
-
sans: ['Inter', 'sans-serif'],
|
|
129
|
-
},
|
|
130
|
-
},
|
|
131
|
-
},
|
|
132
|
-
};
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
## Best Practices
|
|
136
|
-
- Use `@apply` sparingly (prefer utilities in HTML)
|
|
137
|
-
- Extract components instead of `@apply`
|
|
138
|
-
- Use arbitrary values `[]` for one-off designs
|
|
139
|
-
- Enable JIT mode for development
|
|
1
|
+
# Tailwind CSS Skill
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
Tailwind CSS v4 patterns, design systems, and responsive design.
|
|
5
|
+
|
|
6
|
+
## Core Concepts
|
|
7
|
+
|
|
8
|
+
### 1. Utility-First Approach
|
|
9
|
+
```html
|
|
10
|
+
<!-- Instead of writing CSS -->
|
|
11
|
+
<div class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-lg">
|
|
12
|
+
<img class="size-16 rounded-full" src="avatar.jpg" alt="">
|
|
13
|
+
<div>
|
|
14
|
+
<h3 class="text-lg font-semibold text-gray-900">John Doe</h3>
|
|
15
|
+
<p class="text-gray-500">Developer</p>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### 2. Responsive Design
|
|
21
|
+
```html
|
|
22
|
+
<!-- Mobile-first approach -->
|
|
23
|
+
<div class="
|
|
24
|
+
grid grid-cols-1 gap-4
|
|
25
|
+
sm:grid-cols-2
|
|
26
|
+
md:grid-cols-3
|
|
27
|
+
lg:grid-cols-4
|
|
28
|
+
">
|
|
29
|
+
<!-- Cards -->
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<!-- Container widths -->
|
|
33
|
+
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
34
|
+
<!-- Content -->
|
|
35
|
+
</div>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### 3. Dark Mode
|
|
39
|
+
```html
|
|
40
|
+
<div class="bg-white dark:bg-gray-900">
|
|
41
|
+
<h1 class="text-gray-900 dark:text-white">Title</h1>
|
|
42
|
+
<p class="text-gray-600 dark:text-gray-300">Description</p>
|
|
43
|
+
</div>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### 4. State Variants
|
|
47
|
+
```html
|
|
48
|
+
<button class="
|
|
49
|
+
bg-blue-500
|
|
50
|
+
hover:bg-blue-600
|
|
51
|
+
focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
|
|
52
|
+
active:bg-blue-700
|
|
53
|
+
disabled:opacity-50 disabled:cursor-not-allowed
|
|
54
|
+
transition-colors duration-200
|
|
55
|
+
">
|
|
56
|
+
Submit
|
|
57
|
+
</button>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Component Patterns
|
|
61
|
+
|
|
62
|
+
### Card Component
|
|
63
|
+
```html
|
|
64
|
+
<div class="
|
|
65
|
+
bg-white rounded-2xl shadow-md
|
|
66
|
+
overflow-hidden
|
|
67
|
+
hover:shadow-xl transition-shadow duration-300
|
|
68
|
+
">
|
|
69
|
+
<img class="w-full h-48 object-cover" src="..." alt="">
|
|
70
|
+
<div class="p-6">
|
|
71
|
+
<h3 class="text-xl font-bold mb-2">Card Title</h3>
|
|
72
|
+
<p class="text-gray-600 line-clamp-2">Description...</p>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Form Input
|
|
78
|
+
```html
|
|
79
|
+
<div class="space-y-2">
|
|
80
|
+
<label class="block text-sm font-medium text-gray-700">Email</label>
|
|
81
|
+
<input
|
|
82
|
+
type="email"
|
|
83
|
+
class="
|
|
84
|
+
w-full px-4 py-2
|
|
85
|
+
border border-gray-300 rounded-lg
|
|
86
|
+
focus:ring-2 focus:ring-blue-500 focus:border-blue-500
|
|
87
|
+
placeholder:text-gray-400
|
|
88
|
+
"
|
|
89
|
+
placeholder="you@example.com"
|
|
90
|
+
>
|
|
91
|
+
</div>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Button Variants
|
|
95
|
+
```html
|
|
96
|
+
<!-- Primary -->
|
|
97
|
+
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
|
|
98
|
+
Primary
|
|
99
|
+
</button>
|
|
100
|
+
|
|
101
|
+
<!-- Secondary -->
|
|
102
|
+
<button class="px-4 py-2 bg-gray-100 text-gray-900 rounded-lg hover:bg-gray-200">
|
|
103
|
+
Secondary
|
|
104
|
+
</button>
|
|
105
|
+
|
|
106
|
+
<!-- Outline -->
|
|
107
|
+
<button class="px-4 py-2 border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50">
|
|
108
|
+
Outline
|
|
109
|
+
</button>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## Custom Design System
|
|
113
|
+
|
|
114
|
+
### tailwind.config.js
|
|
115
|
+
```javascript
|
|
116
|
+
module.exports = {
|
|
117
|
+
theme: {
|
|
118
|
+
extend: {
|
|
119
|
+
colors: {
|
|
120
|
+
primary: {
|
|
121
|
+
50: '#eff6ff',
|
|
122
|
+
500: '#3b82f6',
|
|
123
|
+
600: '#2563eb',
|
|
124
|
+
700: '#1d4ed8',
|
|
125
|
+
},
|
|
126
|
+
},
|
|
127
|
+
fontFamily: {
|
|
128
|
+
sans: ['Inter', 'sans-serif'],
|
|
129
|
+
},
|
|
130
|
+
},
|
|
131
|
+
},
|
|
132
|
+
};
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## Best Practices
|
|
136
|
+
- Use `@apply` sparingly (prefer utilities in HTML)
|
|
137
|
+
- Extract components instead of `@apply`
|
|
138
|
+
- Use arbitrary values `[]` for one-off designs
|
|
139
|
+
- Enable JIT mode for development
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: testing
|
|
3
|
-
description: Unified testing commands and patterns across frontend and backend.
|
|
4
|
-
last_updated: 2025-12-20
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# Testing Skill
|
|
8
|
-
|
|
9
|
-
## Overview
|
|
10
|
-
|
|
11
|
-
Guidance and templates for testing in {PROJECT_NAME}. Covers React Component testing (Vitest/RTL) and Backend testing (Python/Pytest).
|
|
12
|
-
|
|
13
|
-
## When To Use
|
|
14
|
-
|
|
15
|
-
- **Writing new code**: Every new feature needs tests.
|
|
16
|
-
- **Fixing bugs**: Create a reproduction test first.
|
|
17
|
-
- **Refactoring**: Ensure green tests before and after.
|
|
18
|
-
|
|
19
|
-
## Instrumentation
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
# Log usage when using this skill
|
|
23
|
-
Call MCP `call_tool_logger_manager` { action: "logSkill", name: "testing", outcome: "manual" }
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## What do you want to do?
|
|
27
|
-
|
|
28
|
-
1. **Test React Components** → `workflows/run-frontend-tests.md`
|
|
29
|
-
2. **Test Backend/API** → `workflows/run-backend-tests.md`
|
|
30
|
-
3. **Write a New Test** → `templates/component-test.template.tsx`
|
|
31
|
-
4. **Fix Test Failures** → `references/vitest-patterns.md`
|
|
32
|
-
|
|
33
|
-
## Quick Commands
|
|
34
|
-
|
|
35
|
-
```bash
|
|
36
|
-
# Frontend (Unit/Integration)
|
|
37
|
-
npm test
|
|
38
|
-
npm test -- -t "ComponentName" # Run specific test
|
|
39
|
-
|
|
40
|
-
# Backend (API)
|
|
41
|
-
pytest
|
|
42
|
-
pytest -k "test_name"
|
|
43
|
-
```
|
|
1
|
+
---
|
|
2
|
+
name: testing
|
|
3
|
+
description: Unified testing commands and patterns across frontend and backend.
|
|
4
|
+
last_updated: 2025-12-20
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Testing Skill
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
Guidance and templates for testing in {PROJECT_NAME}. Covers React Component testing (Vitest/RTL) and Backend testing (Python/Pytest).
|
|
12
|
+
|
|
13
|
+
## When To Use
|
|
14
|
+
|
|
15
|
+
- **Writing new code**: Every new feature needs tests.
|
|
16
|
+
- **Fixing bugs**: Create a reproduction test first.
|
|
17
|
+
- **Refactoring**: Ensure green tests before and after.
|
|
18
|
+
|
|
19
|
+
## Instrumentation
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
# Log usage when using this skill
|
|
23
|
+
Call MCP `call_tool_logger_manager` { action: "logSkill", name: "testing", outcome: "manual" }
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## What do you want to do?
|
|
27
|
+
|
|
28
|
+
1. **Test React Components** → `workflows/run-frontend-tests.md`
|
|
29
|
+
2. **Test Backend/API** → `workflows/run-backend-tests.md`
|
|
30
|
+
3. **Write a New Test** → `templates/component-test.template.tsx`
|
|
31
|
+
4. **Fix Test Failures** → `references/vitest-patterns.md`
|
|
32
|
+
|
|
33
|
+
## Quick Commands
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
# Frontend (Unit/Integration)
|
|
37
|
+
npm test
|
|
38
|
+
npm test -- -t "ComponentName" # Run specific test
|
|
39
|
+
|
|
40
|
+
# Backend (API)
|
|
41
|
+
pytest
|
|
42
|
+
pytest -k "test_name"
|
|
43
|
+
```
|
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
# Vitest & Testing Library Patterns
|
|
2
|
-
|
|
3
|
-
## Common Mocking Patterns
|
|
4
|
-
|
|
5
|
-
### Mocking a Module
|
|
6
|
-
```tsx
|
|
7
|
-
vi.mock('next/navigation', () => ({
|
|
8
|
-
useRouter: () => ({
|
|
9
|
-
push: vi.fn(),
|
|
10
|
-
replace: vi.fn(),
|
|
11
|
-
}),
|
|
12
|
-
}));
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
### Mocking a Component
|
|
16
|
-
```tsx
|
|
17
|
-
vi.mock('./ChildComponent', () => ({
|
|
18
|
-
ChildComponent: () => <div data-testid="child-mock">Mocked Child</div>,
|
|
19
|
-
}));
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
## Async Testing
|
|
23
|
-
|
|
24
|
-
Wait for element to appear:
|
|
25
|
-
```tsx
|
|
26
|
-
await waitFor(() => {
|
|
27
|
-
expect(screen.getByText('Loaded')).toBeInTheDocument();
|
|
28
|
-
});
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
Verify element disappears:
|
|
32
|
-
```tsx
|
|
33
|
-
await waitFor(() => {
|
|
34
|
-
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
|
|
35
|
-
});
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## User Interaction
|
|
39
|
-
|
|
40
|
-
Use `fireEvent` for simple events, or `userEvent` (if setup) for complex ones.
|
|
41
|
-
|
|
42
|
-
```tsx
|
|
43
|
-
fireEvent.change(input, { target: { value: 'New Value' } });
|
|
44
|
-
fireEvent.click(button);
|
|
45
|
-
```
|
|
1
|
+
# Vitest & Testing Library Patterns
|
|
2
|
+
|
|
3
|
+
## Common Mocking Patterns
|
|
4
|
+
|
|
5
|
+
### Mocking a Module
|
|
6
|
+
```tsx
|
|
7
|
+
vi.mock('next/navigation', () => ({
|
|
8
|
+
useRouter: () => ({
|
|
9
|
+
push: vi.fn(),
|
|
10
|
+
replace: vi.fn(),
|
|
11
|
+
}),
|
|
12
|
+
}));
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Mocking a Component
|
|
16
|
+
```tsx
|
|
17
|
+
vi.mock('./ChildComponent', () => ({
|
|
18
|
+
ChildComponent: () => <div data-testid="child-mock">Mocked Child</div>,
|
|
19
|
+
}));
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Async Testing
|
|
23
|
+
|
|
24
|
+
Wait for element to appear:
|
|
25
|
+
```tsx
|
|
26
|
+
await waitFor(() => {
|
|
27
|
+
expect(screen.getByText('Loaded')).toBeInTheDocument();
|
|
28
|
+
});
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Verify element disappears:
|
|
32
|
+
```tsx
|
|
33
|
+
await waitFor(() => {
|
|
34
|
+
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
|
|
35
|
+
});
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## User Interaction
|
|
39
|
+
|
|
40
|
+
Use `fireEvent` for simple events, or `userEvent` (if setup) for complex ones.
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
fireEvent.change(input, { target: { value: 'New Value' } });
|
|
44
|
+
fireEvent.click(button);
|
|
45
|
+
```
|