frontend-architect

Architect PayU frontends with Next.js 15+, TypeScript Strict, and Server Components.

1|Updated Jan 18, 2026
One-click install
npx skills add https://github.com/fajjarnr/payu --skill frontend-architect-fajjarnr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-architect
Source: https://github.com/fajjarnr/payu/tree/main/.agent/skills/frontend-architect
Command: npx skills add https://github.com/fajjarnr/payu --skill frontend-architect-fajjarnr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill equips PayU frontend teams to architect, implement, and maintain premium, high-performance Next.js 15+ frontends with TypeScript Strict, App Router, and Server Components.

Core Features & Use Cases

  • TypeScript Strict foundations across the app, including strictNullChecks and noImplicitAny.
  • Server Components, App Router routing, and Server Actions for scalable data flows.
  • State management patterns (server state + client state) and robust security, accessibility, and testing practices.
  • Premium Design System integration with tokens, performance optimizations, and accessible UI components.
  • Real-world scenarios: dashboards, data-heavy forms, and modular microfrontends for PayU.

Quick Start

Initialize a PayU Next.js 15+ project with TS Strict and App Router, wire up the Design System, implement a sample dashboard using Server Components and Server Actions, and run a basic accessibility and performance checklist.

Frequently Asked Questions about frontend-architect

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

FAQPage Schema
How do I architect a Next.js 15 App Router project using Server Components?

Architect a Next.js 15 App Router project by applying TypeScript Strict foundations, leveraging Server Components for scalable data flows, and using Server Actions to build fast, accessible, and secure enterprise UIs.

What is the best way to manage state in Next.js 15 dashboards with Server Components?

The best way to manage state in Next.js 15 dashboards is by separating server state from client state, utilizing Server Components for data fetching, and applying robust state management patterns to handle data-heavy forms effectively.

How do I enforce accessibility and performance budgets in a TypeScript Strict frontend?

Enforce accessibility and performance budgets in a TypeScript Strict frontend by integrating design tokens, applying accessibility compliance checks, and running performance optimization practices throughout your modular microfrontends.

Can I build modular microfrontends for enterprise UIs using Next.js 15 App Router?

Yes, you can build modular microfrontends for enterprise UIs using Next.js 15 App Router by combining TypeScript Strict, Server Components, and a premium design system to ensure secure and scalable data flows.

Why use TypeScript Strict for data-heavy forms in Next.js 15?

Use TypeScript Strict for data-heavy forms in Next.js 15 to enforce strictNullChecks and noImplicitAny, ensuring robust type safety, secure data handling, and preventing runtime errors across enterprise frontend architectures.

How do I integrate a design system with Server Components and Server Actions?

Integrate a design system with Server Components and Server Actions by applying design tokens directly to accessible UI components, ensuring performance optimizations and compliance across the Next.js 15 frontend architecture.