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 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, frontend-design, web-design-guidelines, nuxt-ui, tdd-workflow |
334
- | Frontend Developer (React) | coding-standards, frontend-patterns, frontend-design, web-design-guidelines, vercel-react-best-practices, vercel-composition-patterns, tdd-workflow |
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 | frontend-design, web-design-guidelines, building-components, nuxt-ui |
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/frontend-design ~/.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.17",
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. **`frontend-design`** — Design thinking and aesthetic implementation
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. **`frontend-design`** - Design thinking and aesthetic implementation
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, frontend-design)
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 `frontend-design` skill is pre-loaded with these principles.
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, frontend-design
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. **`frontend-design`** - Design thinking and aesthetic implementation
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, frontend-design)
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 `frontend-design` skill is pre-loaded with these principles.
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, frontend-design
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?
@@ -64,7 +64,7 @@
64
64
 
65
65
  - coding-standards
66
66
  - frontend-patterns
67
- - frontend-design
67
+ - impeccable
68
68
  - web-design-guidelines
69
69
 
70
70
  **On-Demand:**
@@ -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
- └── agent-docs/frontend/nuxt/ # Supporting documentation (this directory)
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
- frontend-design
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
- - **frontend-design** - Design thinking & aesthetics
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. **`frontend-design`**
77
- - Design thinking process
78
- - Aesthetic guidelines
79
- - Typography standards
80
- - Animation patterns
81
- - Creative implementation
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 `frontend-design`
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
- │ ✓ frontend-design ✓ web-design-guidelines │
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
- - ✅ frontend-design
199
+ - ✅ impeccable
200
200
  - ✅ web-design-guidelines
201
201
 
202
202
  **Contextual Skills (On-demand):**
@@ -68,7 +68,7 @@ ls ~/.agents/skills/ 2>/dev/null || echo "No additional skills"
68
68
  # Expected core skills:
69
69
  # - coding-standards
70
70
  # - frontend-patterns
71
- # - frontend-design
71
+ # - impeccable
72
72
  # - nuxt-ui
73
73
  # - web-design-guidelines
74
74
  ```
@@ -198,7 +198,7 @@ Identify:
198
198
  - Animation opportunities
199
199
  - Responsive breakpoints
200
200
 
201
- Load skill `frontend-design` untuk aesthetic analysis.
201
+ Load skill `impeccable` untuk design analysis.
202
202
  ```
203
203
 
204
204
  **Step 2: Setup Structure**
@@ -77,7 +77,7 @@
77
77
  |-------|-------------|
78
78
  | `coding-standards` | Universal coding standards |
79
79
  | `frontend-patterns` | React/Next.js patterns |
80
- | `frontend-design` | Design implementation |
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 | 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) |
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
- └── agent-docs/frontend/react/ # Supporting documentation (this directory)
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 | File | Stack |
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` | `nuxt-frontend-developer.md` | Nuxt 4, Vue 3, Nuxt UI, Tailwind CSS |
45
+ | `@frontend-nuxt` | `nuxt-frontend-developer.md` | Nuxt 4, Vue 3, Nuxt UI, Tailwind CSS |
@@ -15,7 +15,7 @@ Di OpenCode, ketik:
15
15
  Agent otomatis akan load skills yang dibutuhkan:
16
16
  - `coding-standards`
17
17
  - `frontend-patterns`
18
- - `frontend-design`
18
+ - `impeccable`
19
19
  - `web-design-guidelines`
20
20
 
21
21
  ## Mulai Development!
@@ -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. `frontend-design` — Design implementation
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
- - `frontend-design` — Design implementation
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: "Impeccable design intelligence: typography, color, layout, motion, interaction, responsive, UX writing, anti-pattern detection, and production polishing. Load this skill automatically when doing any frontend design work critique, audit, polish, typeset, layout, colorize, animate, or rebuild interfaces."
4
- user-invocable: false
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) |