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.