Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add YousefNabil-SOC/claude-apex --skill 21st-dev-magicgit clone --depth 1 https://github.com/YousefNabil-SOC/claude-apexWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/yousefnabil-soc/claude-apex/21st-dev-magic)<a href="https://agentmods.dev/skills/yousefnabil-soc/claude-apex/21st-dev-magic"><img src="https://agentmods.dev/badge/skills/yousefnabil-soc/claude-apex/21st-dev-magic/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/yousefnabil-soc/claude-apex/21st-dev-magic"><img src="https://agentmods.dev/badge/skills/yousefnabil-soc/claude-apex/21st-dev-magic.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00027 | $0.00853 |
| Opus 5 | $0.00014 | $0.00426 |
| Sonnet 5 | $0.00005 | $0.00171 |
| Haiku 4.5 | $0.00003 | $0.00085 |
Grade B, and why
21st.dev Magic MCP scanned grade B with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Reads agent configuration directoriesmediumAgent snooping
.claude/, .codex/, .gemini/ hold keys, settings and other credentials a mod has no legitimate need for.
MCP server configured in `~/.claude/settings.json`: How it starts
The opening of the file, as written. The whole thing — 97 lines — stays where its author put it; the contents beside it link to each section on GitHub.
21st.dev Magic MCP — Component Generation Skill
What It Is
21st.dev Magic is an MCP server that generates modern, production-ready UI components from natural language descriptions. It accesses 21st.dev's curated component library and outputs React + TypeScript + Tailwind CSS code directly into your project.
How to Invoke
Describe the component you need naturally. The MCP server tools will be available when the server is running. Common invocation patterns:
"Generate a hero section with animated text reveal and gradient background"
"Create a responsive navigation bar with transparent-to-solid scroll effect"
"Build a pricing card grid with hover animations"
"Design a testimonial carousel with star ratings"
Available Capabilities
Component Generation
- Hero sections, navbars, footers
- Cards, grids, pricing tables
- Forms, inputs, modals, dialogs
- Chat interfaces, AI prompt boxes
- Animated elements, loading states
- Dashboard layouts, sidebars
SVGL Integration
- Professional brand logos as SVG components
- Consistent sizing and color options
- Search by brand name
Best Practices for Prompting
DO
- Be specific about layout: "3-column grid on desktop, single column on mobile"
- Mention animations: "fade in on scroll with staggered delay"
- Specify colors: "use brand primary
#C9A035as accent,#0D1B3Efor text" - Reference style: "luxury aesthetic, not generic SaaS"
- Include interaction: "hover lifts card with shadow, button has magnetic effect"
DON'T
- Don't say just "make a card" — specify what kind, what content, what style
- Don't forget responsive behavior — always mention mobile/tablet/desktop
- Don't skip accessibility — mention ARIA labels, keyboard navigation
- Don't ignore RTL — specify if Arabic/RTL support is needed
Integration with Projects
Generated components land as .tsx files. To integrate:
- Check the component's dependencies (framer-motion, gsap, etc.)
- Place in your project's component directory (e.g.,
src/components/ui/) - Update imports to match your project's alias paths
- Adjust Tailwind classes to match your design tokens
- Add RTL support if bilingual (Arabic/English)
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 97 lines · 27 tokens per session scan B 31b8d1228de9
21st.dev Magic MCP is a skill published in the GitHub repository YousefNabil-SOC/claude-apex (2 stars, last pushed 3mo ago), licensed MIT. It adds 27 tokens to every session and 853 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it B with 1 finding (reads agent configuration directories). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
generic-react-design-system
Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
animation-patterns
Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.
tailwind-theme-builder
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme…
generic-react-ux-designer
Professional UI/UX design expertise for React applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design…
frontend-enhancer
This skill should be used when enhancing the visual design and aesthetics of web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. REQUIRES ui-research skill first. Use this skill for tasks like improving styling, creating responsive designs…
static-page-stack
SOTA stack recommendations for elegant, controlled, semantic static HTML pages — dashboards, post-mortems, technical-investigation reports.