Skip to main content

​
Overview

The Frontend Stack pack provides expert agents for building modern, performant web applications. From React and Next.js to TypeScript and UI design — this pack covers the complete frontend development lifecycle. Perfect for frontend engineers, React developers, and UI specialists.

​
Installation

npx github:dmicheneau/opencode-template-agent install --pack frontend

​
Included Agents

react-specialist

React 19+ ExpertModern hooks, Server Components, Actions, concurrent rendering, and performance optimization

nextjs-developer

Next.js 15+ DeveloperApp Router, Server Components, Partial Pre-Rendering, streaming, and production deployment

typescript-pro

TypeScript ExpertAdvanced type system, generics, utility types, type inference, and full-stack type safety

ui-designer

UI Design SpecialistDesign systems, component libraries, visual consistency, accessibility, and CSS-in-JS

performance-engineer

Performance OptimizationCore Web Vitals, bundle optimization, code splitting, lazy loading, and profiling

test-automator

Testing ExpertJest, React Testing Library, Playwright, Cypress, E2E testing, and CI/CD integration

​
Who Should Use This Pack?

Build production-ready React applications with modern patterns and performance optimization
Master Next.js 15+ with App Router, Server Components, and streaming SSR
Create consistent design systems and accessible component libraries
Strengthen frontend skills while maintaining backend capabilities

​
Example Workflow

Here’s how the Frontend Stack agents work together:
1

Design the component system

Use ui-designer to plan your design system and component architecture
@web/ui-designer
Design a component library for a SaaS dashboard with dark mode support
2

Build React components

Use react-specialist to implement components with modern patterns
@web/react-specialist
Create a data table component with sorting, filtering, and virtualization
3

Add Next.js features

Use nextjs-developer for App Router, Server Components, and routing
@web/nextjs-developer
Implement authentication with middleware and protected routes
4

Ensure type safety

Use typescript-pro for advanced types and type inference
@languages/typescript-pro
Create type-safe form validation with Zod and React Hook Form
5

Optimize performance

Use performance-engineer to improve Core Web Vitals
@devtools/performance-engineer
My LCP is 4 seconds. Help me optimize image loading and reduce bundle size
6

Add comprehensive tests

Use test-automator for unit, integration, and E2E tests
@devtools/test-automator
Create Playwright E2E tests for the checkout flow

​
Key Capabilities

​
React Development

  • React 19+ with modern hooks
  • Server Components and Actions
  • Concurrent rendering patterns
  • State management (Context, Zustand, Jotai)
  • Component composition patterns

​
Next.js Framework

  • App Router architecture
  • Server and Client Components
  • Streaming SSR and Partial Pre-Rendering
  • Route handlers and API routes
  • Middleware and authentication

​
TypeScript Integration

  • Type-safe props and state
  • Generic components
  • Utility types and mapped types
  • Type inference and narrowing
  • End-to-end type safety

​
UI/UX Excellence

  • Design systems and tokens
  • Component libraries
  • Responsive design
  • Accessibility (WCAG 2.1)
  • CSS-in-JS and Tailwind

​
Performance & Testing

  • Core Web Vitals optimization
  • Bundle analysis and code splitting
  • Image and font optimization
  • Unit and E2E testing
  • CI/CD test automation

​
Common Use Cases

Agents: nextjs-developer → react-specialist → typescript-pro → performance-engineerBuild production-ready Next.js apps with optimal performance and type safety.

​
Tech Stack Coverage

TechnologyAgentsCapabilities
Reactreact-specialistHooks, Server Components, Actions, concurrent rendering
Next.jsnextjs-developerApp Router, SSR, Partial Pre-Rendering, middleware
TypeScripttypescript-proAdvanced types, generics, type safety
Stylingui-designerTailwind, CSS-in-JS, design systems
Testingtest-automatorJest, RTL, Playwright, Cypress
Performanceperformance-engineerCore Web Vitals, bundle optimization

​
Complementary Agents

Consider adding these agents for expanded capabilities:
  • vue-expert — If you also work with Vue.js
  • angular-architect — For Angular projects
  • mobile-developer — React Native for mobile apps
  • accessibility — Deep WCAG compliance and ARIA patterns
  • api-architect — Design APIs that complement your frontend

​
Migration Paths

Use nextjs-developer to migrate Create React App to Next.js:
  • Convert pages to App Router
  • Add Server Components
  • Implement streaming SSR
  • Optimize with Partial Pre-Rendering

​
Next Steps

Install Frontend Pack

npx github:dmicheneau/opencode-template-agent install --pack frontend

Explore Individual Agents

Browse detailed documentation for each agent

Full-Stack Pack

Add backend development to complete the stack

Backend Pack

Build APIs that power your frontend

Build docs developers (and LLMs) love

Get started for freeTalk to us