React nextjs antd clean architecture

Skill luismpenholato/maurao-skills/skills/react-nextjs-antd-clean-architecture

React 19 + Next.js 16 App Router, TypeScript, Ant Design, TanStack Query, Axios, React Hook Form, Zod — Clean Architecture frontend with vertical slice by feature. Use when creating or refactoring Next.js apps, admin panels, SaaS frontends, CRUDs, forms, layouts and frontend architecture.From its SKILL.md

Install

npx -y skills add luismpenholato/maurao-skills --skill react-nextjs-antd-clean-architecture

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.7 KB, ~1.1k tokens by cl100k_base, as published. Nobody here has run it

React 19 + Next.js 16 + Ant Design — Clean Architecture

Skill for creating and maintaining React 19 + Next.js 16 frontends with feature architecture, Ant Design, and REST integration (.NET or similar).

When to use

Create or extend Next.js frontend (admin, SaaS, backoffice)
CRUD, forms, authenticated layout
Integrate with REST API
Refactor React components to vertical slice
Define service, hook, schema, and route patterns

When not to use

React projects without Next.js.
Codebases on the Pages Router instead of App Router.
Projects where Tailwind or Shadcn is the primary design system.
Applications that use GraphQL instead of REST for data fetching.

Expected structure

src/app/           → routes, layouts, loading, error, not-found (NO business logic)
src/features/      → domains (auth, products, …)
src/shared/        → components, providers, lib (api, auth, env), theme/

UI URLs vs API

Layer	Convention	Example
UI routes	English	`/products`, `/products/new`, `/products/:id/edit`
REST API	English	`/api/products`

Architecture rules

src/app — Next.js only (thin routes importing pages from features/)
src/features/{domain}/ — types, schemas, services, hooks, components, {domain}.page.tsx
src/shared/ — reusable, no domain logic
HTTP centralized in shared/lib/api/api-client.ts
process.env only in shared/lib/env/env.ts
Forms: React Hook Form + Zod
Remote state: TanStack Query
UI: Ant Design (no Tailwind in MVP)
Design system in shared/theme/ — palette, CSS tokens, overrides in theme/styles/antd/
Drawer/menu: rootClassName="app-drawer" + CSS .app-drawer .drawer-menu (portaled to body)
SEO: shared/lib/seo/metadata.ts + metadata per route; noindex in admin app
Forbidden: any, Axios directly in visual components; legacy redirects without need

This skill uses Ant Design as the default design system, matching CleanStack. Do not force Ant Design on projects that already use another design system — adapt the feature structure and patterns instead.

Ant Design + App Router

// src/app/layout.tsx
import { AntdRegistry } from '@ant-design/nextjs-registry';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en-US">
      <body>
        <AntdRegistry>{children}</AntdRegistry>
      </body>
    </html>
  );
}

Separate provider with ConfigProvider, en_US locale, centralized theme.

Server vs Client Components

`'use client'`	Server Component
Interactive Ant Design	Route that only re-exports feature page
useRouter, useState, useEffect	redirect(), metadata
TanStack Query, React Hook Form	Layout without interactivity
localStorage, events	—

Service pattern

import { apiClient } from '@/shared/lib/api/api-client';

export async function listProducts(): Promise<Product[]> {
  return apiClient.get<Product[]>('/api/products');
}

Services are pure async functions
Must not use hooks or JSX

Hook pattern

'use client';

import { useQuery } from '@tanstack/react-query';

export function useProducts() {
  return useQuery({ queryKey: ['products'], queryFn: listProducts });
}

Hooks must not return JSX
Mutations invalidate related query keys

Form pattern

export const productSchema = z.object({
  name: z.string().min(1, 'Name is required.'),
  price: z.number().positive('Price must be greater than zero.'),
});

Component: useForm + zodResolver + Controller + Ant Design Form.Item.

Test conventions

Test Zod schemas with safeParse (Vitest)
File: {feature}.schema.test.ts next to the schema
Do not test Ant Design internal implementation
Prefer contract tests (schema, mocked service) over UI snapshots

New feature — checklist

types → 2. schema (+ test) → 3. service → 4. hooks → 5. components → 6. page → 7. route in app/

Anti-patterns

Business logic in src/app/page.tsx instead of feature pages.
Axios calls directly in visual components.
Scattered process.env access outside shared/lib/env.
Mixing Tailwind/Shadcn with Ant Design as co-primary design systems.
Hooks that return JSX instead of data and handlers.

Reference

Detailed examples in reference.md.

What ships with it: 1 file

5.0 KB alongside SKILL.md

reference.md5.0 KB