AI Skill Report Card
Generating TypeScript Models
Quick Start15 / 15
Provide your controller file content and I'll generate the corresponding model.ts file following the established patterns.
Example Input:
TypeScript// controllers export const getUsersController = async ( qsParams: User.QueryStringParams ): Promise<AxiosResponse<App.Pagination<User.User>, any>> => { // ... implementation }; export const createUserController = async ( body: User.CreateParams ): Promise<AxiosResponse<User.User, any>> => { // ... implementation };
Example Output:
TypeScript// model.ts import { defaultPaginationValues } from '@/constants/pagination'; import useLoading from '@/hooks/use-loading'; import { updateArrayItem } from '@/utils/update-array-item'; import { message } from 'antd'; import { useState } from 'react'; import { createUserController, getUsersController, } from './user.controller'; export default () => { const [users, setUsers] = useState<App.Pagination<User.User>>(defaultPaginationValues); const { loading, startLoading, stopLoading } = useLoading(); const getUsers = async (...args: Parameters<typeof getUsersController>) => { try { startLoading(); const response = await getUsersController(...args); const { data } = response; setUsers(data); } catch (error) { message.error('Não foi possível obter os dados'); return Promise.reject(); } finally { stopLoading(); } }; const createUser = async (...args: Parameters<typeof createUserController>) => { try { startLoading(); const response = await createUserController(...args); const { data } = response; setUsers((previousData) => ({ ...previousData, results: [data, ...(previousData?.results || [])], count: previousData.count + 1, })); message.success('Criado com sucesso'); return Promise.resolve(); } catch (error) { message.error('Não foi possível criar'); return Promise.reject(); } finally { stopLoading(); } }; return { userLoading: loading, users, getUsers, createUser, }; };
Recommendation▾
Remove redundant explanations like 'The id parameter' in comments - Claude can infer this from context
Workflow13 / 15
- Analyze controllers - Identify available CRUD operations
- Determine data structure - Paginated vs simple array based on get controller return type
- Generate state management - Create useState for data storage
- Implement CRUD functions - Map each controller to a model function
- Handle parameter mapping - Use args[n] for multi-parameter operations
- Add error handling - Generic messages without entity names
- Return interface - Export all functions and state
Progress:
- Parse controller functions
- Identify pagination pattern
- Generate state variables
- Create CRUD operations
- Add parameter handling
- Implement error messages
- Define return interface
Recommendation▾
Add template or framework section showing the complete model structure pattern
Examples16 / 20
Example 1: Paginated with no parameters
TypeScript// Controller signature determines model structure getAreasController(qsParams) → Pagination<Area> // Results in: const [areas, setAreas] = useState<App.Pagination<Area>>(defaultPaginationValues);
Example 2: Simple array without pagination
TypeScript// Controller signature getVersoesController() → Versao[] // Results in: const [versoes, setVersoes] = useState<Versao[]>([]);
Example 3: Multi-parameter operations
TypeScript// Controller signature updateAdicionalNoturnoController(versao, id, params) // Results in updateArrayItem using: identification: args[1], // The id parameter
Recommendation▾
Include edge cases like handling failed deletions or network errors in the completeness section
Best Practices
- Import standardization: Always import the same utilities (defaultPaginationValues, useLoading, updateArrayItem, message)
- Generic messages: Use "Não foi possível obter os dados" instead of entity-specific messages
- Parameter handling: Use
...args: Parameters<typeof controllerFunction>and spread into controller calls - State updates: For paginated data, update both results array and count; for simple arrays, replace entirely
- Error consistency: Always return Promise.reject() on errors, Promise.resolve() on success
Common Pitfalls
- Don't implement functions for non-existent controllers
- Don't use entity-specific names in error messages
- Don't forget to handle count updates for paginated delete operations
- Don't mix pagination patterns - if get returns Pagination, all operations should handle it consistently
- Don't hardcode parameter positions - analyze controller signature to determine correct args[n] index