skills.rest
SeanChenR
SeanChenRCOMMUNITY
Explore all skills by this author →
GitHub

magic-ui

Integrate Magic UI components into React/Next.js projects with Tailwind CSS and shadcn.

Updated Aug 27, 2026
Search Tags:#accessibility#react#nextjs#tailwind#shadcn#component-integration#magic-ui
One-click install
npx skills add https://github.com/SeanChenR/maestro-agent --skill magic-ui-seanchenr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: magic-ui
Source: https://github.com/SeanChenR/maestro-agent/tree/main/.agents/skills/magic-ui
Command: npx skills add https://github.com/SeanChenR/maestro-agent --skill magic-ui-seanchenr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides clear, actionable guidance to add, customize, and troubleshoot Magic UI registry components in React and Next.js projects so teams can convert static sections into interactive, accessible, and maintainable UI without reinventing animation code.

Core Features & Use Cases

  • Component selection heuristics and recommended families for heroes, CTAs, text motion, and ambient backgrounds.
  • Installation and integration guidance for shadcn registry packages, including import path strategies and when to prefer prop-level customization.
  • Section-level recipes (hero, testimonial/logo rail, feature grid) and a validation checklist for accessibility, responsiveness, performance, and maintainability.

Quick Start

Create a hero section using warp-background, animate the heading with blur-fade, and add a shiny-button CTA while ensuring keyboard accessibility and mobile responsiveness.

Frequently Asked Questions about magic-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Magic UI components to a Next.js project using Tailwind CSS?▼

When adding Magic UI components, common constraints include missing global CSS keyframes, incorrect shadcn initialization, and improper import paths. You must also validate keyboard accessibility and mobile responsiveness to avoid integration issues.

Can I use Magic UI with shadcn registry packages in my React application?▼

To build a Magic UI hero section, you can combine components like warp-background for the ambient visual, blur-fade for heading animation, and shiny-button for the CTA. This approach quickly creates an interactive, accessible section.

How do I troubleshoot @magicui/* installation issues and missing animations?▼

Troubleshooting @magicui/* installations involves checking shadcn initialization, verifying correct component import paths, and ensuring all required dependencies and global CSS keyframes are properly included in your Tailwind CSS project.

What is the best way to build accessible animated hero sections in Next.js?▼

The best way to build accessible animated hero sections in Next.js is using Magic UI recipes. They combine ambient backgrounds and text motion components while enforcing a validation checklist for keyboard accessibility and mobile responsiveness.

Related Skills

Explore More Software Engineering Skills→
broomvabroomva
3

arcan-glass

Implement glassmorphism and dark-first themes with OKLCh tokens for Next.js and Tailwind CSS v4.

Community
Intermediate
ChiejiChieji

frontend-design

Match frontend briefs with production-ready UI components and layouts.

Community
Advanced
owshq-mecowshq-mec
122

ckm:ui-styling

Build accessible React UIs with shadcn/ui components and Tailwind CSS.

Official
Intermediate
shwilliamsonshwilliamson

css-standards

Enforce BEM naming, CSS variables, and responsive patterns for CSS/SCSS.

Community
Basic