AI Elements Skill

From vercel-gen-ui

Description

Building AI-powered UI components with ai-elements.

AI Summary

Creates AI-powered UI components like chat interfaces and streaming text elements using React and TypeScript.

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

AI Elements Skill

Building AI-powered UI components with ai-elements.

Component Patterns

Composable component structure
Streaming text components
Chat interface components
Tool approval modals
Message rendering

Integration

Integrate with Vercel AI SDK
Use shadcn/ui base components
Follow React best practices
TypeScript support

Accessibility

ARIA attributes
Keyboard navigation
Screen reader support
Focus management

Styling

Tailwind CSS integration
Custom theme support
Dark mode support
Responsive design

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