skills.rest
zanaroot
zanarootOFFICIAL
Explore all skills by this author →
GitHub

ant-design

Guide Ant Design v6 theming, SSR, routing, and Pro/X integration decisions.

2|Updated Jan 27, 2026
Search Tags:#theming#routing#tokens#ssr#antd#ant-design#pro-layout
One-click install
npx skills add https://github.com/zanaroot/znr-collabill --skill ant-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ant-design
Source: https://github.com/zanaroot/znr-collabill/tree/main/.ai/skills/ant-design
Command: npx skills add https://github.com/zanaroot/znr-collabill --skill ant-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guidance helps teams apply Ant Design v6 patterns across projects, standardizing UI decisions, theming, SSR, and access control to reduce drift and rework.

Core Features & Use Cases

  • Decision guidance for component usage, theming tokens, CSS-in-JS approaches, SSR order, and accessibility.
  • Patterns for Pro Layout, ProTable, ProForm, and X UI integration, including setup for routing and access control.
  • Reference-driven workflow with pointers to core documentation and practical validations.

Quick Start

Read this guide to align your project with Ant Design v6 best practices and begin implementing token-based theming, SSR, and routing-aware UI decisions.

Frequently Asked Questions about ant-design

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

FAQPage Schema
How do I configure Ant Design v6 theming tokens for a custom dashboard UI?▼

Ant Design v6 theming tokens are configured using a CSS-in-JS approach to standardize UI decisions. This guidance formalizes decision rules for applying token-based theming to reduce visual drift across admin panels.

What is the correct SSR setup for Ant Design components in a Next.js application?▼

SSR setup for Ant Design in Next.js requires following a specific render order to prevent style flickering. This guidance outlines the necessary SSR order and Next.js integration patterns for building dashboards.

How do I integrate ProLayout with routing and access control in an admin panel?▼

Integrating ProLayout with routing involves applying specific Pro/X patterns for access control. This guidance provides setup patterns for routing-aware UI decisions and secure ProLayout usage in admin panels.

Can I use Ant Design v6 patterns for building AI-enabled user interfaces?▼

Ant Design v6 patterns effectively support building AI-enabled UIs within Next.js environments. This guidance targets frontend architects standardizing UI components and access control for AI-driven dashboards.

What are the best practices for standardizing UI decisions across Ant Design projects?▼

Standardizing UI decisions across Ant Design projects requires applying consistent theming tokens, SSR setups, and component usage rules. This guidance helps teams reduce rework by formalizing these best practices.

When should I reference external documentation for advanced Ant Design ProTable and ProForm setups?▼

You should reference external documentation for advanced ProTable and ProForm setups when implementing complex X UI integrations. This guidance uses a reference-driven workflow linking to core docs for deeper topics.

Related Skills

Explore More Software Engineering Skills→
wredziowredzio

tailwind-v4-shadcn

Configure Tailwind v4 theming with shadcn/ui in React + Vite projects.

Community
Advanced
aaronachermannaaronachermann

databricks-aibi-dashboards

Build and deploy Databricks AI/BI dashboards with mandatory SQL validation.

Community
Advanced
xiaoniuge36xiaoniuge36
6

table-generator

Generate dynamic data tables for React and Vue.js with pagination and search.

Community
Intermediate
bazokhanbazokhan
3

@sbtools/ui-web

Consolidate React UI rendering and design tokens across SSR pages and a Vite-based SPA dashboard.

Community
Advanced