skills.rest
antoniorv6
antoniorv6COMMUNITY
Explore all skills by this author →
Website𝕏@ariosvilaGitHub

magic-ui

Integrate Magic UI components into React/Next.js applications via shadcn registry.

Updated Mar 25, 2026
Search Tags:#React#Next.js#UI development#UI components#Magic UI
One-click install
npx skills add https://github.com/antoniorv6/llm-music-query-eval-tool --skill magic-ui-antoniorv6
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: magic-ui
Source: https://github.com/antoniorv6/llm-music-query-eval-tool/tree/main/.agents/skills/magic-ui
Command: npx skills add https://github.com/antoniorv6/llm-music-query-eval-tool --skill magic-ui-antoniorv6

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill assists in adding, customizing, and troubleshooting Magic UI components within React/Next.js projects, addressing UI selection, installation, and quality checks.

Core Features & Use Cases

  • Component Selection: Identify and integrate Magic UI components like marquee, globe, blur-fade, shiny-button, etc.
  • Build UI Sections: Create hero sections, testimonials, CTA buttons, and feature grids with Magic UI effects.
  • Troubleshooting: Solve issues related to component installation, import, and visual mismatches.
  • Accessibility & Performance: Ensures semantic HTML, keyboard access, performance optimization, and maintainability.

Quick Start

Add a Magic UI component to your React/Next.js project: npx shadcn@latest add @magicui/<component-slug>

Frequently Asked Questions about magic-ui

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

FAQPage Schema
How do I install Magic UI components in a React or Next.js project?▼

Install Magic UI components in React or Next.js using the shadcn registry via the command `npx shadcn@latest add @magicui/<component-slug>`. This Skill provides instructions for installation and integration.

Do I need Tailwind CSS and shadcn to use Magic UI in my application?▼

Yes, Tailwind CSS and shadcn initialization are required to use Magic UI. The Skill provides integration patterns and quality checks specifically built for this Tailwind and shadcn environment.

What UI sections can I build using Magic UI components?▼

You can build hero sections, testimonials, CTA buttons, and feature grids using Magic UI effects. The Skill helps identify and integrate components like marquee, globe, blur-fade, and shiny-button for these sections.

Why is my Magic UI component not importing or rendering correctly in Next.js?▼

Magic UI import or visual mismatches in Next.js often stem from incorrect shadcn registry installation. Use this Skill to troubleshoot component installation, resolve import errors, and fix visual mismatches.

Does adding Magic UI components affect accessibility and performance in React?▼

Magic UI integration includes quality checks for semantic HTML, keyboard access, and performance optimization. This Skill ensures component maintainability and accessibility standards are met during setup.

Related Skills

Explore More Software Engineering Skills→
giuseppe-trisciuogliogiuseppe-trisciuoglio
322

shadcn-ui

Integrate shadcn/ui components in React/Next.js projects with Tailwind CSS.

Community
Intermediate
deomiarndeomiarn

section-builder

Assemble reusable website sections with patterns for heroes, grids, and CTAs.

Community
Basic
freshtechbrofreshtechbro
682

animated-component-libraries

Provide pre-built animated React component libraries for UI development.

Community
Intermediate
yusaduymazyusaduymaz

magic-ui

Add and customize Magic UI components in React and Next.js projects.

Community
Intermediate