Ant Design X 组件开发规范指南

Guide Ant Design X component development with TypeScript, CSS-in-JS, and testing standards.

4.7k|1.1k|Updated May 9, 2024
One-click install
npx skills add https://github.com/ant-design/x --skill ant-design-x
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Ant Design X 组件开发规范指南
Source: https://github.com/ant-design/x/tree/main/.codefuse/skills/components
Command: npx skills add https://github.com/ant-design/x --skill ant-design-x

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to developing Ant Design X components, ensuring consistency, maintainability, and high quality across the development lifecycle.

Core Features & Use Cases

  • Component Architecture: Guidelines on project structure, file naming, and component patterns (composite, configuration merging, controlled/uncontrolled).
  • TypeScript & Styling: Best practices for TypeScript type design, CSS-in-JS, responsive design, and theme customization.
  • Accessibility & Performance: Standards for ARIA attributes, focus management, and React/style optimizations.
  • Testing & Documentation: Requirements for unit testing, API documentation, and example code.
  • Use Case: A new developer joining the Ant Design X project can use this guide to quickly understand and adhere to the established coding standards for component development.

Quick Start

Follow the Ant Design X component development guidelines to create a new button component.

Frequently Asked Questions about Ant Design X 组件开发规范指南

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

FAQPage Schema
What are the Ant Design X component development standards for project architecture and TypeScript typing?

Ant Design X component development standards mandate specific project structures, file naming conventions, and TypeScript type design to ensure consistency. They define patterns for composite components and controlled states.

How do I implement CSS-in-JS styling and accessibility in a React component library?

To implement CSS-in-JS styling and accessibility, follow guidelines for responsive design, theme customization, and ARIA attributes. Proper focus management and React style optimizations are required.

What is the best way to structure unit testing and documentation for UI components?

The best way to structure unit testing and documentation involves fulfilling specific unit testing requirements and generating API documentation alongside example code to maintain robust UI components.

Does Ant Design X support internationalization and automated release processes?

Ant Design X supports internationalization and automated release processes through established standards. These guidelines ensure components are maintainable and globally accessible throughout the development lifecycle.

When do I need to use controlled and uncontrolled component patterns in TypeScript?

You need to use controlled and uncontrolled component patterns when building configuration merging logic in TypeScript. These patterns manage state predictability within the component architecture.