opencode-agile-agent 1.0.1

package/templates/.opencode/skills/frontend-design/SKILL.md

@@ -0,0 +1,237 @@
+---
+name: frontend-design
+description: UI/UX patterns, component design, and frontend architecture best practices.
+version: 1.0.0
+---
+
+# Frontend Design
+
+Patterns and best practices for building maintainable frontend applications.
+
+## Component Design Principles
+
+### Single Responsibility
+
+```typescript
+// ❌ Does too much
+function UserDashboard() {
+  // Fetches data
+  // Renders charts
+  // Handles settings
+  // Manages notifications
+}
+
+// ✅ Focused components
+function UserDashboard() {
+  return (
+    <DashboardLayout>
+      <UserProfile />
+      <ActivityChart />
+      <SettingsPanel />
+      <NotificationList />
+    </DashboardLayout>
+  );
+}
+```
+
+### Component Composition
+
+```typescript
+// ❌ Prop drilling
+<Parent user={user} onUserChange={setUser} />
+
+// ✅ Composition
+<Card>
+  <CardHeader title="Profile" />
+  <CardSection>
+    <UserProfile />
+  </CardSection>
+  <CardFooter>
+    <EditButton />
+  </CardFooter>
+</Card>
+```
+
+### Controlled vs Uncontrolled
+
+```typescript
+// Controlled (parent manages state)
+function ControlledInput({ value, onChange }) {
+  return <input value={value} onChange={onChange} />;
+}
+
+// Uncontrolled (component manages state)
+function UncontrolledInput({ defaultValue, onChange }) {
+  const [value, setValue] = useState(defaultValue);
+  return <input value={value} onChange={e => setValue(e.target.value)} />;
+}
+```
+
+## State Management
+
+### Local State (Default)
+
+```typescript
+// Component-level state
+const [isOpen, setIsOpen] = useState(false);
+const [formData, setFormData] = useState({});
+```
+
+### Lift State Up
+
+```typescript
+// When multiple components need the same state
+function Parent() {
+  const [selected, setSelected] = useState(null);
+  return (
+    <>
+      <List items={items} selected={selected} onSelect={setSelected} />
+      <Details item={selected} />
+    </>
+  );
+}
+```
+
+### Global State (Zustand)
+
+```typescript
+const useStore = create((set) => ({
+  user: null,
+  setUser: (user) => set({ user }),
+  logout: () => set({ user: null }),
+}));
+```
+
+### Server State (React Query)
+
+```typescript
+const { data, isLoading, error } = useQuery({
+  queryKey: ['user', userId],
+  queryFn: () => fetchUser(userId),
+  staleTime: 5 * 60 * 1000,
+});
+```
+
+## Styling Patterns
+
+### Tailwind Best Practices
+
+```typescript
+// ❌ Inline everything
+<div className="flex flex-col items-center justify-center p-4 m-2 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
+
+// ✅ Extract variants with cva
+const cardVariants = cva("rounded-lg p-4", {
+  variants: {
+    variant: {
+      default: "bg-white shadow",
+      outlined: "border border-gray-200",
+      elevated: "bg-white shadow-lg"
+    }
+  }
+});
+
+<div className={cardVariants({ variant })}>
+```
+
+### Responsive Design
+
+```typescript
+// Mobile-first approach
+<div className="
+  p-4           // Mobile: padding
+  md:p-6        // Tablet: more padding
+  lg:p-8        // Desktop: even more
+  grid          
+  grid-cols-1   // Mobile: 1 column
+  md:grid-cols-2 // Tablet: 2 columns
+  lg:grid-cols-3 // Desktop: 3 columns
+">
+```
+
+## Performance Patterns
+
+### Code Splitting
+
+```typescript
+// Route-based splitting
+const Dashboard = lazy(() => import('./Dashboard'));
+const Settings = lazy(() => import('./Settings'));
+
+// Component-based splitting
+const HeavyChart = lazy(() => import('./HeavyChart'));
+```
+
+### Memoization
+
+```typescript
+// Only when needed (measure first!)
+const MemoizedList = memo(function List({ items }) {
+  return items.map(item => <Item key={item.id} {...item} />);
+});
+
+// Memoize callbacks
+const handleSubmit = useCallback((data) => {
+  submit(data);
+}, [submit]);
+
+// Memoize computations
+const sortedItems = useMemo(() => {
+  return [...items].sort(compareFn);
+}, [items]);
+```
+
+### Virtualization
+
+```typescript
+// For long lists
+import { FixedSizeList } from 'react-window';
+
+function VirtualList({ items }) {
+  return (
+    <FixedSizeList height={600} itemCount={items.length} itemSize={50}>
+      {({ index, style }) => (
+        <div style={style}>{items[index].name}</div>
+      )}
+    </FixedSizeList>
+  );
+}
+```
+
+## Accessibility
+
+### Semantic HTML
+
+```typescript
+// ❌ Divs everywhere
+<div onClick={handleClick}>Click me</div>
+
+// ✅ Semantic elements
+<button onClick={handleClick}>Click me</button>
+```
+
+### ARIA Labels
+
+```typescript
+<button aria-label="Close dialog" onClick={onClose}>
+  <XIcon />
+</button>
+
+<div role="alert" aria-live="polite">
+  {errorMessage}
+</div>
+```
+
+### Focus Management
+
+```typescript
+// Trap focus in modal
+const modalRef = useRef();
+useEffect(() => {
+  modalRef.current?.focus();
+}, []);
+```
+
+---
+
+**Good frontend design balances UX, DX, and performance.**

