secondsky/claude-skills
Overview
This skill provides Aceternity UI: a collection of 100+ animated, production-ready React components built for Next.js with Tailwind CSS and Framer Motion. Components target hero sections, parallax, 3D effects, cards, loaders, and more, with full TypeScript support and dark mode. Components are copy-paste friendly and installable via the shadcn CLI or manually for direct customization.
How this skill works
Components are distributed as source files you add to your project (shadcn registry or manual copy). Most components require client-side rendering and Framer Motion; use the "use client" directive and lazy-load heavy visuals with dynamic imports when needed. Styling is Tailwind-first and components accept className overrides; utility helpers like a cn/twMerge wrapper are recommended. The shadcn registry can install named Aceternity components into components/ui automatically.
When to use it
- Add high-impact animated backgrounds or hero sections on marketing and landing pages
- Create interactive product cards, 3D effects, or motion-rich portfolios
- Implement scroll-driven parallax, sticky reveals, or storytelling layouts
- Enhance typography with typewriter, flip, or highlight text effects
- Swap in animated modals, tooltips, or loading indicators for polish
Best practices
- Use "use client" for components that rely on Framer Motion and client-side state
- Lazy-load heavy background or canvas components with next/dynamic and ssr: false
- Keep accessibility in mind: add ARIA labels and keyboard handlers to interactive elements
- Override styles with className and edit copied source files for bespoke behavior
- Prefer TypeScript prop types for safety and maintainability
Example use cases
- Hero section with BackgroundBeams, TypewriterEffect, and a MovingBorder CTA
- Product gallery using 3D Card effects and an Infinite Moving Cards carousel
- Long-form storytelling page with Sticky Scroll Reveal and Parallax images
- Landing page hero with Aurora Background, animated headings, and CTA animations
- Admin or marketing dashboard with animated loaders and interactive tooltips
FAQ
Components are provided as source files; you can install via the shadcn registry or copy files manually into components/ui for full control.
What Tailwind and Next versions are supported?
Designed for Next.js 13+ (App Router recommended) and Tailwind CSS v3+, with TypeScript and Node 18+ recommended.
21 skills
This skill helps you implement Aceternity UI components in Next.js projects with Tailwind and Framer Motion for stunning animated interfaces.
This skill helps you build installable PWAs with offline support, service workers, and install prompts to enhance reliability and engagement.
This skill generates Jest unit tests for JavaScript and TypeScript code, including mocks, describe blocks, and coverage-friendly patterns.
This skill helps you implement mobile app testing strategies across unit, integration and E2E layers with React Native, iOS and Android tooling.
This skill helps you accelerate JavaScript/TypeScript testing with Vitest, providing fast, reliable unit and integration tests and robust mocking.
This skill helps you refactor React components by applying composition patterns to reduce boolean props and design flexible, reusable APIs.
This skill helps design mobile-first responsive interfaces by guiding breakpoints, touch targets, and progressive enhancement for performance and accessibility.
This skill helps you organize keywords into topic clusters, plan pillar content, and optimize internal linking for better search visibility.
This skill helps you implement scalable API pagination using offset, cursor, and keyset strategies to optimize large datasets.
This skill helps you apply HTTP security headers to harden web apps, guarding against XSS, clickjacking, and MIME sniffing.
This skill helps you build high-performance Bun HTTP servers, handle requests, routing, and responses with practical code patterns.
This skill helps you implement Inspira UI animated Vue/Nuxt components quickly with Tailwind v4 and motion-v, boosting visual impact.
This skill helps you create comprehensive design systems with tokens, components, and documentation for consistent UI across teams.
This skill enforces standardized API error handling with structured responses, logging, and recovery patterns to improve reliability and observability.
This skill enables parallel execution with Bun Web Workers and worker_threads to boost performance and responsiveness in complex tasks.
This skill helps you design intuitive user experiences with loading, error, empty states and accessible microinteractions.
This skill reduces API payloads, enables efficient caching, and applies compression to improve response times and bandwidth usage.
This skill generates comprehensive technical specifications for software projects, guiding architecture, API design, testing strategies, and documentation.
This skill guides backend WooCommerce PHP development, ensuring code follows project conventions, naming, hooks, tests, and WordPress standards.
This skill helps you design and configure API gateways for routing, security, and performance across Kong, Nginx, AWS API Gateway, and Traefik.
This skill helps you build full-stack Cloudflare Workers apps with Hono, Remix, Next.js, Astro, SvelteKit, Qwik, or Nuxt.
