senior-frontend-engineer

Codify production-grade frontend patterns for large React/Next.js applications.

Updated Dec 26, 2025
One-click install
npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill senior-frontend-engineer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend-engineer
Source: https://github.com/Yoriichi-Dang/dashboard_web_template/tree/main/.claude/skills/senior-frontend-engineer
Command: npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill senior-frontend-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps organizations implement production-grade frontend architectures for large-scale React/Next.js projects, ensuring maintainability, performance, and accessibility.

Core Features & Use Cases

  • Server-first patterns: default to Server Components with selective client usage to minimize bundle size and improve performance.
  • End-to-end quality: strong typing with Zod, API boundary validation, and a comprehensive testing strategy (unit, integration, and E2E).
  • Scalability & performance: modular feature-based structure, code-splitting, server-driven rendering, and accessibility-first UI.
  • Use Case: A company migrating to Next.js 16 designs a scalable admin dashboard with authentication, data visualization, and role-based access control.

Quick Start

Plan and implement a production-grade Next.js 16 app by outlining server components, feature modules, and a robust testing strategy.

Frequently Asked Questions about senior-frontend-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a large Next.js app using server components and client components?▼

Structure large Next.js apps by defaulting to Server Components to minimize bundle size and selectively using client components only where interactivity is required, ensuring server-first patterns for optimal performance.

What is the best way to validate API boundaries in a React and Zod application?▼

Validate API boundaries in React by enforcing strong typing with Zod, ensuring end-to-end quality by catching schema mismatches at the edges of your application before data reaches the UI components.

How do I set up a testing strategy for enterprise Next.js applications?▼

Establish a comprehensive testing strategy for enterprise Next.js applications by implementing unit, integration, and end-to-end tests to secure feature modules and maintain robust UI quality.

Does this frontend architecture pattern require Tailwind and shadcn/ui?▼

Yes, this frontend architecture pattern requires familiarity with Tailwind and shadcn/ui alongside Next.js 16, TypeScript, React Query, Zustand, and Zod to enforce scalable design and accessibility-first UI.

How do I implement role-based access control in a Next.js admin dashboard?▼

Implement role-based access control in Next.js by adopting a modular feature-based structure with server-driven rendering, enabling secure authentication and data visualization for scalable admin dashboards.

Why should I use server-first patterns for React performance tuning?▼

Use server-first patterns for React performance tuning to reduce client-side bundle size, leverage server-driven rendering, and enforce code-splitting which significantly improves application scalability.