opencode-agent-kit 1.0.17 → 1.0.18
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/README.md +4 -4
- package/package.json +1 -1
- package/template/.opencode/.agents.md +55 -0
- package/template/.opencode/agents/flutter-developer.md +1 -1
- package/template/.opencode/agents/nuxt-frontend-developer.md +4 -4
- package/template/.opencode/agents/react-frontend-developer.md +4 -4
- package/template/.opencode/docs/frontend/nuxt/COMPLETION_REPORT.md +1 -1
- package/template/.opencode/docs/frontend/nuxt/INDEX.md +1 -1
- package/template/.opencode/docs/frontend/nuxt/QUICK_START.md +2 -2
- package/template/.opencode/docs/frontend/nuxt/README.md +8 -8
- package/template/.opencode/docs/frontend/nuxt/SUMMARY.md +1 -1
- package/template/.opencode/docs/frontend/nuxt/TESTING_GUIDE.md +1 -1
- package/template/.opencode/docs/frontend/nuxt/WORKFLOWS.md +1 -1
- package/template/.opencode/docs/frontend/react/CHEATSHEET.md +1 -1
- package/template/.opencode/docs/frontend/react/INDEX.md +9 -9
- package/template/.opencode/docs/frontend/react/QUICK_START.md +1 -1
- package/template/.opencode/docs/frontend/react/README.md +1 -1
- package/template/.opencode/docs/mobile/flutter/README.md +1 -1
- package/template/.opencode/skills/impeccable/SKILL.md +5 -2
- package/template/.opencode/config.example.json +0 -309
- package/template/.opencode/config.json +0 -285
- package/template/.opencode/skills/continuous-learning/config.json +0 -18
- package/template/.opencode/skills/continuous-learning-v2/config.json +0 -41
- package/template/.opencode/skills/frontend-design/SKILL.md +0 -89
package/README.md
CHANGED
|
@@ -330,10 +330,10 @@ Skills are stored in `.opencode/skills/` (local in the repo) — no need to sear
|
|
|
330
330
|
| Agent | Key Skills |
|
|
331
331
|
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
332
332
|
| IT Leader | coding-standards, backend-patterns, frontend-patterns |
|
|
333
|
-
| Frontend Developer (Vue) | coding-standards, frontend-patterns,
|
|
334
|
-
| Frontend Developer (React) | coding-standards, frontend-patterns,
|
|
333
|
+
| Frontend Developer (Vue) | coding-standards, frontend-patterns, impeccable, web-design-guidelines, nuxt-ui, tdd-workflow |
|
|
334
|
+
| Frontend Developer (React) | coding-standards, frontend-patterns, impeccable, web-design-guidelines, vercel-react-best-practices, vercel-composition-patterns, tdd-workflow |
|
|
335
335
|
| Backend Developer | coding-standards, backend-patterns, postgres-patterns, security-review |
|
|
336
|
-
| UI/UX Designer |
|
|
336
|
+
| UI/UX Designer | impeccable, web-design-guidelines, building-components, nuxt-ui |
|
|
337
337
|
| Code Reviewer / QA | coding-standards, security-review, tdd-workflow, web-design-guidelines |
|
|
338
338
|
| Database Specialist | postgres-patterns, backend-patterns |
|
|
339
339
|
| DevOps / Infrastructure | backend-patterns, coding-standards |
|
|
@@ -388,7 +388,7 @@ If skills are not yet on your machine, copy them from this repo:
|
|
|
388
388
|
mkdir -p ~/.opencode/skills
|
|
389
389
|
cp -R ./.opencode/skills/coding-standards ~/.opencode/skills/
|
|
390
390
|
cp -R ./.opencode/skills/frontend-patterns ~/.opencode/skills/
|
|
391
|
-
cp -R ./.opencode/skills/
|
|
391
|
+
cp -R ./.opencode/skills/impeccable ~/.opencode/skills/
|
|
392
392
|
cp -R ./.opencode/skills/web-design-guidelines ~/.opencode/skills/
|
|
393
393
|
cp -R ./.opencode/skills/nuxt-ui ~/.opencode/skills/
|
|
394
394
|
cp -R ./.opencode/skills/security-review ~/.opencode/skills/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "opencode-agent-kit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"description": "Multi-stack OpenCode agent toolkit — 13 specialized AI agents (Nuxt, React, Node.js, Laravel, CI3, Android, Flutter, DevOps, SEO, SonarQube) with 62 skills, 37 commands, and 7 MCP servers",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
## Goal
|
|
2
|
+
- Create a SonarQube quality agent that scans code via SonarQube MCP tools, generates TODOs for issues found, and delegates fixes to relevant subagents
|
|
3
|
+
|
|
4
|
+
## Constraints & Preferences
|
|
5
|
+
- Must use SonarQube MCP server tools (issues, quality-gates, security-hotspots, duplications, rules, measures, projects, coverage)
|
|
6
|
+
- Must use `todowrite` tool for task tracking (not `todo`)
|
|
7
|
+
- Must follow existing agent structure with Global Rules, Core Identity, What You DO, Delegation Protocol
|
|
8
|
+
- Must integrate with existing agent ecosystem (it-leader.md orchestrator + 13 specialized subagents)
|
|
9
|
+
- Full Scan mode: Issues + Security Hotspots + Duplications + Coverage + Dependencies + Quality Gate
|
|
10
|
+
- Trigger: Manual via `/sonarqube-scan` command or `@sonarqube` mention
|
|
11
|
+
- Landing page (index.html) and all documentation must reflect 13 agents, 37 commands, 7 MCP servers
|
|
12
|
+
|
|
13
|
+
## Progress
|
|
14
|
+
### Done
|
|
15
|
+
- Fetched SonarQube MCP server documentation and available toolsets
|
|
16
|
+
- Reviewed existing agent configurations (it-leader.md, code-reviewer.md)
|
|
17
|
+
- Created `.opencode/agents/sonarqube-quality.md` (406 lines) — full agent definition with scan modes, delegation matrix, issue lifecycle, output contracts
|
|
18
|
+
- Created `.opencode/commands/sonarqube-scan.md` (65 lines) — slash command with options (--project, --severity, --quick, --rescan)
|
|
19
|
+
- Updated `.opencode/agents/it-leader.md` — added `@sonarqube` to subagents table, capabilities reference, decision tree, verification policy, session subagents list
|
|
20
|
+
- Updated `AGENTS.md` — updated agent count (12→13), added Quality category, SonarQube to subagents list, added SonarQube to MCP servers
|
|
21
|
+
- Updated `index.html` — meta tags, hero badge, subtitle, stats, terminal, orbital nodes, marquee, agent cards, MCP section (all reflect 13 agents, 37 commands, 7 MCP)
|
|
22
|
+
- Updated `README.md` — counts, agent list, custom agents table, commands section
|
|
23
|
+
- Updated `package.json` — description, keywords
|
|
24
|
+
|
|
25
|
+
### In Progress
|
|
26
|
+
- (none)
|
|
27
|
+
|
|
28
|
+
### Blocked
|
|
29
|
+
- (none)
|
|
30
|
+
|
|
31
|
+
## Key Decisions
|
|
32
|
+
- File name: `sonarqube-quality.md` (not `sonarqube-agent.md`) to match naming convention
|
|
33
|
+
- Three operating modes: `quick` (issues only), `full` (all 10 toolsets), `pr` (PR scope)
|
|
34
|
+
- Delegation matrix routes fixes by file extension to 11 domain subagents including `@security-reviewer` for hotspots
|
|
35
|
+
- Issue lifecycle: OPEN → SCANNED → TODO_CREATED → DELEGATED → FIX_APPLIED → RE_SCANNED → VERIFIED/ACCEPTED
|
|
36
|
+
- SonarQube MCP server needs toolsets enabled: `issues,security-hotspots,duplications,coverage,dependency-risks,quality-gates,measures,projects,rules`
|
|
37
|
+
|
|
38
|
+
## Next Steps
|
|
39
|
+
- (all documentation updated — task complete)
|
|
40
|
+
|
|
41
|
+
## Critical Context
|
|
42
|
+
- SonarQube MCP tools: `search_sonar_issues_in_projects`, `search_security_hotspots`, `search_duplicated_files`, `get_duplications`, `search_files_by_coverage`, `get_file_coverage_details`, `search_dependency_risks`, `get_quality_gate_status`, `get_component_measures`, `search_my_sonarqube_projects`, `get_rule`, `get_analysis`, `change_sonar_issue_status`, `change_security_hotspot_review_status`
|
|
43
|
+
- Agent must NOT be a coder — only scan, report, create TODOs, and delegate
|
|
44
|
+
- Delegation targets: `@frontend-nuxt`, `@frontend-react`, `@backend`, `@ci3`, `@laravel`, `@android`, `@flutter`, `@database`, `@devops`, `@security-reviewer`
|
|
45
|
+
- Severity mapping: Blocker/Critical → high priority, Major → medium, Minor/Info → low
|
|
46
|
+
- Existing agents count updated from 12 to 13 across all documentation
|
|
47
|
+
|
|
48
|
+
## Relevant Files
|
|
49
|
+
- `.opencode/agents/sonarqube-quality.md`: New SonarQube quality agent definition (406 lines)
|
|
50
|
+
- `.opencode/commands/sonarqube-scan.md`: New slash command for triggering scans (65 lines)
|
|
51
|
+
- `.opencode/agents/it-leader.md`: Updated orchestrator — added `@sonarqube` to subagents, delegation tree, capabilities
|
|
52
|
+
- `AGENTS.md`: Updated project documentation — agent count, categories, MCP servers
|
|
53
|
+
- `index.html`: Landing page — updated to reflect 13 agents, SonarQube card, 37 commands, 7 MCP servers
|
|
54
|
+
- `README.md`: Setup guide — updated counts, agent list, custom agents table, commands
|
|
55
|
+
- `package.json`: NPM package metadata — updated description and keywords
|
|
@@ -90,7 +90,7 @@ If user does not specify mode, infer automatically from task size and risk.
|
|
|
90
90
|
1. **`coding-standards`** — Universal coding standards and best practices
|
|
91
91
|
2. **`flutter`** — Comprehensive Flutter patterns, architecture, state management, and testing
|
|
92
92
|
3. **`frontend-patterns`** — Mobile UI patterns and component architecture
|
|
93
|
-
4. **`
|
|
93
|
+
4. **`impeccable`** — Impeccable design intelligence: typography, color, layout, motion, critique, and polish
|
|
94
94
|
5. **`web-design-guidelines`** — UI/UX compliance and accessibility
|
|
95
95
|
|
|
96
96
|
### Contextual Skills (Load when needed)
|
|
@@ -103,7 +103,7 @@ Load these skills by default at the beginning of each session:
|
|
|
103
103
|
|
|
104
104
|
1. **`coding-standards`** - Universal coding standards and best practices
|
|
105
105
|
2. **`frontend-patterns`** - Modern Vue/Nuxt patterns and component architecture
|
|
106
|
-
3. **`
|
|
106
|
+
3. **`impeccable`** - Impeccable design intelligence: typography, color, layout, motion, critique, and polish
|
|
107
107
|
4. **`web-design-guidelines`** - UI/UX compliance and accessibility
|
|
108
108
|
|
|
109
109
|
For trivial edits, keep skill-loading implicit and avoid verbose announcements.
|
|
@@ -124,7 +124,7 @@ Load these skills based on the task context:
|
|
|
124
124
|
# Session Start Protocol
|
|
125
125
|
|
|
126
126
|
1. Analyze project structure
|
|
127
|
-
2. Load core skills (coding-standards, frontend-patterns,
|
|
127
|
+
2. Load core skills (coding-standards, frontend-patterns, impeccable)
|
|
128
128
|
3. Connect to MCP servers (Nuxt, Nuxt UI, Playwright)
|
|
129
129
|
4. Identify framework (Nuxt as primary) and load relevant skills
|
|
130
130
|
5. Infer session goals from user request first; ask only when blocked
|
|
@@ -1068,7 +1068,7 @@ export function useMarketData(marketId: Ref<string>) {
|
|
|
1068
1068
|
|
|
1069
1069
|
## Design & Aesthetics Philosophy
|
|
1070
1070
|
|
|
1071
|
-
This project uses **Impeccable** (impeccable.style) design intelligence. Impeccable's shared design laws are automatically applied to every UI you build. The `
|
|
1071
|
+
This project uses **Impeccable** (impeccable.style) design intelligence. Impeccable's shared design laws are automatically applied to every UI you build. The `impeccable` skill is pre-loaded with these principles.
|
|
1072
1072
|
|
|
1073
1073
|
### Design Thinking Process
|
|
1074
1074
|
|
|
@@ -1487,7 +1487,7 @@ Before starting work, check if `opencode-agent-kit` has an update:
|
|
|
1487
1487
|
Quick context check:
|
|
1488
1488
|
|
|
1489
1489
|
- Project: [Detected framework and version]
|
|
1490
|
-
- Loaded skills: coding-standards, frontend-patterns,
|
|
1490
|
+
- Loaded skills: coding-standards, frontend-patterns, impeccable
|
|
1491
1491
|
- Ready to: [build components | optimize performance | implement designs | review code]
|
|
1492
1492
|
|
|
1493
1493
|
What are we working on today?
|
|
@@ -103,7 +103,7 @@ If user does not specify mode, infer automatically from task size and risk.
|
|
|
103
103
|
|
|
104
104
|
1. **`coding-standards`** - Universal coding standards and best practices
|
|
105
105
|
2. **`frontend-patterns`** - Modern React/Next.js patterns and component architecture
|
|
106
|
-
3. **`
|
|
106
|
+
3. **`impeccable`** - Impeccable design intelligence: typography, color, layout, motion, critique, and polish
|
|
107
107
|
4. **`web-design-guidelines`** - UI/UX compliance and accessibility
|
|
108
108
|
|
|
109
109
|
### Contextual Skills (Load when needed)
|
|
@@ -121,7 +121,7 @@ If user does not specify mode, infer automatically from task size and risk.
|
|
|
121
121
|
# Session Start Protocol
|
|
122
122
|
|
|
123
123
|
1. Analyze project structure
|
|
124
|
-
2. Load core skills (coding-standards, frontend-patterns,
|
|
124
|
+
2. Load core skills (coding-standards, frontend-patterns, impeccable)
|
|
125
125
|
3. Identify framework (React/Next.js) and load relevant skills
|
|
126
126
|
4. Infer session goals from user request first; ask only when blocked
|
|
127
127
|
5. Load additional contextual skills as needed
|
|
@@ -623,7 +623,7 @@ function LoginForm() {
|
|
|
623
623
|
|
|
624
624
|
## Design & Aesthetics Philosophy
|
|
625
625
|
|
|
626
|
-
This project uses **Impeccable** (impeccable.style) design intelligence. Impeccable's shared design laws are automatically applied to every UI you build. The `
|
|
626
|
+
This project uses **Impeccable** (impeccable.style) design intelligence. Impeccable's shared design laws are automatically applied to every UI you build. The `impeccable` skill is pre-loaded with these principles.
|
|
627
627
|
|
|
628
628
|
### Design Thinking Process
|
|
629
629
|
|
|
@@ -958,7 +958,7 @@ React Frontend Developer activated!
|
|
|
958
958
|
|
|
959
959
|
Project context:
|
|
960
960
|
- Framework: [React | Next.js | Vite]
|
|
961
|
-
- Loaded skills: coding-standards, frontend-patterns,
|
|
961
|
+
- Loaded skills: coding-standards, frontend-patterns, impeccable
|
|
962
962
|
- Ready to: [build components | optimize performance | implement designs | review code]
|
|
963
963
|
|
|
964
964
|
What are we working on today?
|
|
@@ -28,7 +28,7 @@ Navigasi lengkap untuk semua dokumentasi Frontend Developer Agent.
|
|
|
28
28
|
.opencode/
|
|
29
29
|
├── agents/
|
|
30
30
|
│ └── frontend-developer.md # Agent definition
|
|
31
|
-
└──
|
|
31
|
+
└── docs/frontend/nuxt/ # Supporting documentation (this directory)
|
|
32
32
|
├── INDEX.md # This file - navigation hub
|
|
33
33
|
├── README.md # Complete user guide
|
|
34
34
|
├── QUICK_START.md # Get started in 5 minutes
|
|
@@ -40,7 +40,7 @@ Agent otomatis akan load skills yang dibutuhkan:
|
|
|
40
40
|
```
|
|
41
41
|
✓ coding-standards
|
|
42
42
|
✓ frontend-patterns
|
|
43
|
-
✓
|
|
43
|
+
✓ impeccable
|
|
44
44
|
✓ web-design-guidelines
|
|
45
45
|
```
|
|
46
46
|
|
|
@@ -179,7 +179,7 @@ Agent punya akses ke 10+ skills dari repository Anda:
|
|
|
179
179
|
|
|
180
180
|
- **coding-standards** - Universal best practices
|
|
181
181
|
- **frontend-patterns** - Vue/Nuxt patterns
|
|
182
|
-
- **
|
|
182
|
+
- **impeccable** - Design intelligence (typography, color, layout, motion, critique)
|
|
183
183
|
- **web-design-guidelines** - UI/UX compliance
|
|
184
184
|
|
|
185
185
|
### Contextual Skills (On-demand)
|
|
@@ -73,12 +73,12 @@ Agent akan otomatis load skills ini saat session dimulai:
|
|
|
73
73
|
- Performance optimization
|
|
74
74
|
- Form handling
|
|
75
75
|
|
|
76
|
-
3. **`
|
|
77
|
-
-
|
|
78
|
-
-
|
|
79
|
-
- Typography
|
|
80
|
-
-
|
|
81
|
-
-
|
|
76
|
+
3. **`impeccable`**
|
|
77
|
+
- Impeccable design intelligence
|
|
78
|
+
- Design critique, audit, and polish
|
|
79
|
+
- Typography and color systems
|
|
80
|
+
- Layout, motion, and interaction
|
|
81
|
+
- 23 sub-commands (craft, shape, critique, etc.)
|
|
82
82
|
|
|
83
83
|
4. **`web-design-guidelines`**
|
|
84
84
|
- UI/UX compliance
|
|
@@ -145,7 +145,7 @@ geometric patterns.
|
|
|
145
145
|
|
|
146
146
|
Agent akan:
|
|
147
147
|
|
|
148
|
-
1. Load skill `
|
|
148
|
+
1. Load skill `impeccable`
|
|
149
149
|
2. Choose distinctive fonts (bukan Inter/Roboto)
|
|
150
150
|
3. Create cohesive color palette
|
|
151
151
|
4. Implement purposeful animations
|
|
@@ -484,7 +484,7 @@ git commit -m "Update frontend agent: add new skill integration"
|
|
|
484
484
|
│ │
|
|
485
485
|
│ LOADED SKILLS: │
|
|
486
486
|
│ ✓ coding-standards ✓ frontend-patterns │
|
|
487
|
-
│ ✓
|
|
487
|
+
│ ✓ impeccable ✓ web-design-guidelines │
|
|
488
488
|
│ │
|
|
489
489
|
│ CONTEXTUAL SKILLS: │
|
|
490
490
|
│ • nuxt-ui • vercel-composition-patterns │
|
|
@@ -196,7 +196,7 @@ Agent terintegrasi dengan **10+ professional skills**:
|
|
|
196
196
|
**Core Skills (Auto-loaded):**
|
|
197
197
|
- ✅ coding-standards
|
|
198
198
|
- ✅ frontend-patterns
|
|
199
|
-
- ✅
|
|
199
|
+
- ✅ impeccable
|
|
200
200
|
- ✅ web-design-guidelines
|
|
201
201
|
|
|
202
202
|
**Contextual Skills (On-demand):**
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
|-------|-------------|
|
|
78
78
|
| `coding-standards` | Universal coding standards |
|
|
79
79
|
| `frontend-patterns` | React/Next.js patterns |
|
|
80
|
-
| `
|
|
80
|
+
| `impeccable` | Impeccable design intelligence |
|
|
81
81
|
| `web-design-guidelines` | UI/UX compliance |
|
|
82
82
|
| `shadcn-ui` | shadcn/ui components |
|
|
83
83
|
| `vercel-react-best-practices` | React performance |
|
|
@@ -4,11 +4,11 @@ Navigasi lengkap untuk semua dokumentasi React Frontend Developer Agent (`@front
|
|
|
4
4
|
|
|
5
5
|
## Quick Links
|
|
6
6
|
|
|
7
|
-
| Kebutuhan
|
|
8
|
-
|
|
9
|
-
| Baru mulai?
|
|
10
|
-
| Panduan lengkap?
|
|
11
|
-
| Cari command cepat?
|
|
7
|
+
| Kebutuhan | Dokumen |
|
|
8
|
+
| ----------------------- | ------------------------------------ |
|
|
9
|
+
| Baru mulai? | [QUICK_START.md](./QUICK_START.md) |
|
|
10
|
+
| Panduan lengkap? | [README.md](./README.md) |
|
|
11
|
+
| Cari command cepat? | [CHEATSHEET.md](./CHEATSHEET.md) |
|
|
12
12
|
| Data fetching patterns? | [API_PATTERNS.md](./API_PATTERNS.md) |
|
|
13
13
|
|
|
14
14
|
## Documentation Structure
|
|
@@ -17,7 +17,7 @@ Navigasi lengkap untuk semua dokumentasi React Frontend Developer Agent (`@front
|
|
|
17
17
|
.opencode/
|
|
18
18
|
├── agents/
|
|
19
19
|
│ └── react-frontend-developer.md # Agent definition
|
|
20
|
-
└──
|
|
20
|
+
└── docs/frontend/react/ # Supporting documentation (this directory)
|
|
21
21
|
├── INDEX.md # This file — navigation hub
|
|
22
22
|
├── README.md # Complete user guide
|
|
23
23
|
├── QUICK_START.md # Get started in 5 minutes
|
|
@@ -39,7 +39,7 @@ Navigasi lengkap untuk semua dokumentasi React Frontend Developer Agent (`@front
|
|
|
39
39
|
|
|
40
40
|
## Agent Reference
|
|
41
41
|
|
|
42
|
-
| Mention
|
|
43
|
-
|
|
42
|
+
| Mention | File | Stack |
|
|
43
|
+
| ----------------- | ----------------------------- | --------------------------------------------- |
|
|
44
44
|
| `@frontend-react` | `react-frontend-developer.md` | React 19, Next.js 15, shadcn/ui, Tailwind CSS |
|
|
45
|
-
| `@frontend-nuxt`
|
|
45
|
+
| `@frontend-nuxt` | `nuxt-frontend-developer.md` | Nuxt 4, Vue 3, Nuxt UI, Tailwind CSS |
|
|
@@ -46,7 +46,7 @@ IT Leader akan otomatis mendelegasikan task ke `@frontend-react` ketika project
|
|
|
46
46
|
Setiap session, agent akan load:
|
|
47
47
|
1. `coding-standards` — Universal coding standards
|
|
48
48
|
2. `frontend-patterns` — React/Next.js patterns
|
|
49
|
-
3. `
|
|
49
|
+
3. `impeccable` — Impeccable design intelligence
|
|
50
50
|
4. `web-design-guidelines` — UI/UX compliance
|
|
51
51
|
|
|
52
52
|
### Contextual Skills (load sesuai kebutuhan)
|
|
@@ -36,7 +36,7 @@ Cross-platform mobile development dengan Dart, Flutter SDK, dan Material Design
|
|
|
36
36
|
|
|
37
37
|
- `coding-standards` — Universal coding standards
|
|
38
38
|
- `frontend-patterns` — Mobile UI patterns
|
|
39
|
-
- `
|
|
39
|
+
- `impeccable` — Impeccable design intelligence
|
|
40
40
|
- `web-design-guidelines` — UI/UX compliance
|
|
41
41
|
- `firebase-basics` — Firebase services
|
|
42
42
|
- `building-components` — Reusable widget libraries
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: impeccable
|
|
3
|
-
description: "
|
|
4
|
-
|
|
3
|
+
description: "Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks."
|
|
4
|
+
argument-hint: "[{{command_hint}}] [target]"
|
|
5
|
+
user-invocable: true
|
|
6
|
+
allowed-tools:
|
|
7
|
+
- Bash(npx impeccable *)
|
|
5
8
|
license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
|
|
6
9
|
---
|
|
7
10
|
|
|
@@ -1,309 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://opencode.ai/config.json",
|
|
3
|
-
"description": "IT Team Agent Configuration Example - Copy ke config.json dan sesuaikan model sesuai kebutuhan",
|
|
4
|
-
"note": "Opsional: Jika tidak set model per agent, subagent akan inherit dari primary (IT Leader). Untuk customize, uncomment model line per agent.",
|
|
5
|
-
"mcp": {
|
|
6
|
-
"nuxt": {
|
|
7
|
-
"type": "remote",
|
|
8
|
-
"url": "https://nuxt.com/mcp",
|
|
9
|
-
"enabled": true,
|
|
10
|
-
"description": "Nuxt documentation, blog posts, and deployment guides"
|
|
11
|
-
},
|
|
12
|
-
"nuxt-ui": {
|
|
13
|
-
"type": "remote",
|
|
14
|
-
"url": "https://ui.nuxt.com/mcp",
|
|
15
|
-
"enabled": true,
|
|
16
|
-
"description": "Nuxt UI component documentation and examples"
|
|
17
|
-
},
|
|
18
|
-
"figma": {
|
|
19
|
-
"type": "stdio",
|
|
20
|
-
"command": "npx",
|
|
21
|
-
"args": ["-y", "@modelcontextprotocol/server-figma"],
|
|
22
|
-
"env": {
|
|
23
|
-
"FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
|
|
24
|
-
},
|
|
25
|
-
"enabled": false,
|
|
26
|
-
"description": "Figma design file access (requires FIGMA_ACCESS_TOKEN)"
|
|
27
|
-
},
|
|
28
|
-
"playwright": {
|
|
29
|
-
"type": "stdio",
|
|
30
|
-
"command": "npx",
|
|
31
|
-
"args": ["-y", "@modelcontextprotocol/server-playwright"],
|
|
32
|
-
"enabled": true,
|
|
33
|
-
"description": "Browser automation and E2E testing with Playwright"
|
|
34
|
-
},
|
|
35
|
-
"stitch": {
|
|
36
|
-
"type": "remote",
|
|
37
|
-
"url": "https://stitch.googleapis.com/mcp",
|
|
38
|
-
"headers": {
|
|
39
|
-
"X-Goog-Api-Key": "${STITCH_API_KEY}"
|
|
40
|
-
},
|
|
41
|
-
"enabled": false,
|
|
42
|
-
"description": "Google Stitch AI design generation (requires STITCH_API_KEY)"
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
"agent": {
|
|
46
|
-
"leader": {
|
|
47
|
-
"description": "IT Leader & Technical Project Manager — analyzes requirements, designs architecture, decomposes tasks, delegates to subagents, and unifies outputs",
|
|
48
|
-
"mode": "primary",
|
|
49
|
-
"prompt": "{file:.opencode/agents/it-leader.md}",
|
|
50
|
-
"model": "opencode/claude-opus-4.7",
|
|
51
|
-
"temperature": 0.4,
|
|
52
|
-
"color": "#8b5cf6",
|
|
53
|
-
"permission": {
|
|
54
|
-
"edit": "allow",
|
|
55
|
-
"bash": {
|
|
56
|
-
"*": "ask",
|
|
57
|
-
"npm *": "allow",
|
|
58
|
-
"pnpm *": "allow",
|
|
59
|
-
"bun *": "allow",
|
|
60
|
-
"yarn *": "allow",
|
|
61
|
-
"git status": "allow",
|
|
62
|
-
"git diff": "allow",
|
|
63
|
-
"git log*": "allow",
|
|
64
|
-
"npx playwright*": "allow"
|
|
65
|
-
},
|
|
66
|
-
"webfetch": "allow",
|
|
67
|
-
"skill": {
|
|
68
|
-
"*": "allow"
|
|
69
|
-
},
|
|
70
|
-
"mcp": {
|
|
71
|
-
"nuxt": "allow",
|
|
72
|
-
"nuxt-ui": "allow",
|
|
73
|
-
"figma": "ask",
|
|
74
|
-
"playwright": "allow"
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
"frontend": {
|
|
79
|
-
"description": "Expert frontend developer for Nuxt.js, Vue, and modern web technologies with MCP integration (subagent of IT Leader)",
|
|
80
|
-
"mode": "subagent",
|
|
81
|
-
"prompt": "{file:.opencode/agents/nuxt-frontend-developer.md}",
|
|
82
|
-
"model": "opencode/claude-sonnet-4.5",
|
|
83
|
-
"temperature": 0.4,
|
|
84
|
-
"color": "#3b82f6",
|
|
85
|
-
"permission": {
|
|
86
|
-
"edit": "allow",
|
|
87
|
-
"bash": {
|
|
88
|
-
"*": "ask",
|
|
89
|
-
"npm *": "allow",
|
|
90
|
-
"pnpm *": "allow",
|
|
91
|
-
"bun *": "allow",
|
|
92
|
-
"yarn *": "allow",
|
|
93
|
-
"git status": "allow",
|
|
94
|
-
"git diff": "allow",
|
|
95
|
-
"git log*": "allow",
|
|
96
|
-
"npx playwright*": "allow"
|
|
97
|
-
},
|
|
98
|
-
"webfetch": "allow",
|
|
99
|
-
"skill": {
|
|
100
|
-
"*": "allow"
|
|
101
|
-
},
|
|
102
|
-
"mcp": {
|
|
103
|
-
"nuxt": "allow",
|
|
104
|
-
"nuxt-ui": "allow",
|
|
105
|
-
"figma": "ask",
|
|
106
|
-
"playwright": "allow"
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
"backend": {
|
|
111
|
-
"description": "Expert backend developer for Node.js, Express, Prisma, and PostgreSQL (subagent of IT Leader)",
|
|
112
|
-
"mode": "subagent",
|
|
113
|
-
"prompt": "{file:.opencode/agents/node-backend-developer.md}",
|
|
114
|
-
"model": "opencode/claude-sonnet-4.5",
|
|
115
|
-
"temperature": 0.4,
|
|
116
|
-
"color": "#10b981",
|
|
117
|
-
"permission": {
|
|
118
|
-
"edit": "allow",
|
|
119
|
-
"bash": {
|
|
120
|
-
"*": "ask",
|
|
121
|
-
"npm *": "allow",
|
|
122
|
-
"pnpm *": "allow",
|
|
123
|
-
"bun *": "allow",
|
|
124
|
-
"yarn *": "allow",
|
|
125
|
-
"git status": "allow",
|
|
126
|
-
"git diff": "allow",
|
|
127
|
-
"git log*": "allow"
|
|
128
|
-
},
|
|
129
|
-
"webfetch": "allow",
|
|
130
|
-
"skill": {
|
|
131
|
-
"*": "allow"
|
|
132
|
-
},
|
|
133
|
-
"mcp": {}
|
|
134
|
-
}
|
|
135
|
-
},
|
|
136
|
-
"ci3": {
|
|
137
|
-
"description": "CodeIgniter 3 MVC fullstack developer for REST API, JWT, MySQL/PostgreSQL (subagent of IT Leader)",
|
|
138
|
-
"mode": "subagent",
|
|
139
|
-
"prompt": "{file:.opencode/agents/code-igniter-3-fullstack.md}",
|
|
140
|
-
"model": "opencode/claude-sonnet-4.5",
|
|
141
|
-
"temperature": 0.3,
|
|
142
|
-
"color": "#84cc16",
|
|
143
|
-
"permission": {
|
|
144
|
-
"edit": "allow",
|
|
145
|
-
"webfetch": "allow",
|
|
146
|
-
"skill": { "*": "allow" },
|
|
147
|
-
"bash": {
|
|
148
|
-
"*": "ask",
|
|
149
|
-
"git status": "allow",
|
|
150
|
-
"git diff": "allow",
|
|
151
|
-
"git log*": "allow"
|
|
152
|
-
},
|
|
153
|
-
"mcp": {}
|
|
154
|
-
}
|
|
155
|
-
},
|
|
156
|
-
"laravel": {
|
|
157
|
-
"description": "Laravel backend engineer for REST API, Service/Repository, JWT, MySQL/PostgreSQL (subagent of IT Leader)",
|
|
158
|
-
"mode": "subagent",
|
|
159
|
-
"prompt": "{file:.opencode/agents/laravel-advanced.md}",
|
|
160
|
-
"model": "opencode/claude-sonnet-4.5",
|
|
161
|
-
"temperature": 0.3,
|
|
162
|
-
"color": "#f97316",
|
|
163
|
-
"permission": {
|
|
164
|
-
"edit": "allow",
|
|
165
|
-
"webfetch": "allow",
|
|
166
|
-
"skill": { "*": "allow" },
|
|
167
|
-
"bash": {
|
|
168
|
-
"*": "ask",
|
|
169
|
-
"git status": "allow",
|
|
170
|
-
"git diff": "allow",
|
|
171
|
-
"git log*": "allow"
|
|
172
|
-
},
|
|
173
|
-
"mcp": {}
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
|
-
"designer": {
|
|
177
|
-
"description": "UI/UX Designer specializing in design systems, Google Stitch, Figma, accessibility, and design-to-code handoff (subagent of IT Leader)",
|
|
178
|
-
"mode": "subagent",
|
|
179
|
-
"prompt": "{file:.opencode/agents/ui-ux-designer.md}",
|
|
180
|
-
"model": "opencode/claude-sonnet-4",
|
|
181
|
-
"temperature": 0.5,
|
|
182
|
-
"color": "#f59e0b",
|
|
183
|
-
"permission": {
|
|
184
|
-
"edit": "allow",
|
|
185
|
-
"bash": {
|
|
186
|
-
"*": "ask",
|
|
187
|
-
"git status": "allow",
|
|
188
|
-
"git diff": "allow",
|
|
189
|
-
"git log*": "allow"
|
|
190
|
-
},
|
|
191
|
-
"webfetch": "allow",
|
|
192
|
-
"skill": {
|
|
193
|
-
"*": "allow"
|
|
194
|
-
},
|
|
195
|
-
"mcp": {
|
|
196
|
-
"stitch": "allow",
|
|
197
|
-
"figma": "ask",
|
|
198
|
-
"nuxt-ui": "allow"
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
},
|
|
202
|
-
"reviewer": {
|
|
203
|
-
"description": "Code Reviewer & QA Engineer specializing in code quality, security audit, testing strategy, and verification (subagent of IT Leader)",
|
|
204
|
-
"mode": "subagent",
|
|
205
|
-
"prompt": "{file:.opencode/agents/code-reviewer.md}",
|
|
206
|
-
"model": "opencode/claude-opus-4.5",
|
|
207
|
-
"temperature": 0.3,
|
|
208
|
-
"color": "#ef4444",
|
|
209
|
-
"permission": {
|
|
210
|
-
"edit": "allow",
|
|
211
|
-
"bash": {
|
|
212
|
-
"*": "ask",
|
|
213
|
-
"npm *": "allow",
|
|
214
|
-
"pnpm *": "allow",
|
|
215
|
-
"bun *": "allow",
|
|
216
|
-
"yarn *": "allow",
|
|
217
|
-
"git status": "allow",
|
|
218
|
-
"git diff": "allow",
|
|
219
|
-
"git log*": "allow",
|
|
220
|
-
"npx playwright*": "allow"
|
|
221
|
-
},
|
|
222
|
-
"webfetch": "allow",
|
|
223
|
-
"skill": {
|
|
224
|
-
"*": "allow"
|
|
225
|
-
},
|
|
226
|
-
"mcp": {
|
|
227
|
-
"playwright": "allow"
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
},
|
|
231
|
-
"database": {
|
|
232
|
-
"description": "Database Specialist specializing in PostgreSQL schema design, query optimization, Prisma ORM, and migrations (subagent of IT Leader)",
|
|
233
|
-
"mode": "subagent",
|
|
234
|
-
"prompt": "{file:.opencode/agents/database-specialist.md}",
|
|
235
|
-
"model": "opencode/claude-sonnet-4.5",
|
|
236
|
-
"temperature": 0.3,
|
|
237
|
-
"color": "#06b6d4",
|
|
238
|
-
"permission": {
|
|
239
|
-
"edit": "allow",
|
|
240
|
-
"bash": {
|
|
241
|
-
"*": "ask",
|
|
242
|
-
"npm *": "allow",
|
|
243
|
-
"pnpm *": "allow",
|
|
244
|
-
"bun *": "allow",
|
|
245
|
-
"yarn *": "allow",
|
|
246
|
-
"git status": "allow",
|
|
247
|
-
"git diff": "allow",
|
|
248
|
-
"git log*": "allow"
|
|
249
|
-
},
|
|
250
|
-
"webfetch": "allow",
|
|
251
|
-
"skill": {
|
|
252
|
-
"*": "allow"
|
|
253
|
-
},
|
|
254
|
-
"mcp": {}
|
|
255
|
-
}
|
|
256
|
-
},
|
|
257
|
-
"devops": {
|
|
258
|
-
"description": "DevOps Engineer specializing in CI/CD, deployment, Docker, monitoring, and infrastructure (subagent of IT Leader)",
|
|
259
|
-
"mode": "subagent",
|
|
260
|
-
"prompt": "{file:.opencode/agents/devops-specialist.md}",
|
|
261
|
-
"model": "opencode/claude-haiku-4.5",
|
|
262
|
-
"temperature": 0.3,
|
|
263
|
-
"color": "#6366f1",
|
|
264
|
-
"permission": {
|
|
265
|
-
"edit": "allow",
|
|
266
|
-
"bash": {
|
|
267
|
-
"*": "ask",
|
|
268
|
-
"npm *": "allow",
|
|
269
|
-
"pnpm *": "allow",
|
|
270
|
-
"bun *": "allow",
|
|
271
|
-
"yarn *": "allow",
|
|
272
|
-
"git status": "allow",
|
|
273
|
-
"git diff": "allow",
|
|
274
|
-
"git log*": "allow",
|
|
275
|
-
"docker *": "allow"
|
|
276
|
-
},
|
|
277
|
-
"webfetch": "allow",
|
|
278
|
-
"skill": {
|
|
279
|
-
"*": "allow"
|
|
280
|
-
},
|
|
281
|
-
"mcp": {}
|
|
282
|
-
}
|
|
283
|
-
},
|
|
284
|
-
"seo": {
|
|
285
|
-
"description": "SEO Specialist specializing in meta tags, structured data, Core Web Vitals, and content optimization (subagent of IT Leader)",
|
|
286
|
-
"mode": "subagent",
|
|
287
|
-
"prompt": "{file:.opencode/agents/seo-specialist.md}",
|
|
288
|
-
"model": "openai/gpt-5.1-codex-mini",
|
|
289
|
-
"temperature": 0.4,
|
|
290
|
-
"color": "#84cc16",
|
|
291
|
-
"permission": {
|
|
292
|
-
"edit": "allow",
|
|
293
|
-
"bash": {
|
|
294
|
-
"*": "ask",
|
|
295
|
-
"git status": "allow",
|
|
296
|
-
"git diff": "allow",
|
|
297
|
-
"git log*": "allow"
|
|
298
|
-
},
|
|
299
|
-
"webfetch": "allow",
|
|
300
|
-
"skill": {
|
|
301
|
-
"*": "allow"
|
|
302
|
-
},
|
|
303
|
-
"mcp": {
|
|
304
|
-
"nuxt": "allow"
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
}
|
|
309
|
-
}
|
|
@@ -1,285 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://opencode.ai/config.json",
|
|
3
|
-
"formatter": true,
|
|
4
|
-
"permission": {
|
|
5
|
-
"read": {
|
|
6
|
-
"*": "allow",
|
|
7
|
-
"*.env": "deny",
|
|
8
|
-
"*.env.*": "deny",
|
|
9
|
-
"*.env.example": "allow"
|
|
10
|
-
},
|
|
11
|
-
"edit": "allow",
|
|
12
|
-
"webfetch": "allow",
|
|
13
|
-
"skill": {
|
|
14
|
-
"*": "allow"
|
|
15
|
-
},
|
|
16
|
-
"todowrite": "allow",
|
|
17
|
-
"question": "allow",
|
|
18
|
-
"doom_loop": "ask",
|
|
19
|
-
"external_directory": "ask"
|
|
20
|
-
},
|
|
21
|
-
"instructions": [
|
|
22
|
-
".opencode/instructions/INSTRUCTIONS.md",
|
|
23
|
-
".opencode/skills/coding-standards/SKILL.md",
|
|
24
|
-
".opencode/skills/security-review/SKILL.md",
|
|
25
|
-
".opencode/skills/frontend-design/SKILL.md"
|
|
26
|
-
],
|
|
27
|
-
"agent": {
|
|
28
|
-
"leader": {
|
|
29
|
-
"description": "IT Leader & Technical Project Manager — analyzes requirements, designs architecture, decomposes tasks, delegates to subagents, and unifies outputs",
|
|
30
|
-
"mode": "primary",
|
|
31
|
-
"prompt": "{file:.opencode/agents/it-leader.md}",
|
|
32
|
-
"temperature": 0.4,
|
|
33
|
-
"color": "#8b5cf6",
|
|
34
|
-
"permission": {
|
|
35
|
-
"edit": "allow",
|
|
36
|
-
"webfetch": "allow",
|
|
37
|
-
"skill": { "*": "allow" },
|
|
38
|
-
"bash": {
|
|
39
|
-
"*": "ask",
|
|
40
|
-
"npm *": "allow",
|
|
41
|
-
"pnpm *": "allow",
|
|
42
|
-
"bun *": "allow",
|
|
43
|
-
"yarn *": "allow",
|
|
44
|
-
"npx playwright*": "allow"
|
|
45
|
-
},
|
|
46
|
-
"nuxt_*": "allow",
|
|
47
|
-
"nuxt-ui_*": "allow",
|
|
48
|
-
"figma_*": "ask",
|
|
49
|
-
"playwright_*": "allow",
|
|
50
|
-
"postman_*": "allow",
|
|
51
|
-
"task": { "*": "allow" }
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
"frontend-nuxt": {
|
|
55
|
-
"description": "Expert Vue/Nuxt frontend developer for Nuxt.js, Vue 3, Nuxt UI, and modern web technologies with MCP integration (subagent of IT Leader)",
|
|
56
|
-
"mode": "subagent",
|
|
57
|
-
"prompt": "{file:.opencode/agents/nuxt-frontend-developer.md}",
|
|
58
|
-
"color": "#3b82f6",
|
|
59
|
-
"permission": {
|
|
60
|
-
"edit": "allow",
|
|
61
|
-
"webfetch": "allow",
|
|
62
|
-
"skill": { "*": "allow" },
|
|
63
|
-
"bash": {
|
|
64
|
-
"*": "ask",
|
|
65
|
-
"npm *": "allow",
|
|
66
|
-
"pnpm *": "allow",
|
|
67
|
-
"bun *": "allow",
|
|
68
|
-
"yarn *": "allow",
|
|
69
|
-
"npx playwright*": "allow"
|
|
70
|
-
},
|
|
71
|
-
"nuxt_*": "allow",
|
|
72
|
-
"nuxt-ui_*": "allow",
|
|
73
|
-
"figma_*": "ask",
|
|
74
|
-
"playwright_*": "allow"
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
"frontend-react": {
|
|
78
|
-
"description": "Expert React/Next.js frontend developer for React 19, Next.js 15, Vite, shadcn/ui, and modern web technologies (subagent of IT Leader)",
|
|
79
|
-
"mode": "subagent",
|
|
80
|
-
"prompt": "{file:.opencode/agents/react-frontend-developer.md}",
|
|
81
|
-
"color": "#06b6d4",
|
|
82
|
-
"permission": {
|
|
83
|
-
"edit": "allow",
|
|
84
|
-
"webfetch": "allow",
|
|
85
|
-
"skill": { "*": "allow" },
|
|
86
|
-
"bash": {
|
|
87
|
-
"*": "ask",
|
|
88
|
-
"npm *": "allow",
|
|
89
|
-
"pnpm *": "allow",
|
|
90
|
-
"bun *": "allow",
|
|
91
|
-
"yarn *": "allow",
|
|
92
|
-
"npx playwright*": "allow"
|
|
93
|
-
},
|
|
94
|
-
"figma_*": "ask",
|
|
95
|
-
"playwright_*": "allow"
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
"backend": {
|
|
99
|
-
"description": "Expert backend developer for Node.js, Express, Prisma, and PostgreSQL (subagent of IT Leader)",
|
|
100
|
-
"mode": "subagent",
|
|
101
|
-
"prompt": "{file:.opencode/agents/node-backend-developer.md}",
|
|
102
|
-
"color": "#10b981",
|
|
103
|
-
"permission": {
|
|
104
|
-
"edit": "allow",
|
|
105
|
-
"webfetch": "allow",
|
|
106
|
-
"skill": { "*": "allow" },
|
|
107
|
-
"bash": {
|
|
108
|
-
"*": "ask",
|
|
109
|
-
"npm *": "allow",
|
|
110
|
-
"pnpm *": "allow",
|
|
111
|
-
"bun *": "allow",
|
|
112
|
-
"yarn *": "allow"
|
|
113
|
-
},
|
|
114
|
-
"postman_*": "allow"
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
|
-
"ci3": {
|
|
118
|
-
"description": "CodeIgniter 3 MVC fullstack developer for REST API, JWT, MySQL/PostgreSQL (subagent of IT Leader)",
|
|
119
|
-
"mode": "subagent",
|
|
120
|
-
"prompt": "{file:.opencode/agents/code-igniter-3-fullstack.md}",
|
|
121
|
-
"color": "#84cc16",
|
|
122
|
-
"permission": {
|
|
123
|
-
"edit": "allow",
|
|
124
|
-
"webfetch": "allow",
|
|
125
|
-
"skill": { "*": "allow" },
|
|
126
|
-
"bash": {
|
|
127
|
-
"*": "ask",
|
|
128
|
-
"git status": "allow",
|
|
129
|
-
"git diff": "allow",
|
|
130
|
-
"git log*": "allow"
|
|
131
|
-
},
|
|
132
|
-
"postman_*": "allow"
|
|
133
|
-
}
|
|
134
|
-
},
|
|
135
|
-
"laravel": {
|
|
136
|
-
"description": "Laravel backend engineer for REST API, Service/Repository, JWT, MySQL/PostgreSQL (subagent of IT Leader)",
|
|
137
|
-
"mode": "subagent",
|
|
138
|
-
"prompt": "{file:.opencode/agents/laravel-advanced.md}",
|
|
139
|
-
"color": "#f97316",
|
|
140
|
-
"permission": {
|
|
141
|
-
"edit": "allow",
|
|
142
|
-
"webfetch": "allow",
|
|
143
|
-
"skill": { "*": "allow" },
|
|
144
|
-
"bash": {
|
|
145
|
-
"*": "ask",
|
|
146
|
-
"git status": "allow",
|
|
147
|
-
"git diff": "allow",
|
|
148
|
-
"git log*": "allow"
|
|
149
|
-
},
|
|
150
|
-
"postman_*": "allow"
|
|
151
|
-
}
|
|
152
|
-
},
|
|
153
|
-
"designer": {
|
|
154
|
-
"description": "UI/UX Designer specializing in design systems, Google Stitch, Figma, accessibility, and design-to-code handoff (subagent of IT Leader)",
|
|
155
|
-
"mode": "subagent",
|
|
156
|
-
"prompt": "{file:.opencode/agents/ui-ux-designer.md}",
|
|
157
|
-
"color": "#f59e0b",
|
|
158
|
-
"permission": {
|
|
159
|
-
"edit": "allow",
|
|
160
|
-
"webfetch": "allow",
|
|
161
|
-
"skill": { "*": "allow" },
|
|
162
|
-
"bash": {
|
|
163
|
-
"*": "ask",
|
|
164
|
-
"git status": "allow",
|
|
165
|
-
"git diff": "allow",
|
|
166
|
-
"git log*": "allow"
|
|
167
|
-
},
|
|
168
|
-
"stitch_*": "allow",
|
|
169
|
-
"figma_*": "ask",
|
|
170
|
-
"nuxt-ui_*": "allow"
|
|
171
|
-
}
|
|
172
|
-
},
|
|
173
|
-
"reviewer": {
|
|
174
|
-
"description": "Code Reviewer & QA Engineer specializing in code quality, security audit, testing strategy, and verification (subagent of IT Leader)",
|
|
175
|
-
"mode": "subagent",
|
|
176
|
-
"prompt": "{file:.opencode/agents/code-reviewer.md}",
|
|
177
|
-
"color": "#ef4444",
|
|
178
|
-
"permission": {
|
|
179
|
-
"edit": "allow",
|
|
180
|
-
"webfetch": "allow",
|
|
181
|
-
"skill": { "*": "allow" },
|
|
182
|
-
"bash": {
|
|
183
|
-
"*": "ask",
|
|
184
|
-
"npm *": "allow",
|
|
185
|
-
"pnpm *": "allow",
|
|
186
|
-
"bun *": "allow",
|
|
187
|
-
"yarn *": "allow",
|
|
188
|
-
"npx playwright*": "allow"
|
|
189
|
-
},
|
|
190
|
-
"playwright_*": "allow"
|
|
191
|
-
}
|
|
192
|
-
},
|
|
193
|
-
"database": {
|
|
194
|
-
"description": "Database Specialist specializing in PostgreSQL schema design, query optimization, Prisma ORM, and migrations (subagent of IT Leader)",
|
|
195
|
-
"mode": "subagent",
|
|
196
|
-
"prompt": "{file:.opencode/agents/database-specialist.md}",
|
|
197
|
-
"color": "#06b6d4",
|
|
198
|
-
"permission": {
|
|
199
|
-
"edit": "allow",
|
|
200
|
-
"webfetch": "allow",
|
|
201
|
-
"skill": { "*": "allow" },
|
|
202
|
-
"bash": {
|
|
203
|
-
"*": "ask",
|
|
204
|
-
"npm *": "allow",
|
|
205
|
-
"pnpm *": "allow",
|
|
206
|
-
"bun *": "allow",
|
|
207
|
-
"yarn *": "allow"
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
},
|
|
211
|
-
"devops": {
|
|
212
|
-
"description": "DevOps Engineer specializing in CI/CD, deployment, Docker, monitoring, and infrastructure (subagent of IT Leader)",
|
|
213
|
-
"mode": "subagent",
|
|
214
|
-
"prompt": "{file:.opencode/agents/devops-specialist.md}",
|
|
215
|
-
"color": "#6366f1",
|
|
216
|
-
"permission": {
|
|
217
|
-
"edit": "allow",
|
|
218
|
-
"webfetch": "allow",
|
|
219
|
-
"skill": { "*": "allow" },
|
|
220
|
-
"bash": {
|
|
221
|
-
"*": "ask",
|
|
222
|
-
"npm *": "allow",
|
|
223
|
-
"pnpm *": "allow",
|
|
224
|
-
"bun *": "allow",
|
|
225
|
-
"yarn *": "allow",
|
|
226
|
-
"docker *": "allow"
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
},
|
|
230
|
-
"seo": {
|
|
231
|
-
"description": "SEO Specialist specializing in meta tags, structured data, Core Web Vitals, and content optimization (subagent of IT Leader)",
|
|
232
|
-
"mode": "subagent",
|
|
233
|
-
"prompt": "{file:.opencode/agents/seo-specialist.md}",
|
|
234
|
-
"color": "#84cc16",
|
|
235
|
-
"permission": {
|
|
236
|
-
"edit": "allow",
|
|
237
|
-
"webfetch": "allow",
|
|
238
|
-
"skill": { "*": "allow" },
|
|
239
|
-
"bash": {
|
|
240
|
-
"*": "ask",
|
|
241
|
-
"git status": "allow",
|
|
242
|
-
"git diff": "allow",
|
|
243
|
-
"git log*": "allow"
|
|
244
|
-
},
|
|
245
|
-
"nuxt_*": "allow"
|
|
246
|
-
}
|
|
247
|
-
},
|
|
248
|
-
"android": {
|
|
249
|
-
"description": "Expert Android developer for Kotlin, Jetpack Compose, XML, Material Design 3, and Google Play (subagent of IT Leader)",
|
|
250
|
-
"mode": "subagent",
|
|
251
|
-
"prompt": "{file:.opencode/agents/android-developer.md}",
|
|
252
|
-
"color": "#22c55e",
|
|
253
|
-
"permission": {
|
|
254
|
-
"edit": "allow",
|
|
255
|
-
"webfetch": "allow",
|
|
256
|
-
"skill": { "*": "allow" },
|
|
257
|
-
"bash": {
|
|
258
|
-
"*": "ask",
|
|
259
|
-
"./gradlew *": "allow",
|
|
260
|
-
"gradle *": "allow"
|
|
261
|
-
},
|
|
262
|
-
"figma_*": "ask",
|
|
263
|
-
"playwright_*": "allow"
|
|
264
|
-
}
|
|
265
|
-
},
|
|
266
|
-
"flutter": {
|
|
267
|
-
"description": "Expert Flutter developer for Dart, Flutter SDK, Material Design 3, Firebase, and cross-platform mobile apps (subagent of IT Leader)",
|
|
268
|
-
"mode": "subagent",
|
|
269
|
-
"prompt": "{file:.opencode/agents/flutter-developer.md}",
|
|
270
|
-
"color": "#0284c7",
|
|
271
|
-
"permission": {
|
|
272
|
-
"edit": "allow",
|
|
273
|
-
"webfetch": "allow",
|
|
274
|
-
"skill": { "*": "allow" },
|
|
275
|
-
"bash": {
|
|
276
|
-
"*": "ask",
|
|
277
|
-
"flutter *": "allow",
|
|
278
|
-
"dart *": "allow"
|
|
279
|
-
},
|
|
280
|
-
"figma_*": "ask",
|
|
281
|
-
"playwright_*": "allow"
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"min_session_length": 10,
|
|
3
|
-
"extraction_threshold": "medium",
|
|
4
|
-
"auto_approve": false,
|
|
5
|
-
"learned_skills_path": "~/.claude/skills/learned/",
|
|
6
|
-
"patterns_to_detect": [
|
|
7
|
-
"error_resolution",
|
|
8
|
-
"user_corrections",
|
|
9
|
-
"workarounds",
|
|
10
|
-
"debugging_techniques",
|
|
11
|
-
"project_specific"
|
|
12
|
-
],
|
|
13
|
-
"ignore_patterns": [
|
|
14
|
-
"simple_typos",
|
|
15
|
-
"one_time_fixes",
|
|
16
|
-
"external_api_issues"
|
|
17
|
-
]
|
|
18
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": "2.0",
|
|
3
|
-
"observation": {
|
|
4
|
-
"enabled": true,
|
|
5
|
-
"store_path": "~/.claude/homunculus/observations.jsonl",
|
|
6
|
-
"max_file_size_mb": 10,
|
|
7
|
-
"archive_after_days": 7,
|
|
8
|
-
"capture_tools": ["Edit", "Write", "Bash", "Read", "Grep", "Glob"],
|
|
9
|
-
"ignore_tools": ["TodoWrite"]
|
|
10
|
-
},
|
|
11
|
-
"instincts": {
|
|
12
|
-
"personal_path": "~/.claude/homunculus/instincts/personal/",
|
|
13
|
-
"inherited_path": "~/.claude/homunculus/instincts/inherited/",
|
|
14
|
-
"min_confidence": 0.3,
|
|
15
|
-
"auto_approve_threshold": 0.7,
|
|
16
|
-
"confidence_decay_rate": 0.02,
|
|
17
|
-
"max_instincts": 100
|
|
18
|
-
},
|
|
19
|
-
"observer": {
|
|
20
|
-
"enabled": false,
|
|
21
|
-
"model": "haiku",
|
|
22
|
-
"run_interval_minutes": 5,
|
|
23
|
-
"min_observations_to_analyze": 20,
|
|
24
|
-
"patterns_to_detect": [
|
|
25
|
-
"user_corrections",
|
|
26
|
-
"error_resolutions",
|
|
27
|
-
"repeated_workflows",
|
|
28
|
-
"tool_preferences",
|
|
29
|
-
"file_patterns"
|
|
30
|
-
]
|
|
31
|
-
},
|
|
32
|
-
"evolution": {
|
|
33
|
-
"cluster_threshold": 3,
|
|
34
|
-
"evolved_path": "~/.claude/homunculus/evolved/",
|
|
35
|
-
"auto_evolve": false
|
|
36
|
-
},
|
|
37
|
-
"integration": {
|
|
38
|
-
"skill_creator_api": "https://skill-creator.app/api",
|
|
39
|
-
"backward_compatible_v1": true
|
|
40
|
-
}
|
|
41
|
-
}
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: frontend-design
|
|
3
|
-
description: Create distinctive, production-grade frontend interfaces with high design quality. Automatically applies Impeccable design intelligence — typography, color, layout, motion, critique, and polish. Use this skill when the user asks to build, redesign, critique, audit, or polish web components, pages, or applications.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
This skill embeds **Impeccable** (impeccable.style) design intelligence. When doing frontend design work, automatically load the `impeccable` skill via the skill tool to access deep reference files for typography, color, motion, spatial design, interaction, responsive, UX writing, and all 23 design command references.
|
|
7
|
-
|
|
8
|
-
## Core Design Principles (Apply Automatically)
|
|
9
|
-
|
|
10
|
-
### Color
|
|
11
|
-
- Use OKLCH. Reduce chroma as lightness approaches 0 or 100.
|
|
12
|
-
- Never use `#000` or `#fff`. Tint every neutral toward the brand hue (chroma 0.005–0.01).
|
|
13
|
-
- Pick a **color strategy**: Restrained (tinted neutrals + ≤10% accent), Committed (one color carries 30–60%), Full palette (3–4 named roles), or Drenched (the surface IS the color).
|
|
14
|
-
- Name your instinctive first three palette choices; reject all three before committing.
|
|
15
|
-
|
|
16
|
-
### Typography
|
|
17
|
-
- Cap body line length at 65–75ch.
|
|
18
|
-
- ≥1.25 ratio between hierarchy steps. Avoid flat scales.
|
|
19
|
-
- Avoid overused fonts: Inter, Roboto, Arial, Fraunces, Geist, Plus Jakarta Sans, Space Grotesk, Recoleta, Instrument Sans.
|
|
20
|
-
- Prefer distinctive display fonts + refined body pairings.
|
|
21
|
-
|
|
22
|
-
### Layout
|
|
23
|
-
- Vary spacing for rhythm. Same padding everywhere is monotony.
|
|
24
|
-
- Cards are the lazy answer. Use only when they're truly the best affordance. Nested cards are always wrong.
|
|
25
|
-
- Don't wrap everything in a container. Most things don't need one.
|
|
26
|
-
|
|
27
|
-
### Motion
|
|
28
|
-
- Don't animate CSS layout properties.
|
|
29
|
-
- Ease out with exponential curves (ease-out-quart / quint / expo). No bounce, no elastic.
|
|
30
|
-
- 150ms for hover/focus, 300ms for toggles/reveals, 500ms for page transitions.
|
|
31
|
-
|
|
32
|
-
### Absolute Bans (AI Slop Prevention)
|
|
33
|
-
- **Side-stripe borders**: `border-left`/`right` >1px as colored accent — never intentional.
|
|
34
|
-
- **Gradient text**: `background-clip: text` with gradient — decorative, never meaningful.
|
|
35
|
-
- **Glassmorphism as default** — rare and purposeful, or nothing.
|
|
36
|
-
- **Hero-metric template**: big number, small label, supporting stats, gradient accent. SaaS cliché.
|
|
37
|
-
- **Identical card grids**: same-sized cards with icon + heading + text, endlessly.
|
|
38
|
-
- **Modal as first thought** — exhaust inline/progressive alternatives first.
|
|
39
|
-
- **Italic serif display heroes**: oversized italic serif as primary h1 (late-2025 AI fingerprint).
|
|
40
|
-
- **Hero eyebrow chips**: uppercase letter-spaced label sitting directly above h1.
|
|
41
|
-
|
|
42
|
-
### Copy
|
|
43
|
-
- Every word earns its place. No restated headings, no intros that repeat the title.
|
|
44
|
-
- **No em dashes**. Use commas, colons, semicolons, periods, or parentheses.
|
|
45
|
-
|
|
46
|
-
### Register Awareness
|
|
47
|
-
Every design task is either **brand** (marketing, landing, portfolio: design IS the product) or **product** (app UI, dashboard, tools: design SERVES the product). Identify before designing. Brand work needs bolder choices; product work needs clarity and efficiency.
|
|
48
|
-
|
|
49
|
-
## Design Thinking
|
|
50
|
-
|
|
51
|
-
Before coding, understand:
|
|
52
|
-
- **Purpose**: What problem does this interface solve? Who uses it?
|
|
53
|
-
- **Tone**: Pick a BOLD aesthetic direction (brutally minimal, maximalist chaos, retro-futuristic, editorial/magazine, etc.)
|
|
54
|
-
- **Constraints**: Technical requirements (framework, performance, accessibility)
|
|
55
|
-
- **Differentiation**: What makes this UNFORGETTABLE?
|
|
56
|
-
|
|
57
|
-
Then implement working code that is:
|
|
58
|
-
- Production-grade and functional
|
|
59
|
-
- Visually striking and memorable
|
|
60
|
-
- Cohesive with a clear aesthetic point-of-view
|
|
61
|
-
- Meticulously refined in every detail
|
|
62
|
-
|
|
63
|
-
## Aesthetics Guidelines
|
|
64
|
-
|
|
65
|
-
- **Typography**: Choose distinctive, unexpected fonts. Avoid AI-overused fonts.
|
|
66
|
-
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables in OKLCH.
|
|
67
|
-
- **Motion**: Purposeful animations, staggered reveals, scroll-triggering, surprising hover states.
|
|
68
|
-
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Grid-breaking. Generous whitespace.
|
|
69
|
-
- **Backgrounds**: Gradient meshes, noise textures, geometric patterns, layered transparencies.
|
|
70
|
-
|
|
71
|
-
Never converge on common choices across generations. Vary between light and dark themes, different fonts, different aesthetics.
|
|
72
|
-
|
|
73
|
-
## Loading Impeccable Reference Files
|
|
74
|
-
|
|
75
|
-
When the task involves any of these, load the corresponding reference via the `skill` tool:
|
|
76
|
-
|
|
77
|
-
| Task | Reference File |
|
|
78
|
-
|------|---------------|
|
|
79
|
-
| Typography fixes | `impeccable` skill (loads typography.md) |
|
|
80
|
-
| Color decisions | `impeccable` skill (loads color-and-contrast.md) |
|
|
81
|
-
| Motion/animation | `impeccable` skill (loads motion-design.md) |
|
|
82
|
-
| Layout/spacing | `impeccable` skill (loads spatial-design.md) |
|
|
83
|
-
| UX copy | `impeccable` skill (loads ux-writing.md) |
|
|
84
|
-
| Responsive | `impeccable` skill (loads responsive-design.md) |
|
|
85
|
-
| Interaction design | `impeccable` skill (loads interaction-design.md) |
|
|
86
|
-
| Full critique | `impeccable` skill (loads critique.md, personas.md, heuristics-scoring.md) |
|
|
87
|
-
| Production polish | `impeccable` skill (loads polish.md) |
|
|
88
|
-
| Brand work | `impeccable` skill (loads brand.md) |
|
|
89
|
-
| Product UI | `impeccable` skill (loads product.md) |
|