Next.js Generative UI Skill

From vercel-gen-ui

Description

Patterns and best practices for building generative UI with Next.js.

AI Summary

Implements generative UI patterns in Next.js with server-side AI streaming and client-side state management.

Install

Run in your terminal

npx claudepluginhub davincidreams/atlas-agent-teams

Tool Access

This skill inherits all available tools. When active, it can use any tool Claude has access to.

Skill Content

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

Links

GitHub Stats

0 forks

Updated 28 days ago

Actions

Similar Skills

documentation-lookup

This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.

context7-plugin

48.2k

ui-ux-pro-max

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

ui-ux-pro-max

36.2k

employment-contract-templates

Create employment contracts, offer letters, and HR policy documents following legal best practices. Use when drafting employment agreements, creating HR policies, or standardizing employment documentation.

hr-legal-compliance

30.8k