monumentalsystems Next.js Generative UI Skill
Patterns and best practices for building generative UI with Next.js.
Server Components
- Use Server Components for AI generation
- Stream responses from server to client
- Implement progressive rendering
- Handle loading states with Suspense
Client Patterns
- Manage AI interaction state
- Handle streaming updates
- Implement optimistic UI
- Error boundaries for AI failures
Performance
- Optimize initial load
- Stream AI responses progressively
- Cache AI responses when appropriate
- Debounce user inputs
Accessibility
- ARIA labels for AI components
- Keyboard navigation
- Screen reader announcements
- Focus management