Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

luismpenholato/react-nextjs-antd-clean-architecture

Name: react-nextjs-antd-clean-architecture
Author: luismpenholato

skills/react-nextjs-antd-clean-architecture/SKILL.md

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

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

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

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

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/

Reference

Detailed examples in reference.md.

luismpenholato/react-nextjs-antd-clean-architecture

skills/react-nextjs-antd-clean-architecture/SKILL.md

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.

development

Updated Jun 21, 2026

$ install --global

skillsauth

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

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Jun 21, 2026, 6:40 AM26.6s2 files scanned

SKILL.md

name:: react-nextjs-antd-clean-architecture
description:: 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.

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

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

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

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/

Reference

Detailed examples in reference.md.

Related Skills

luismpenholato/dotnet-backend-clean-architecture

development

VerifiedTrustedCommunity

Clean Architecture + CQRS (MediatR) for .NET 10 backend APIs. Builds and maintains APIs with vertical slice (Features), Commands/Queries, handlers, validators, repositories, FluentMigrator, Refit integrations. Use when creating or refactoring .NET APIs, adding endpoints, commands, queries, entities, or when the user mentions Clean Architecture, CQRS, or MediatR.

SKILL.mdUpdated Jun 21, 2026

luismpenholato/dotnet-backend-clean-architecture

luismpenholato/angular-frontend-clean-architecture

development

VerifiedTrustedCommunity

Angular 21 standalone frontend with Clean Architecture, vertical slice (pages by feature), signals, OnPush, and ng-zorro. Use when creating or refactoring Angular apps, adding pages, components, services, directives, pipes, or when the user mentions Angular frontend, standalone components, or signals.

SKILL.mdUpdated Jun 21, 2026

luismpenholato/angular-frontend-clean-architecture

openclaw/openclaw-secret-scanning-maintainer

development

VerifiedTrustedCommunity

Maintainer-only workflow for handling GitHub Secret Scanning alerts on OpenClaw. Use when Codex needs to triage, redact, clean up, and resolve secret leakage found in issue comments, issue bodies, PR comments, or other GitHub content.

357,764SKILL.mdUpdated Apr 15, 2026

openclaw/openclaw-secret-scanning-maintainer

openclaw/openclaw-release-maintainer

development

VerifiedTrustedCommunity

Maintainer workflow for OpenClaw releases, prereleases, changelog release notes, and publish validation. Use when Codex needs to prepare or verify stable or beta release steps, align version naming, assemble release notes, check release auth requirements, or validate publish-time commands and artifacts.

357,764SKILL.mdUpdated Apr 10, 2026

openclaw/openclaw-release-maintainer

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/luismpenholato/maurao-skills.git

# Copy into Claude Code skills folder (global)
cp -r maurao-skills/skills/react-nextjs-antd-clean-architecture ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

luismpenholato/maurao-skills

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT