Agent skill · design visual · secondsky
aceternity-ui
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
Why this skill is useful
Provides a library of 100+ animated React components with specific integration patterns for Next.js and Tailwind CSS that the AI wouldn't reliably generate on its own.
What it needs
Requires bun, npm, pnpm installed locally. About 10k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
Aceternity UI Skill Overview Aceternity UI is a premium, production-ready React component library designed for Next.js applications. It provides 100+ beautifully animated and interactive components built with Tailwind CSS and Framer Motion. Components are installed via the shadcn CLI and can be customized directly in your codebase. Key Features: 100+ animated, production-ready components Built for Next.js 13+ with App Router support Full TypeScript support Tailwind CSS v4+ styling (CSS-first config; v3 also works with JS config) Framer Motion animations Dark mode support Copy-paste friendly (not an npm package) Full source code access for customization Prerequisites: Next.js 13+ (App Router recommended) React 16.8+ Tailwind CSS v4+ (CSS-first @import "tailwindcss" and @theme; v3 also supported) TypeScript (recommended) Node.js 20+ with bun, npm, or pnpm Installation Initial Setup For New Projects: Initialize Aceternity UI via shadcn CLI: Configure Registry: After initialization, update components.json to add Aceternity registry: Installing Components Using shadcn CLI 3.0+ (Namespaced Registry): Manual Installation: If the registry method doesn't work, install manually: 1. Install required dependencies: 2. Add utility function to lib/utils.ts: 3. Copy component code from ui.aceternity.com to your project Secure Installation This setup runs multiple remote code executions (create-next-app, shadcn init, shadcn add). Before installing, follow supply chain security best practices: Block post-install scripts — npm config set ignore-scripts true (or Bun: disabled by default) Cooldown period — Wait 7 days for new package versions to be vetted by the community Audit before installing — Run socket package score npm <pkg> or use socket npm install <pkg> to check packages Load the dependency-upgrade skill for full security configuration including Socket CLI integration, cooldown setup, lockfile validation, and CI enforcement. Component Categories 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/aceternity-ui