skills.rest
boparaiamrit
boparaiamritCOMMUNITY
Explore all skills by this author →
GitHub

frontend-architect-skill

Plan and implement modular multi-tenant frontend architectures for enterprise Next.js apps.

Updated Mar 13, 2026
Search Tags:#architecture#frontend#react#nextjs#multitenant#data-tables#zod-validation
One-click install
npx skills add https://github.com/boparaiamrit/build-second-brain --skill frontend-architect-skill-boparaiamrit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-architect-skill
Source: https://github.com/boparaiamrit/build-second-brain/tree/main/plugins/build-second-brain/skills/frontend-architect-skill
Command: npx skills add https://github.com/boparaiamrit/build-second-brain --skill frontend-architect-skill-boparaiamrit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds a scalable, modular frontend architecture for enterprise Next.js apps that reduces duplication and enables multi-tenant patterns.

Core Features & Use Cases

  • Modular, feature-driven architecture using Next.js 16 App Router, React 19, TypeScript 5, Tailwind 4, Zustand 5, TanStack Query 5, TanStack Table 8, and Better Auth.
  • Provides a unified data-table pattern (UnifiedDataTable), wizard patterns for multi-step flows, and a mock/real API adapter pattern to accelerate development.
  • Includes a complete migration blueprint (7-phase framework) to transform flat architectures into vertical feature modules with co-located types, API, hooks, and components.

Quick Start

Initialize a new feature module under src/features/frontend-architect-skill and wire up API, hooks, and UI components following the seven-phase migration plan.

Frequently Asked Questions about frontend-architect-skill

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

FAQPage Schema
How do I structure a scalable frontend architecture for enterprise Next.js apps?▼

A scalable frontend architecture for enterprise Next.js apps uses modular, feature-driven vertical modules with co-located types, API layers, React Query hooks, and UI components to reduce duplication and enable multi-tenant patterns.

What is the best way to migrate a flat frontend architecture into modular feature modules?▼

Migrating flat frontend architectures into modular feature modules follows a seven-phase migration blueprint, transforming flat structures into vertical slices with co-located types, API, hooks, and components for enterprise Next.js apps.

How do I implement multi-step wizard patterns and data tables in React 19 and Next.js 16?▼

Implementing wizard patterns and data tables in React 19 and Next.js 16 uses a UnifiedDataTable pattern with TanStack Table 8 and wizard patterns for multi-step flows, supported by mock/real API adapters to accelerate development.

Can I use TanStack Query 5 and Zustand 5 with a multi-tenant Next.js architecture?▼

Yes, TanStack Query 5 and Zustand 5 are fully supported within a multi-tenant Next.js architecture, working alongside Tailwind 4, Better Auth, and TypeScript 5 to enforce strong typing and validation across feature modules.

How do I enforce strong typing and validation in enterprise frontend forms?▼

Enforcing strong typing and validation in enterprise frontend forms uses Zod validation and TypeScript 5 across feature modules, ensuring data integrity within API layers, React Query hooks, and UnifiedDataTable components.

What are the limitations of using feature-driven architecture for enterprise frontend apps?▼

Feature-driven architecture for enterprise frontend apps requires strict adherence to a seven-phase migration plan and co-location rules; flat architectures without this blueprint may struggle to adapt to modular, multi-tenant feature modules.

Related Skills

Explore More Software Engineering Skills→
hopeoverturehopeoverture
6

nextjs-fullstack-scaffold

Scaffold a Next.js 16 full-stack app with TypeScript, Tailwind, Prisma, and Supabase auth.

Community
Advanced
agusmdevagusmdev
5

add-frontend-feature

Scaffold React/TypeScript frontend features with types, API endpoints, hooks, components, and routes.

Community
Intermediate
oakossoakoss
1

zod

Validate runtime data against Zod v4 schemas in TypeScript projects.

Official
Intermediate
ichabodcoleichabodcole

update-project-docs

Migrate project documentation structures to the latest scaffold template.

Community
Advanced