chore: install openagent opencode
Signed-off-by: Dmytro Stanchiev <git@dmytros.dev>
This commit is contained in:
42
.opencode/context/development/frontend/navigation.md
Normal file
42
.opencode/context/development/frontend/navigation.md
Normal file
@@ -0,0 +1,42 @@
|
||||
<!-- Context: development/navigation | Priority: critical | Version: 1.0 | Updated: 2026-02-15 -->
|
||||
|
||||
# Frontend Development Navigation
|
||||
|
||||
**Purpose**: Client-side development patterns
|
||||
|
||||
---
|
||||
|
||||
## Structure
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── navigation.md
|
||||
├── when-to-delegate.md
|
||||
└── react/
|
||||
├── navigation.md
|
||||
└── react-patterns.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick Routes
|
||||
|
||||
| Task | Path |
|
||||
|------|------|
|
||||
| **When to delegate** | `when-to-delegate.md` |
|
||||
| **React patterns** | `react/react-patterns.md` |
|
||||
| **React navigation** | `react/navigation.md` |
|
||||
|
||||
---
|
||||
|
||||
## By Framework
|
||||
|
||||
**React** → `react/` - Modern React patterns, hooks, component design
|
||||
|
||||
---
|
||||
|
||||
## Related Context
|
||||
|
||||
- **UI Navigation** → `../ui-navigation.md`
|
||||
- **Visual Design** → `../../ui/web/navigation.md`
|
||||
- **Core Standards** → `../../core/standards/code-quality.md`
|
||||
468
.opencode/context/development/frontend/when-to-delegate.md
Normal file
468
.opencode/context/development/frontend/when-to-delegate.md
Normal file
@@ -0,0 +1,468 @@
|
||||
<!-- Context: development/frontend/when-to-delegate | Priority: high | Version: 1.0 | Updated: 2026-01-30 -->
|
||||
# When to Delegate to Frontend Specialist
|
||||
|
||||
## Overview
|
||||
|
||||
Clear decision criteria for when to delegate frontend/UI work to the **frontend-specialist** subagent vs. handling it directly.
|
||||
|
||||
## Quick Reference
|
||||
|
||||
**Delegate to frontend-specialist when**:
|
||||
- UI/UX design work (wireframes, themes, animations)
|
||||
- Design system implementation
|
||||
- Complex responsive layouts
|
||||
- Animation and micro-interactions
|
||||
- Visual design iterations
|
||||
|
||||
**Handle directly when**:
|
||||
- Simple HTML/CSS edits
|
||||
- Single component updates
|
||||
- Bug fixes in existing UI
|
||||
- Minor styling tweaks
|
||||
|
||||
---
|
||||
|
||||
## Decision Matrix
|
||||
|
||||
### ✅ DELEGATE to Frontend-Specialist
|
||||
|
||||
| Scenario | Why Delegate | Example |
|
||||
|----------|--------------|---------|
|
||||
| **New UI design from scratch** | Needs staged workflow (layout → theme → animation → implement) | "Create a landing page for our product" |
|
||||
| **Design system work** | Requires ContextScout for standards, ExternalScout for UI libs | "Implement our design system with Tailwind + Shadcn" |
|
||||
| **Complex responsive layouts** | Needs mobile-first approach across breakpoints | "Build a dashboard with sidebar, cards, and responsive grid" |
|
||||
| **Animation implementation** | Requires animation patterns, performance optimization | "Add smooth transitions and micro-interactions to the UI" |
|
||||
| **Multi-stage design iterations** | Needs versioning (design_iterations/ folder) | "Design a checkout flow with 3 steps" |
|
||||
| **Theme creation** | Requires OKLCH colors, CSS custom properties | "Create a dark mode theme for the app" |
|
||||
| **Component library integration** | Needs ExternalScout for current docs (Flowbite, Radix, etc.) | "Integrate Flowbite components into our app" |
|
||||
| **Accessibility-focused UI** | Requires WCAG compliance, ARIA attributes | "Build an accessible form with proper labels and validation" |
|
||||
|
||||
### ⚠️ HANDLE DIRECTLY (Don't Delegate)
|
||||
|
||||
| Scenario | Why Direct | Example |
|
||||
|----------|------------|---------|
|
||||
| **Simple HTML edits** | Single file, straightforward change | "Change the button text from 'Submit' to 'Send'" |
|
||||
| **Minor CSS tweaks** | Small styling adjustment | "Make the header padding 20px instead of 16px" |
|
||||
| **Bug fixes** | Fixing existing code, not creating new design | "Fix the broken link in the footer" |
|
||||
| **Content updates** | Changing text, images, or data | "Update the hero section copy" |
|
||||
| **Single component updates** | Modifying one existing component | "Add a new prop to the Button component" |
|
||||
| **Quick prototypes** | Throwaway code for testing | "Create a quick HTML mockup to test an idea" |
|
||||
|
||||
---
|
||||
|
||||
## Delegation Checklist
|
||||
|
||||
Before delegating to frontend-specialist, ensure:
|
||||
|
||||
- [ ] **Task is UI/design focused** (not backend, logic, or data)
|
||||
- [ ] **Task requires design expertise** (layout, theme, animations)
|
||||
- [ ] **Task benefits from staged workflow** (layout → theme → animation → implement)
|
||||
- [ ] **Task needs context discovery** (design systems, UI libraries, standards)
|
||||
- [ ] **User has approved the approach** (never delegate before approval)
|
||||
|
||||
---
|
||||
|
||||
## How to Delegate
|
||||
|
||||
### Step 1: Discover Context (Optional but Recommended)
|
||||
|
||||
If you're unsure what context the frontend-specialist will need:
|
||||
|
||||
```javascript
|
||||
task(
|
||||
subagent_type="ContextScout",
|
||||
description="Find frontend design context",
|
||||
prompt="Find design system standards, UI component patterns, animation guidelines, and responsive breakpoint conventions for frontend work."
|
||||
)
|
||||
```
|
||||
|
||||
### Step 2: Propose Approach
|
||||
|
||||
Present a plan to the user:
|
||||
|
||||
```markdown
|
||||
## Implementation Plan
|
||||
|
||||
**Task**: Create landing page with hero section, features grid, and CTA
|
||||
|
||||
**Approach**: Delegate to frontend-specialist subagent
|
||||
|
||||
**Why**:
|
||||
- Requires design system implementation
|
||||
- Needs responsive layout across breakpoints
|
||||
- Includes animations and micro-interactions
|
||||
- Benefits from staged workflow (layout → theme → animation → implement)
|
||||
|
||||
**Context Needed**:
|
||||
- Design system standards (ui/web/design-systems.md)
|
||||
- UI styling standards (ui/web/ui-styling-standards.md)
|
||||
- Animation patterns (ui/web/animation-patterns.md)
|
||||
|
||||
**Approval needed before proceeding.**
|
||||
```
|
||||
|
||||
### Step 3: Get Approval
|
||||
|
||||
Wait for explicit user approval before delegating.
|
||||
|
||||
### Step 4: Delegate with Context
|
||||
|
||||
**For simple delegation** (no session needed):
|
||||
|
||||
```javascript
|
||||
task(
|
||||
subagent_type="frontend-specialist",
|
||||
description="Create landing page design",
|
||||
prompt="Context to load:
|
||||
- .opencode/context/ui/web/design-systems.md
|
||||
- .opencode/context/ui/web/ui-styling-standards.md
|
||||
- .opencode/context/ui/web/animation-basics.md
|
||||
|
||||
Task: Create a landing page with:
|
||||
- Hero section with headline, subheadline, CTA button
|
||||
- Features grid (3 columns on desktop, 1 on mobile)
|
||||
- Smooth scroll animations
|
||||
|
||||
Requirements:
|
||||
- Use Tailwind CSS + Flowbite
|
||||
- Mobile-first responsive design
|
||||
- Animations <400ms
|
||||
- Save to design_iterations/landing_1.html
|
||||
|
||||
Follow your staged workflow:
|
||||
1. Layout (ASCII wireframe)
|
||||
2. Theme (CSS theme file)
|
||||
3. Animation (micro-interactions)
|
||||
4. Implement (HTML file)
|
||||
|
||||
Request approval between each stage."
|
||||
)
|
||||
```
|
||||
|
||||
**For complex delegation** (with session):
|
||||
|
||||
Create session context file first, then delegate with session path.
|
||||
|
||||
---
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Pattern 1: New Landing Page
|
||||
|
||||
**Trigger**: User asks for a new landing page, marketing page, or product page
|
||||
|
||||
**Decision**: ✅ Delegate to frontend-specialist
|
||||
|
||||
**Why**: Requires full design workflow (layout, theme, animations, implementation)
|
||||
|
||||
**Example**:
|
||||
```
|
||||
User: "Create a landing page for our SaaS product"
|
||||
You: [Propose approach] → [Get approval] → [Delegate to frontend-specialist]
|
||||
```
|
||||
|
||||
### Pattern 2: Design System Implementation
|
||||
|
||||
**Trigger**: User wants to implement or update a design system
|
||||
|
||||
**Decision**: ✅ Delegate to frontend-specialist
|
||||
|
||||
**Why**: Needs ContextScout for standards, ExternalScout for UI library docs
|
||||
|
||||
**Example**:
|
||||
```
|
||||
User: "Implement our design system using Tailwind and Shadcn"
|
||||
You: [Propose approach] → [Get approval] → [Delegate to frontend-specialist]
|
||||
```
|
||||
|
||||
### Pattern 3: Component Library Integration
|
||||
|
||||
**Trigger**: User wants to integrate a UI component library (Flowbite, Radix, etc.)
|
||||
|
||||
**Decision**: ✅ Delegate to frontend-specialist
|
||||
|
||||
**Why**: Requires ExternalScout for current docs, proper integration patterns
|
||||
|
||||
**Example**:
|
||||
```
|
||||
User: "Add Flowbite components to our app"
|
||||
You: [Propose approach] → [Get approval] → [Delegate to frontend-specialist]
|
||||
```
|
||||
|
||||
### Pattern 4: Animation Work
|
||||
|
||||
**Trigger**: User wants animations, transitions, or micro-interactions
|
||||
|
||||
**Decision**: ✅ Delegate to frontend-specialist
|
||||
|
||||
**Why**: Requires animation patterns, performance optimization (<400ms)
|
||||
|
||||
**Example**:
|
||||
```
|
||||
User: "Add smooth animations to the dashboard"
|
||||
You: [Propose approach] → [Get approval] → [Delegate to frontend-specialist]
|
||||
```
|
||||
|
||||
### Pattern 5: Simple HTML Edit
|
||||
|
||||
**Trigger**: User wants to change text, fix a link, or update content
|
||||
|
||||
**Decision**: ⚠️ Handle directly (don't delegate)
|
||||
|
||||
**Why**: Simple edit, no design work needed
|
||||
|
||||
**Example**:
|
||||
```
|
||||
User: "Change the button text to 'Get Started'"
|
||||
You: [Edit the HTML file directly]
|
||||
```
|
||||
|
||||
### Pattern 6: CSS Bug Fix
|
||||
|
||||
**Trigger**: User reports a styling bug or broken layout
|
||||
|
||||
**Decision**: ⚠️ Handle directly (don't delegate)
|
||||
|
||||
**Why**: Bug fix, not new design work
|
||||
|
||||
**Example**:
|
||||
```
|
||||
User: "The header is overlapping the content on mobile"
|
||||
You: [Read the CSS, fix the issue directly]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Red Flags (Don't Delegate)
|
||||
|
||||
❌ **User just wants a quick fix** → Handle directly
|
||||
❌ **Task is backend/logic focused** → Wrong subagent (use coder-agent or handle directly)
|
||||
❌ **Task is a single line change** → Handle directly
|
||||
❌ **Task is content update** → Handle directly
|
||||
❌ **Task is testing/validation** → Wrong subagent (use tester)
|
||||
❌ **Task is code review** → Wrong subagent (use reviewer)
|
||||
|
||||
---
|
||||
|
||||
## Green Flags (Delegate)
|
||||
|
||||
✅ **User wants a new UI design** → Delegate
|
||||
✅ **Task involves design systems** → Delegate
|
||||
✅ **Task requires responsive layouts** → Delegate
|
||||
✅ **Task includes animations** → Delegate
|
||||
✅ **Task needs UI library integration** → Delegate
|
||||
✅ **Task benefits from staged workflow** → Delegate
|
||||
✅ **Task requires design expertise** → Delegate
|
||||
|
||||
---
|
||||
|
||||
## Frontend-Specialist Capabilities
|
||||
|
||||
**What it does well**:
|
||||
- Create complete UI designs from scratch
|
||||
- Implement design systems (Tailwind, Shadcn, Flowbite)
|
||||
- Build responsive layouts (mobile-first)
|
||||
- Add animations and micro-interactions
|
||||
- Integrate UI component libraries
|
||||
- Create themes with OKLCH colors
|
||||
- Follow staged workflow (layout → theme → animation → implement)
|
||||
- Version designs (design_iterations/ folder)
|
||||
|
||||
**What it doesn't do**:
|
||||
- Backend logic or API integration
|
||||
- Database queries or data processing
|
||||
- Testing or validation
|
||||
- Code review or refactoring
|
||||
- Simple HTML/CSS edits (overkill)
|
||||
- Content updates (just text changes)
|
||||
|
||||
---
|
||||
|
||||
## Context Files Frontend-Specialist Uses
|
||||
|
||||
The frontend-specialist will automatically load these via ContextScout:
|
||||
|
||||
**Design System**:
|
||||
- `ui/web/design-systems.md` - Theme templates, color systems
|
||||
- `ui/web/ui-styling-standards.md` - Tailwind, Flowbite, responsive design
|
||||
- `ui/web/design-assets.md` - Images, icons, fonts
|
||||
|
||||
**Patterns**:
|
||||
- `ui/web/animation-patterns.md` - Animation syntax, micro-interactions
|
||||
- `development/frontend/react/react-patterns.md` - React patterns (if React project)
|
||||
|
||||
**Workflows**:
|
||||
- `core/workflows/design-iteration-overview.md` - Design iteration workflow
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Do's ✅
|
||||
|
||||
- ✅ **Propose before delegating** - Show user the plan first
|
||||
- ✅ **Get approval** - Never delegate without user approval
|
||||
- ✅ **Provide context** - List context files the subagent should load
|
||||
- ✅ **Set clear requirements** - Specify design system, breakpoints, animations
|
||||
- ✅ **Use staged workflow** - Let frontend-specialist follow its process
|
||||
- ✅ **Trust the specialist** - It knows design patterns and best practices
|
||||
|
||||
### Don'ts ❌
|
||||
|
||||
- ❌ **Don't delegate simple edits** - Handle directly for efficiency
|
||||
- ❌ **Don't skip approval** - Always get user sign-off first
|
||||
- ❌ **Don't delegate backend work** - Wrong subagent
|
||||
- ❌ **Don't micromanage** - Let the specialist follow its workflow
|
||||
- ❌ **Don't delegate without context** - Provide context files to load
|
||||
- ❌ **Don't delegate bug fixes** - Handle directly unless it's a design issue
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Landing Page (Delegate)
|
||||
|
||||
**User Request**: "Create a landing page for our SaaS product with a hero section, features, and pricing"
|
||||
|
||||
**Your Response**:
|
||||
```markdown
|
||||
## Implementation Plan
|
||||
|
||||
**Task**: Create SaaS landing page
|
||||
|
||||
**Approach**: Delegate to frontend-specialist subagent
|
||||
|
||||
**Why**:
|
||||
- Requires full design workflow (layout, theme, animations)
|
||||
- Needs responsive design across breakpoints
|
||||
- Benefits from design system standards
|
||||
|
||||
**Context Needed**:
|
||||
- Design system standards
|
||||
- UI styling standards
|
||||
- Animation patterns
|
||||
|
||||
**Approval needed before proceeding.**
|
||||
```
|
||||
|
||||
**After Approval**:
|
||||
```javascript
|
||||
task(
|
||||
subagent_type="frontend-specialist",
|
||||
description="Create SaaS landing page",
|
||||
prompt="Context to load:
|
||||
- .opencode/context/ui/web/design-systems.md
|
||||
- .opencode/context/ui/web/ui-styling-standards.md
|
||||
- .opencode/context/ui/web/animation-basics.md
|
||||
|
||||
Task: Create a SaaS landing page with:
|
||||
- Hero section (headline, subheadline, CTA)
|
||||
- Features section (3-column grid)
|
||||
- Pricing section (3 tiers)
|
||||
- Footer
|
||||
|
||||
Requirements:
|
||||
- Tailwind CSS + Flowbite
|
||||
- Mobile-first responsive
|
||||
- Smooth scroll animations
|
||||
- Modern design system
|
||||
|
||||
Follow staged workflow and request approval between stages."
|
||||
)
|
||||
```
|
||||
|
||||
### Example 2: Button Text Change (Direct)
|
||||
|
||||
**User Request**: "Change the 'Submit' button to say 'Send Message'"
|
||||
|
||||
**Your Response**:
|
||||
```markdown
|
||||
I'll update the button text directly.
|
||||
```
|
||||
|
||||
**Action**: Read the HTML file, edit the button text, done. No delegation needed.
|
||||
|
||||
---
|
||||
|
||||
### Example 3: Design System Implementation (Delegate)
|
||||
|
||||
**User Request**: "Implement our design system using Tailwind and Shadcn components"
|
||||
|
||||
**Your Response**:
|
||||
```markdown
|
||||
## Implementation Plan
|
||||
|
||||
**Task**: Implement design system with Tailwind + Shadcn
|
||||
|
||||
**Approach**: Delegate to frontend-specialist subagent
|
||||
|
||||
**Why**:
|
||||
- Requires UI library integration (Shadcn)
|
||||
- Needs ExternalScout for current Shadcn docs
|
||||
- Benefits from design system standards
|
||||
|
||||
**Context Needed**:
|
||||
- Design system standards
|
||||
- UI styling standards
|
||||
- External docs (Shadcn)
|
||||
|
||||
**Approval needed before proceeding.**
|
||||
```
|
||||
|
||||
**After Approval**:
|
||||
```javascript
|
||||
task(
|
||||
subagent_type="frontend-specialist",
|
||||
description="Implement Tailwind + Shadcn design system",
|
||||
prompt="Context to load:
|
||||
- .opencode/context/ui/web/design-systems.md
|
||||
- .opencode/context/ui/web/ui-styling-standards.md
|
||||
|
||||
Task: Implement design system using Tailwind CSS and Shadcn/ui
|
||||
|
||||
Requirements:
|
||||
- Call ExternalScout for current Shadcn docs
|
||||
- Set up Tailwind config
|
||||
- Integrate Shadcn components
|
||||
- Create theme file with OKLCH colors
|
||||
- Document component usage
|
||||
|
||||
Follow staged workflow and request approval between stages."
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
**Delegate to frontend-specialist when**:
|
||||
- New UI designs from scratch
|
||||
- Design system implementation
|
||||
- Complex responsive layouts
|
||||
- Animation work
|
||||
- UI library integration
|
||||
- Multi-stage design iterations
|
||||
|
||||
**Handle directly when**:
|
||||
- Simple HTML/CSS edits
|
||||
- Bug fixes
|
||||
- Content updates
|
||||
- Single component updates
|
||||
- Quick prototypes
|
||||
|
||||
**Always**:
|
||||
- Propose approach first
|
||||
- Get user approval
|
||||
- Provide context files
|
||||
- Trust the specialist's workflow
|
||||
|
||||
---
|
||||
|
||||
## Related Context
|
||||
|
||||
- **Frontend Specialist Agent** → `../../../agent/subagents/development/frontend-specialist.md`
|
||||
- **Design Systems** → `../../ui/web/design-systems.md`
|
||||
- **UI Styling Standards** → `../../ui/web/ui-styling-standards.md`
|
||||
- **Animation Patterns** → `../../ui/web/animation-patterns.md`
|
||||
- **Delegation Workflow** → `../../core/workflows/task-delegation-basics.md`
|
||||
- **React Patterns** → `react/react-patterns.md`
|
||||
Reference in New Issue
Block a user