package/templates/.opencode/skills/intelligent-routing/SKILL.md

@@ -0,0 +1,195 @@
+---
+name: intelligent-routing
+description: Automatic agent detection and routing based on task keywords and context.
+version: 1.0.0
+---
+
+# Intelligent Routing
+
+Automatically detect which agent(s) should handle a task based on keywords and context.
+
+## How It Works
+
+1. **Analyze** the user request for keywords and patterns
+2. **Detect** relevant domains (frontend, backend, security, etc.)
+3. **Select** appropriate specialist agent(s)
+4. **Announce** which agent is being used
+5. **Execute** with specialist expertise
+
+## Keyword Detection Matrix
+
+### Frontend
+
+| Keywords | Agent |
+|----------|-------|
+| component, react, vue, angular, svelte | `frontend-specialist` |
+| css, style, tailwind, scss, styled | `frontend-specialist` |
+| ui, ux, design, layout, responsive | `frontend-specialist` |
+| page, route, navigation, menu | `frontend-specialist` |
+| form, input, button, modal | `frontend-specialist` |
+| state, redux, zustand, context | `frontend-specialist` |
+
+### Backend
+
+| Keywords | Agent |
+|----------|-------|
+| api, endpoint, route, rest, graphql | `backend-specialist` |
+| server, express, fastify, nestjs | `backend-specialist` |
+| authentication, auth, login, jwt | `backend-specialist` + `security-auditor` |
+| database, sql, prisma, sequelize | `database-architect` |
+| migration, schema, table, index | `database-architect` |
+
+### Security
+
+| Keywords | Agent |
+|----------|-------|
+| security, vulnerability, cve, owasp | `security-auditor` |
+| encrypt, decrypt, hash, password | `security-auditor` |
+| xss, sql injection, csrf | `security-auditor` |
+| penetration, pentest, exploit | `penetration-tester` |
+| audit, compliance, gdpr | `security-auditor` |
+
+### Testing
+
+| Keywords | Agent |
+|----------|-------|
+| test, jest, vitest, mocha | `test-engineer` |
+| e2e, playwright, cypress | `test-engineer` |
+| coverage, tdd, unit test | `test-engineer` |
+| qa, automation, pipeline | `qa-automation-engineer` |
+
+### DevOps
+
+| Keywords | Agent |
+|----------|-------|
+| deploy, deployment, release | `devops-engineer` |
+| docker, container, kubernetes | `devops-engineer` |
+| ci/cd, pipeline, github actions | `devops-engineer` |
+| infrastructure, terraform, aws | `devops-engineer` |
+
+### Performance
+
+| Keywords | Agent |
+|----------|-------|
+| performance, slow, optimize, fast | `performance-optimizer` |
+| bundle, size, lazy load | `performance-optimizer` |
+| lighthouse, core web vitals | `performance-optimizer` |
+
+### Debugging
+
+| Keywords | Agent |
+|----------|-------|
+| bug, error, fix, broken | `debugger` |
+| debug, crash, exception | `debugger` |
+| issue, problem, not working | `debugger` |
+
+### Planning
+
+| Keywords | Agent |
+|----------|-------|
+| plan, roadmap, milestone | `project-planner` |
+| feature, requirement, spec | `project-planner` |
+| architecture, design, decision | `project-planner` |
+| brainstorm, idea, explore | `project-planner` |
+
+### Mobile
+
+| Keywords | Agent |
+|----------|-------|
+| mobile, ios, android, app | `mobile-developer` |
+| react native, flutter, expo | `mobile-developer` |
+| app store, play store | `mobile-developer` |
+
+### SEO
+
+| Keywords | Agent |
+|----------|-------|
+| seo, search, ranking, google | `seo-specialist` |
+| meta, sitemap, robots | `seo-specialist` |
+| structured data, schema | `seo-specialist` |
+
+### Documentation
+
+| Keywords | Agent |
+|----------|-------|
+| documentation, docs, readme | `documentation-writer` |
+| api docs, reference, guide | `documentation-writer` |
+
+### Games
+
+| Keywords | Agent |
+|----------|-------|
+| game, unity, godot, unreal | `game-developer` |
+| gameplay, mechanics, level | `game-developer` |
+
+## Multi-Agent Detection
+
+When multiple domains are detected, combine agents:
+
+### Common Combinations
+
+| Request Pattern | Agents |
+|-----------------|--------|
+| "Build a secure API" | `backend-specialist` + `security-auditor` |
+| "Create a dashboard with database" | `frontend-specialist` + `database-architect` |
+| "Fix slow page with tests" | `performance-optimizer` + `test-engineer` |
+| "Deploy with monitoring" | `devops-engineer` + `performance-optimizer` |
+| "Mobile app with auth" | `mobile-developer` + `security-auditor` |
+
+## Detection Algorithm
+
+```typescript
+function detectAgents(request: string): Agent[] {
+  const agents: Agent[] = [];
+  const keywords = extractKeywords(request);
+  
+  // Check each domain
+  if (matchesAny(keywords, FRONTEND_KEYWORDS)) {
+    agents.push('frontend-specialist');
+  }
+  
+  if (matchesAny(keywords, BACKEND_KEYWORDS)) {
+    agents.push('backend-specialist');
+  }
+  
+  if (matchesAny(keywords, SECURITY_KEYWORDS)) {
+    agents.push('security-auditor');
+  }
+  
+  // ... more domains
+  
+  // Default to orchestrator if no specific match
+  if (agents.length === 0) {
+    agents.push('orchestrator');
+  }
+  
+  return agents;
+}
+```
+
+## Announcement Pattern
+
+When routing to an agent, announce the selection:
+
+```
+🤖 Applying @frontend-specialist + @backend-specialist...
+```
+
+## Context Passing
+
+When invoking agents, pass full context:
+
+```typescript
+invokeAgent('backend-specialist', {
+  task: 'Create authentication API',
+  context: {
+    userRequest: originalRequest,
+    previousFindings: explorerResults,
+    constraints: userPreferences
+  }
+});
+```
+
+---
+
+**Intelligent routing ensures users get specialist help without needing to know the agent system.**

