jobsys/newbie-next
Overview
This skill provides a concise guide to Ant Design Pro Components (ProComponents) with a component list, common scenarios, and direct links to official documentation. It is designed to help developers generate code, query component props, and choose the right ProComponents for admin UIs. The guide emphasizes practical usage patterns and when to inspect docs for precise prop types.
How this skill works
The skill summarizes core component categories—Layout, Table/List, Form, Data Display, and utilities—and maps each to typical use cases and documentation links. When code generation requires exact prop shapes (for example, the request return format or ProTable columns config), the skill recommends using a browsing tool to fetch the official docs for authoritative details. It focuses on actionable advice like using request-driven data loading and valueType for formatting.
When to use it
- Building admin dashboards with sidebar, header, and breadcrumb layout (use ProLayout and PageContainer).
- Implementing searchable, CRUD-ready tables with built-in filters and toolbars (use ProTable).
- Creating forms in different contexts: page forms, modal/drawer forms, and multi-step flows (use ProForm variants).
- Rendering detail pages and metric cards with minimal boilerplate (use ProDescriptions and StatisticCard).
- Quickly scaffolding read-only or editable atomic fields (use ProField and ValueType).
Best practices
- Prefer the request prop on ProTable/ProForm to handle async loading and pagination instead of manual loading/data state.
- Use valueType for automatic display and input formatting (money, date, select) to avoid custom renderers.
- Consult the official component docs when uncertain about specific Props (columns, request return shape, editable config).
- Choose specialized components (EditableProTable, DragSortTable, QueryFilter) instead of adding custom behavior to base components.
Example use cases
- Admin list page with searchable columns, server-side pagination, and export actions using ProTable and request.
- Detail view that shows record fields in a readable layout using ProDescriptions and ProCard.
- Inline-editable inventory table using EditableProTable with per-row save handlers.
- Form-driven creation flow with validations and multi-step UX using StepsForm and ModalForm.
FAQ
Use request on ProTable/ProForm to let the component manage loading, pagination, and params; use manual fetching only for very custom flows.
How do I format values consistently across tables and forms?
Use valueType on columns and form items to get standardized display and input behavior without custom render code.
Where to check exact prop types for complex props like columns or request?
Open the official ProComponents documentation pages for the specific component to see examples and type details.
