Building With Frameworks and AI
AI coding assistants have trained on millions of frontend components. They know React, Vue, Angular, and Svelte well enough to generate working code quickly. But getting good results requires effective prompting and careful review.
Prompting for Components
Vague prompts produce vague results. Be specific about what you need:
"Create a React component for a todo list with:
- Add todo input with placeholder text
- List of todos with checkboxes for completion
- Delete button for each todo item
- Filter tabs: all, active, completed
- Use useState for state management
- Include basic CSS styling"
This prompt specifies the framework, features, state approach, and styling expectations. The AI has enough context to generate something useful.
Framework-Specific Considerations
Each framework has quirks that affect AI output:
React gets the best AI assistance. There's more React code in training data than any other framework. Specify whether you want class components or functional components with hooks — AI defaults to hooks for modern code.
Vue has two API styles: Options API and Composition API. Always specify which you want, or you might get a mix. Vue 3's Composition API is more similar to React hooks.
Angular produces verbose output due to its decorator-heavy syntax. AI handles it well, but review the module imports carefully — they're easy to get wrong.
Svelte has less training data, so AI occasionally produces outdated syntax or mixes in React patterns. Verify the output against current Svelte documentation.
Reviewing AI-Generated Components
Don't blindly copy AI output. Check these things:
Does it follow framework conventions? React components should use PascalCase. Vue single-file components need proper structure. Angular needs correct decorators.
Are there performance issues? Watch for unnecessary re-renders, missing keys on lists, or computations that should be memoized.
Is error handling present? AI often generates the happy path. What happens when the API call fails? When the user enters invalid data?
Is it accessible? Check for proper ARIA labels, keyboard navigation, and semantic HTML. AI frequently misses accessibility requirements.
Iterating With AI
Your first prompt rarely produces perfect code. Iterate:
"The todo list works, but add these improvements:
- Persist todos to localStorage
- Add animation when items are added/removed
- Show a count of remaining items
- Add keyboard shortcut (Enter) to submit"
Building incrementally helps you understand each piece and catch issues early.