Magic UI Component & Pattern Skill

Use this skill when building modern startup landing pages, hero sections, and feature showcases that need fluid motion, sleek dark mode aesthetics, and designer-engineer polish.

Key Component Patterns

1. Bento Grid:
   • Asymmetric modern feature card layouts with custom backgrounds, icons, and CTA links.
2. Animated Beam:
   • Animated SVG lines illustrating integrations, API connections, and data pipelines between logos or cards.
3. Border Beam & Shine Border:
   • Subtle glowing light running around container borders to draw user focus.
4. Interactive Text & Badges:
   • Animated gradient text, shimmer badges, typing effects, and number tickers.
5. Particle & Light Backdrops:
   • Animated grid patterns, retro grid, dot patterns, ripple effects, and particles.

Integration Workflow

• Magic UI components are designed to drop cleanly alongside shadcn/ui.
• Use Tailwind CSS utility classes and framer-motion for spring transitions.
• Check ./docs/ for implementation examples, props, and Tailwind configurations.