القائمة
Module: Frontend UI Implementation with Shadcn and Magic UI
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/lebiraja/skills4agents --skill agent-module-frontend-ui-magic-shadcnيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | agent-module-frontend-ui-magic-shadcn |
| description | Module: Frontend UI Implementation with Shadcn and Magic UI |
agent.module.frontend-ui-magic-shadcn1.0.0productionUse this module when generating rich, highly animated, and premium frontend interfaces in Next.js.
Apply when:
Do not apply when:
Atomic Component Architecture (Next.js + Tailwind + Framer Motion + Shadcn + Magic UI)components/ui/.cn() helper (clsx + tailwind-merge) for dynamic styling rules (located in or ).lib/utilslib/utils.tsapp/globals.css. Do not hardcode absolute magic colors.npx shadcn@latest init to setup components.json and utility files.tailwind.config.js to include Magic UI keyframes and animations (e.g., orbit, marquee, pulse, shine, aurora, shimmer-slide).app/globals.css (e.g., --color-1 to --color-5 for rainbow accents).framer-motion and lucide-react are installed. Run npm install framer-motion clsx tailwind-merge if required.Exit criteria:
components.json, tailwind.config.js, and app/globals.css cleanly unify both libraries without compilation errors./lib/utils.ts (or equivalent) exports a working cn function.npx shadcn@latest add <component_name> (e.g., button, dialog, card, input).mcp_magic-ui_searchRegistryItems to search and find the correct component identifier.mcp_magic-ui_getRegistryItem with includeSource: true to reliably retrieve the exact canonical implementation of the requested Magic UI component from your MCP connection.components/ui/<component>.tsx.Exit criteria:
components/ui/ and is exported cleanly.app/ or components/.magic-card, bento-grid, animated-list, etc., wrapped around solid Shadcn form elements.sm:, md:, lg:).glass-effect class names, text-gradient, or other globals.css utility layers.Exit criteria:
| Decision Area | Preferred Option | Alternative | Selection Rule |
|---|---|---|---|
| Core Primitives (Buttons, Forms, Inputs) | Shadcn UI | Custom Tailwind | Standardize accessible interaction elements using Shadcn primitives. |
| Hero Sections, Animations, Eye-candy | Magic UI | Framer Motion Custom | Use Magic UI elements for premium, vibrant layouts. Build custom with Framer Motion only if unsupported. |
| Magic UI Component Retrieval | MCP Tools (magic-ui) | Web Scraping/Browsing | Native MCP retrieval guarantees up-to-date accurate source code directly from the Magic UI registry. |
<motion.div> hooks have no hydration mismatches in Next.js (prepend "use client"; directive at the top of client-side animation components).next-themes) correctly flips oklch() or hsl() variables inside app/globals.css. Fallback gracefully if conditional rendering disrupts Framer Motion layouts.particles, confetti) to guarantee ~60fps scrolling on lower-end devices.Components must align exactly with the design language (fonts, shadow softness, glass effects) established in globals.css.UI components should act purely as visual layers and not contain business logic.Always query the registry before writing component code to prevent hallucinations.magic-ui MCP connection tools (mcp_magic-ui_getRegistryItem) to pull official pristine source files perfectly.tailwind.config.js extension maps (keyframes, colors) against the required metadata returned by the Magic UI registry.npx shadcn@latest add ... via terminal.call:mcp_magic-ui_searchRegistryItems.call:mcp_magic-ui_getRegistryItem{name: "<item>", includeSource: true}.extend objects, keyframes, etc.) into tailwind.config.js.app/globals.css.Adapt only:
globals.css (e.g. overriding --color-1) when implementing customized branding.animation object inside tailwind.config.js to change loop speeds and durations.