package/templates/.opencode/skills/parallel-agents/SKILL.md

@@ -0,0 +1,274 @@
+---
+name: parallel-agents
+description: Multi-agent coordination patterns and best practices for parallel execution.
+version: 1.0.0
+---
+
+# Parallel Agents
+
+Patterns and best practices for coordinating multiple agents in parallel.
+
+## When to Use Parallel Agents
+
+###  Good Candidates
+
+- Independent tasks (frontend + backend)
+- Multiple file types (code + tests + docs)
+- Multiple perspectives (security + performance)
+- Large codebase analysis
+- Comprehensive reviews
+
+###  Poor Candidates
+
+- Sequential dependencies (API → Frontend)
+- Shared mutable state
+- Conflicting file modifications
+- Tasks requiring full context from previous step
+
+## Parallel Execution Patterns
+
+### Pattern 1: Domain Split
+
+```
+Task: "Build user management feature"
+
+┌─────────────────────────────────────┐
+│         Orchestrator                 │
+└──────────────┬──────────────────────┘
+               │
+       ┌───────┴───────┐
+       │               │
+       ▼               ▼
+┌─────────────┐ ┌─────────────┐
+│  Frontend   │ │   Backend   │
+│ Specialist  │ │ Specialist  │
+│             │ │             │
+│ Components  │ │   APIs      │
+│ Pages       │ │   Services  │
+│ State       │ │   Database  │
+└─────────────┘ └─────────────┘
+```
+
+### Pattern 2: Multi-Perspective Review
+
+```
+Task: "Review authentication system"
+
+┌─────────────────────────────────────┐
+│         Orchestrator                 │
+└──────────────┬──────────────────────┘
+               │
+   ┌───────────┼───────────┐
+   │           │           │
+   ▼           ▼           ▼
+┌───────┐ ┌───────┐ ┌───────┐
+│Security│ │Backend│ │ Test  │
+│Auditor │ │Special│ │Engine │
+└───────┘ └───────┘ └───────┘
+   │           │           │
+   └───────────┼───────────┘
+               ▼
+         Synthesis Report
+```
+
+### Pattern 3: File Type Distribution
+
+```
+Task: "Implement feature with tests"
+
+┌─────────────────────────────────────┐
+│         Orchestrator                 │
+└──────────────┬──────────────────────┘
+               │
+       ┌───────┴───────┐
+       │               │
+       ▼               ▼
+┌─────────────┐ ┌─────────────┐
+│  Developer  │ │    Test     │
+│  (Code)     │ │  Engineer   │
+│             │ │  (Tests)    │
+└─────────────┘ └─────────────┘
+```
+
+## Agent Groups
+
+### Foundation Group
+
+For establishing core infrastructure:
+
+| Agent | Responsibility |
+|-------|----------------|
+| `database-architect` | Schema, migrations |
+| `security-auditor` | Security baseline |
+| `devops-engineer` | CI/CD setup |
+
+### Core Development Group
+
+For building features:
+
+| Agent | Responsibility |
+|-------|----------------|
+| `frontend-specialist` | UI components |
+| `backend-specialist` | APIs, services |
+| `database-architect` | Data layer |
+
+### Quality Group
+
+For ensuring quality:
+
+| Agent | Responsibility |
+|-------|----------------|
+| `test-engineer` | Test coverage |
+| `security-auditor` | Security check |
+| `performance-optimizer` | Performance audit |
+
+### Documentation Group
+
+For documentation:
+
+| Agent | Responsibility |
+|-------|----------------|
+| `documentation-writer` | Docs |
+| `api-designer` | API docs |
+| `seo-specialist` | Meta, sitemap |
+
+## Coordination Protocol
+
+### Step 1: Task Decomposition
+
+```markdown
+Original: "Build user dashboard"
+
+Decomposed:
+1. [Frontend] Dashboard UI components
+2. [Backend] Dashboard API endpoints
+3. [Database] Dashboard data queries
+4. [Test] Dashboard E2E tests
+```
+
+### Step 2: Agent Assignment
+
+```markdown
+Assignments:
+- frontend-specialist → Dashboard components
+- backend-specialist → API endpoints
+- database-architect → Queries
+- test-engineer → E2E tests
+```
+
+### Step 3: Dependency Analysis
+
+```markdown
+Dependencies:
+- Backend API depends on Database queries
+- Frontend depends on Backend API
+- Tests depend on Frontend + Backend
+
+Execution Order:
+1. Database (independent)
+2. Backend (depends on 1)
+3. Frontend (depends on 2)
+4. Tests (depends on 3)
+```
+
+### Step 4: Parallel Execution
+
+```markdown
+Wave 1: database-architect (parallel with nothing)
+Wave 2: backend-specialist (after Wave 1)
+Wave 3: frontend-specialist (parallel with Wave 2)
+Wave 4: test-engineer (after Waves 2, 3)
+```
+
+## Context Sharing
+
+### Shared Context Object
+
+```typescript
+interface SharedContext {
+  // Original request
+  userRequest: string;
+  
+  // Decisions made
+  decisions: Decision[];
+  
+  // Work completed
+  completedWork: WorkItem[];
+  
+  // Files created/modified
+  files: FileInfo[];
+  
+  // Open questions
+  openQuestions: Question[];
+}
+```
+
+### Context Passing
+
+```typescript
+// Pass context to each agent
+invokeAgent('frontend-specialist', {
+  task: 'Build dashboard UI',
+  context: sharedContext
+});
+
+invokeAgent('backend-specialist', {
+  task: 'Build dashboard API',
+  context: sharedContext
+});
+```
+
+## Conflict Resolution
+
+### File Conflicts
+
+```
+If multiple agents modify the same file:
+1. Detect conflict
+2. Merge changes if possible
+3. Flag for human review if conflict
+```
+
+### API Contract Conflicts
+
+```
+If frontend and backend disagree on API:
+1. Use API designer as mediator
+2. Document contract
+3. Both agents follow contract
+```
+
+## Synthesis Report
+
+After parallel execution, synthesize results:
+
+```markdown
+## Orchestration Report
+
+### Agents Invoked
+| Agent | Status | Files Modified |
+|-------|--------|----------------|
+| frontend-specialist | ✅ Complete | 5 files |
+| backend-specialist | ✅ Complete | 3 files |
+| test-engineer | ✅ Complete | 2 files |
+
+### Combined Findings
+- [Finding from Agent 1]
+- [Finding from Agent 2]
+- [Finding from Agent 3]
+
+### Integration Notes
+- [How agents' work integrates]
+
+### Recommendations
+1. [Combined recommendation]
+2. [Combined recommendation]
+
+### Next Steps
+- [ ] [Action item]
+- [ ] [Action item]
+```
+
+---
+
+**Parallel agents multiply productivity when tasks are independent.**