Frontend Stack Pack

Modern frontend development with React, Next.js, TypeScript, and performance optimization

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+ Expert

Modern hooks, Server Components, Actions, concurrent rendering, and performance optimization

nextjs-developer

Next.js 15+ Developer

App Router, Server Components, Partial Pre-Rendering, streaming, and production deployment

typescript-pro

TypeScript Expert

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

ui-designer

UI Design Specialist

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

performance-engineer

Performance Optimization

Core Web Vitals, bundle optimization, code splitting, lazy loading, and profiling

test-automator

Testing Expert

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

Who Should Use This Pack?

Frontend Engineers

Build production-ready React applications with modern patterns and performance optimization

Next.js Developers

Master Next.js 15+ with App Router, Server Components, and streaming SSR

UI/UX Engineers

Create consistent design systems and accessible component libraries

Full-Stack Developers (Frontend Focus)

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

Next.js Application

Agents: nextjs-developer → react-specialist → typescript-pro → performance-engineer

Build production-ready Next.js apps with optimal performance and type safety.

Component Library

Agents: ui-designer → react-specialist → typescript-pro → test-automator

Create reusable component libraries with comprehensive documentation and tests.

Performance Optimization

Agents: performance-engineer → react-specialist → nextjs-developer

Improve Core Web Vitals, reduce bundle size, and optimize rendering.

E-Commerce Frontend

Agents: nextjs-developer → react-specialist → ui-designer → test-automator

Build shopping experiences with product pages, cart, and checkout flows.

Tech Stack Coverage

Technology	Agents	Capabilities
React	react-specialist	Hooks, Server Components, Actions, concurrent rendering
Next.js	nextjs-developer	App Router, SSR, Partial Pre-Rendering, middleware
TypeScript	typescript-pro	Advanced types, generics, type safety
Styling	ui-designer	Tailwind, CSS-in-JS, design systems
Testing	test-automator	Jest, RTL, Playwright, Cypress
Performance	performance-engineer	Core 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

From React to Next.js

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

Adding TypeScript

Use typescript-pro to migrate JavaScript to TypeScript:

• Add type definitions incrementally
• Create utility types for props
• Enable strict mode progressively
• Ensure end-to-end type safety

Performance Improvements

Use performance-engineer to optimize existing apps:

• Analyze bundle with webpack-bundle-analyzer
• Implement code splitting
• Optimize images and fonts
• Improve Core Web Vitals

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