Frontend Component Generator

Workflow

1. Clarify requirements — confirm component type, data shape, and key interactions if the request is vague
2. Detect framework — check for React vs Vue from project context. If unclear, ask
3. Read conventions — load the relevant reference file for patterns
4. Generate — create .tsx / .vue component file + .test.tsx test file

React Components (primary)

Target: React 18+ with TypeScript, Next.js App Router

Read references/react-patterns.md before generating React components. Key rules:

• Named exports, 'use client' when using hooks, interfaces above component
• Ant Design 5 imports from antd, type-only imports from antd/es/
• useMessage() / useModal() with contextHolder pattern for feedback
• Prefer local state + custom hooks, no global state libs

Vue Components (secondary)

Target: Vue 3 (Composition API) or Vue 2 (Options API)

Read references/vue-patterns.md before generating Vue components. Confirm Vue version if not obvious.

Testing

Read references/test-patterns.md before generating test files. Generate *.test.tsx co-located with the component.

• Always generate test file alongside the component
• Use vitest + @testing-library/react + userEvent
• Mock antd message.useMessage() to avoid side effects
• Cover: render, loading state, key interactions

Framework Detection

• package.json with antd in dependencies → React
• package.json with ant-design-vue in dependencies → Vue
• tsconfig.json with "jsx": "react-jsx" → React
• .vue files in project → Vue
• Default to React if uncertain, and ask the user

Reference Files