sants2001

21st Frontend Design — Design skill for Claude Code

Design community

Claude Code skill for applying the 21st.dev aesthetic (aceternity/magicui style) to Next.js 15 + shadcn/ui + Tailwind projects.

How to install 21st Frontend Design

This entry records only its repository, not the path inside it, so there is no exact command to give. Open sants2001/21st-frontend-design and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What 21st Frontend Design does

Claude Code skill for applying the 21st.dev aesthetic (aceternity/magicui style) to Next.js 15 + shadcn/ui + Tailwind projects.

Alternatives in Design

Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★

README

21st Frontend Design

A [Claude Code skill](https://docs.claude.com/en/docs/claude-code/skills) for making React/Next.js interfaces feel alive with the 21st.dev aesthetic: shimmering buttons, aurora and mesh-gradient backgrounds, grid-beam heroes, marquee social proof, magnetic hover, spotlight cards, and motion-rich CTAs.

Distilled from 21st.dev's community components (aceternity-ui, magicui, and shadcn extensions) into a concise, pattern-first reference for the Next.js 15 + shadcn/ui + Tailwind stack.

What it does

When the user signals that the visual bar is "premium landing page" (not "admin CRUD"), Claude reaches for this skill to apply the right surface pattern: heroes, buttons, pricing, features, social proof, motion, or background ambience. The skill keeps the core aesthetic consistent: dark-first but calibrated, one accent color per surface, depth via light rather than borders, quiet but constant motion, tight confident typography, generous spacing.

Typical triggers:

"make this livelier", "more modern", "less flat"
"give it that 21st.dev / aceternity / magicui vibe"
"the hero needs more energy"
"animated gradient background", "shimmery button", "glowing CTA"
"marquee of logos", "bento grid features", "pricing cards"

Structure

SKILL.md                    # Core aesthetic, pattern map, trigger rules
references/
├── backgrounds.md          # Aurora, grid beams, spotlight, mesh gradients
├── buttons.md              # Shimmer, glow border, magnetic hover
├── features.md             # Bento grids, hover lift, icon cards
├── motion.md               # Framer Motion and CSS keyframe patterns
├── pricing.md              # Highlighted tiers, gradient borders
├── social-proof.md         # Logo marquees, avatar stacks, testimonials
└── tokens.md               # Color, typography, spacing tokens

`SKILL.md` is the always-loaded entry point. Reference files are loaded on demand when the relevant surface comes up, which keeps context lean.