Code Assistant Skill | Agent Skills

Code Assistant

Intelligent orchestrator that analyzes your coding request and automatically selects the most appropriate specialist agent or coordinates multiple agents for complex tasks.

When to Use

This skill triggers automatically when you need help with:

Writing new code or features
Debugging issues or errors
Refactoring existing code
Frontend development
TypeScript-specific work
React applications
Tanstack Start applications
Next.js applications
Code security reviews
UI/UX design decisions

How It Works

Phase 1: Analysis

Analyzes your request to determine:

Language/framework (TypeScript, React, Next.js, etc.)
Task type (new code, debugging, refactoring, review, design)
Complexity (single agent vs multi-agent coordination)
Security sensitivity (client-side security concerns)
Performance concerns (waterfalls, bundle size, RSC optimization)
Code audit requests (best practices check, review for patterns)

Phase 2: Agent Selection

Based on analysis, selects the optimal specialist:

| Context | Selected Agent | Why | |---------|----------------|-----| | TypeScript code | typescript-coder | Type-safe, idiomatic TypeScript | | React/Vue components | frontend-developer | Modern frontend patterns | | Next.js specific | nextjs-developer | App Router, RSC expertise | | React/Next.js performance | react-best-practices skill | Waterfall elimination, bundle optimization | | React best practices audit | react-best-practices skill | Code review against 45 Vercel rules | | Client-side security | frontend-security-coder | XSS prevention, sanitization | | Debugging issues | debugger | Error analysis specialist | | Code review needed | code-reviewer | Quality assurance | | Refactoring task | code-refactoring-specialist | Clean code patterns | | UI/UX decisions | ui-ux-designer | Design systems | | General implementation | coder | Versatile fallback |

Phase 3: Coordination

For complex requests requiring multiple agents:

Primary agent handles main task
Secondary agents handle supporting tasks
Orchestrator coordinates handoffs

Example multi-agent workflow:

Request: "Build a secure Next.js form with TypeScript"
     ↓
Orchestrator coordinates:
  1. nextjs-developer → Creates form component structure
  2. typescript-coder → Adds type-safe validation
  3. frontend-security-coder → Implements XSS protection
  4. ui-ux-designer → Reviews accessibility
     ↓
Delivers complete, secure, well-typed component

Agent Profiles

typescript-coder

Expertise: Type-safe TypeScript, "inevitable code" patterns Best for: Complex typing, generics, strict type safety

frontend-developer

Expertise: React 19+, Vue 3, modern web development Best for: Component composition, state management, performance

nextjs-developer

Expertise: Next.js 14+, App Router, Server Components Best for: Full-stack Next.js, SSR, edge functions

frontend-security-coder

Expertise: Client-side security, XSS prevention Best for: User input handling, sanitization, security reviews

debugger

Expertise: Error analysis, test failures, unexpected behavior Best for: Fixing bugs, understanding stack traces

code-reviewer

Expertise: Code quality, best practices, security scanning Best for: PR reviews, quality assurance

code-refactoring-specialist

Expertise: Clean code, reducing complexity, maintainability Best for: Simplifying logic, improving readability

ui-ux-designer

Expertise: Interface design, accessibility, design systems Best for: Component design, user flows, design tokens

coder

Expertise: General implementation from specifications Best for: PRD-based development, general coding tasks

Selection Algorithm

IF request contains ["Next.js", "App Router", "Server Component"]
   → nextjs-developer

ELSE IF request contains ["React" AND ("best practices" OR "audit" OR "optimize" OR "performance")]
   → react-best-practices skill

ELSE IF request contains ["waterfall", "bundle size", "re-render", "RSC optimization"]
   → react-best-practices skill

ELSE IF request contains ["TypeScript" AND (complex types OR generics)]
   → typescript-coder

ELSE IF request contains ["React", "Vue", "frontend", "component"]
   → frontend-developer

ELSE IF request contains ["XSS", "sanitize", "security", "user input"]
   → frontend-security-coder

ELSE IF request contains ["debug", "error", "bug", "failing test"]
   → debugger

ELSE IF request contains ["review", "code quality", "best practices"]
   → code-reviewer

ELSE IF request contains ["refactor", "simplify", "clean up"]
   → code-refactoring-specialist

ELSE IF request contains ["design", "UI", "UX", "interface"]
   → ui-ux-designer

ELSE IF request contains specific implementation requirements
   → coder

ELSE
   → Ask user to clarify or use coder as default

Examples

Example 1: Automatic Selection

User: "I need to debug this React component that's crashing"

Code Assistant analyzes:
  - Task: debugging
  - Framework: React
  - Primary concern: errors

Selects: debugger agent
Announces: "Using debugger to analyze your React component issue"

Example 2: Multi-Agent Coordination

User: "Create a user registration form in Next.js with TypeScript validation"

Code Assistant analyzes:
  - Framework: Next.js
  - Language: TypeScript
  - Task: new feature
  - Concerns: validation, security

Coordinates:
  1. nextjs-developer creates form structure
  2. typescript-coder adds type-safe validation
  3. frontend-security-coder reviews input handling

Delivers: Complete, type-safe, secure registration form

Example 3: Ambiguous Request

User: "Help me with my code"

Code Assistant:
  "I can help! To select the best specialist, could you tell me more:
   - What language/framework? (React, Next.js, TypeScript, etc.)
   - What do you need? (new feature, debugging, refactoring, review)
   - Any specific concerns? (performance, security, types)"

Override Options

Users can explicitly request specific agents:

"Use typescript-coder for this"
"I want the nextjs-developer"
"Let the debugger handle this"

When explicit request is made, orchestrator defers to user choice.

Gotchas

Don't over-route simple tasks — if the user just wants a quick fix, do it directly instead of spawning a specialist agent
Agent overhead adds ~5 seconds — for trivial changes (rename, add a log, fix a typo), skip orchestration entirely
The selection algorithm is a guideline, not rigid rules — use judgment when context suggests a different agent
Multi-agent coordination is sequential — don't promise parallel execution
When the user explicitly names an agent ("use the debugger"), defer to their choice immediately

Fallback Behavior

If no clear agent match:

Ask clarifying questions
Use coder as versatile default
Announce selection rationale

Performance Notes

Analysis overhead: ~5 seconds for complex requests
Single agent: Same as direct agent invocation
Multi-agent: Sequential execution (no parallelization yet)

Future Enhancements

[ ] Parallel multi-agent execution
[ ] Learning from past selections
[ ] Context-aware preloading
[ ] User preference memory

Agent Skills: Code Assistant

Install this agent skill to your local

Skill Files