القائمة
shadcn/ui — copy-paste component library built on Radix primitives, styled with Tailwind CSS, and managed via CLI.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/skeletorflet/opencode-supreme-setup --skill shadcnيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefer local Open Design preview URLs unless the user explicitly asks for external browsing.
| name | shadcn |
| description | shadcn/ui — copy-paste component library built on Radix primitives, styled with Tailwind CSS, and managed via CLI. |
Components are owned by you. No npm dependency. Each component is a file in components/ui/. Modify anything. No lock-in.
npx shadcn@latest add button — installs component + deps. npx shadcn@latest init — sets up config, aliases, CSS variables. npx shadcn@latest diff — see upstream changes.
Built on Radix UI: headless, accessible, unstyled. Dialog, Popover, DropdownMenu, Select, Tabs, Tooltip, Toast, Sheet, etc. Each handles focus trapping, keyboard nav, ARIA attributes.
CSS variables in globals.css. --primary, --secondary, --muted, --accent, --destructive, --border, --ring, --radius. Switch themes by toggling class="dark" on <html>. Customize via CSS variable overrides.
Edit the component file directly. Swap cn() with your own utility. Add props, change styles, wrap with your logic. The registry is a starting point, not a constraint.
JSON-based registry (https://ui.shadcn.com/r/styles.json). Each entry: name, dependencies, registryDependencies, files, tailwind config extras, CSS vars.
In v4, shadcn uses @theme tokens instead of config. --color-primary becomes a Tailwind color. Supports @variant directives.
Keep components/ui flat. Use cn() for merging classes. Only install what you use. Extend components with composition, not by editing the primitive.