AI Skill Report Card
Generating Ant Select Components
Generate Ant Design Select Component
Quick Start12 / 15
Provide the entity name in kebab-case (e.g., banco, centro-custo, sindicato) and API endpoint. The agent generates:
- Model:
src/models/select/<entity>.model.tsor uses generic model - Component:
src/components/selects/select-<entity>.tsx
Example:
Entity: sindicato
Endpoint: /api/pessoal/sindicatos/
Recommendation▾
Remove the verbose 'Progress' checklist and make workflow more action-oriented with concrete steps
Workflow12 / 15
Progress:
- Determine approach (Generic vs Specific)
- Generate model (if specific approach)
- Generate component with placeholders filled
- Verify all imports and controller references
Approach A: Generic Model (Simple entities)
Uses existing src/models/select.ts. Component receives endpoint as prop.
Approach B: Specific Model (Complex entities)
Creates new model when entity needs:
- Custom controller
- Dependencies on other models
- Specific filters/parameters
- Strong typing
Recommendation▾
Add complete code templates for both Generic and Specific approaches instead of partial snippets
Examples15 / 20
Example 1: Simple entity (Generic approach) Input:
- Entity:
banco - Endpoint:
/api/bancos/ - Label: simple (
r.label)
Output:
TypeScript// Component uses useModel('select') const { selectLoading, options, getOptions, ... } = useModel('select'); // Endpoint passed as string: getSelectController('/api/bancos/', params)
Example 2: Complex entity (Specific approach) Input:
- Entity:
centro-custo - Controller:
getCentrosCustoController - Label: composite (
${r.codigo} - ${r.nome}) - Order:
codigo
Output:
TypeScript// Model: src/models/select/centro-custo.model.ts import { getCentrosCustoController } from '@/services/centro-custo.controller'; // Component uses useModel('select.centro-custo.model') // Label mapping: `${r.codigo} - ${r.nome}`
Recommendation▾
Include actual input/output file examples showing the generated model and component code in full
Best Practices
- Use kebab-case for entity names
- Generic approach for simple CRUD entities
- Specific approach when custom logic needed
- Always include infinite scroll and debounce search
- Support both single and multiple selection
- Handle missing options automatically
Common Pitfalls
- Don't forget to replace
ENDPOINT_AQUIplaceholder - Don't use
getSelectControllerin specific approach - Don't mix generic and specific model patterns
- Don't hardcode pagination without infinite scroll support