opencode-agile-agent 1.0.1 → 1.0.2

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

@@ -1,237 +1,39 @@
 ---
 name: frontend-design
-description: UI/UX patterns, component design, and frontend architecture best practices.
-version: 1.0.0
+description: Shape responsive, accessible, intentional UI with strong hierarchy and sensible performance.
 ---
 
 # Frontend Design
 
-Patterns and best practices for building maintainable frontend applications.
+## Philosophy
+Interface design should clarify the task, not just decorate it.
 
-## Component Design Principles
+## Use When
+- You are building UI, layout, components, or responsive behavior.
+- The screen needs better hierarchy, state handling, or accessibility.
+- You want a design direction that feels intentional instead of generic.
 
-### Single Responsibility
+## Core Moves
+- Give each screen one clear job.
+- Compose smaller parts instead of building one giant component.
+- Design mobile-first and scale up.
+- Use semantic, accessible markup for interactive content.
+- Treat loading, empty, error, and success states as first-class UI.
 
-```typescript
-// ❌ Does too much
-function UserDashboard() {
-  // Fetches data
-  // Renders charts
-  // Handles settings
-  // Manages notifications
-}
+## Default Moves
+- Start with legible hierarchy and strong spacing.
+- Use design tokens or shared styles instead of one-off values.
+- Measure motion and performance; do not animate for decoration alone.
 
-// ✅ Focused components
-function UserDashboard() {
-  return (
-    <DashboardLayout>
-      <UserProfile />
-      <ActivityChart />
-      <SettingsPanel />
-      <NotificationList />
-    </DashboardLayout>
-  );
-}
-```
+## Anti-Patterns
+- Giant components, prop drilling as a default, div soup, hidden states, and over-animated UIs.
 
-### Component Composition
+## Variation
+- Be bolder for marketing, quieter for admin tools, denser for dashboards.
+- Use more motion only when it clarifies or delights the user.
 
-```typescript
-// ❌ Prop drilling
-<Parent user={user} onUserChange={setUser} />
+## Output
+- Return the structure, states, accessibility notes, and the visual direction.
 
-// ✅ 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.**
+## Remember
+The best UI makes the next click obvious.

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

@@ -1,195 +1,38 @@
 ---
 name: intelligent-routing
-description: Automatic agent detection and routing based on task keywords and context.
-version: 1.0.0
+description: Route requests to the smallest set of owning agents and announce @ handoffs clearly.
 ---
 
 # Intelligent Routing
 
-Automatically detect which agent(s) should handle a task based on keywords and context.
+## Philosophy
+Route by ownership, not convenience. Specialists should only see the work they can improve.
 
-## How It Works
+## Use When
+- A request touches more than one domain.
+- You need to choose which agent owns the next step.
+- The right specialist is not obvious from the first read.
 
-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
+## Core Moves
+- Detect the intent first, then the domain.
+- Prefer one specialist for one domain, and a small set for multi-domain work.
+- Preserve context in the handoff instead of re-explaining from scratch.
+- Announce the route with explicit @-mentions.
 
-## Keyword Detection Matrix
+## Default Moves
+- Single domain -> one specialist.
+- Two or more domains -> feature-lead plus the needed specialists.
+- If uncertain, start with explorer-agent or project-planner before deep work.
 
-### Frontend
+## Anti-Patterns
+- Over-routing, sending everything to orchestrator, missing file ownership, and handoff without context.
 
-| 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` |
+## Variation
+- Use keyword signals, file ownership, and recent task history together.
+- Escalate security and testing automatically when risk is present.
 
-### Backend
+## Output
+- Return the route, the owning agent, and why that choice is the safest default.
 
-| 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.**
+## Remember
+The best routing is the one the user barely notices.