aceternity-ui

Name: aceternity-ui
Author: secondsky

github.com/secondskyデザイン・UI2401.5k 回インストール5 週間前に更新

aceternity-ui について

Aceternity UI を使って Next.js の画面を構築するためのスキルです。Tailwind CSS と Framer Motion によるカスタマイズ可能な React コンポーネントを案内し、アニメーションや操作要素の実装に役立ちます。

主な機能

01アニメーション付き React コンポーネント集
02Next.js App Router 対応
03Tailwind CSS と Framer Motion
04TypeScript とダークモード対応
05コンポーネントのソースをプロジェクトに配置

活用シーン

01ランディングページの背景演出
02操作可能な製品カードの作成
03スクロール連動の機能紹介
04アニメーション付きフォームやナビゲーション

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/secondsky/claude-skills --skill aceternity-ui

インストール後、Claude Code で/aceternity-uiを入力して読み込まれたか確認します。

同梱ファイルreferences/component-catalog.mdreferences/quick-start.md

詳細

Aceternity UI スキル

概要

Aceternity UI は、Next.js アプリケーション向けに設計された、プレミアムな本番環境対応の React コンポーネントライブラリです。Tailwind CSS と Framer Motion で構築された、100 種類以上の美しいアニメーション付きインタラクティブコンポーネントを提供します。コンポーネントは shadcn CLI を使ってインストールし、コードベースで直接カスタマイズできます。

主な機能：

アニメーション付きの本番環境対応コンポーネントを 100 種類以上収録
App Router に対応した Next.js 13+ 向け
TypeScript を完全サポート
Tailwind CSS v4+ スタイル（CSS ファーストの設定。JS 設定を使う v3 も動作します）
Framer Motion アニメーション
ダークモード対応
コピー＆ペーストに適した設計（npm パッケージではありません）
カスタマイズ可能な完全なソースコードへのアクセス

前提条件：

Next.js 13+（App Router を推奨）
React 16.8+
Tailwind CSS v4+（CSS ファーストの @import "tailwindcss" と @theme。v3 もサポート）
TypeScript（推奨）
bun、npm、または pnpm を使用する Node.js 20+

インストール

初期設定

新規プロジェクトの場合：

# Create Next.js project (bun preferred)
bunx create-next-app@latest my-app
# or: npx create-next-app@latest my-app
# or: pnpm create next-app@latest my-app

cd my-app

# Select these options:
# - TypeScript: Yes
# - ESLint: Yes
# - Tailwind CSS: Yes
# - src/ directory: Optional
# - App Router: Yes (recommended)
# - Import alias: @/* (default)

shadcn CLI で Aceternity UI を初期化：

# Using bun (preferred)
bunx --bun shadcn@latest init

# Using npm
npx shadcn@latest init

# Using pnpm
pnpm dlx shadcn@latest init

# During setup:
# - Style: New York (recommended)
# - Color: Zinc (or your preference)
# - CSS variables: Yes (recommended)

レジストリの設定：

初期化後、components.json を更新して Aceternity レジストリを追加します。

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@aceternity": "https://ui.aceternity.com/registry/{name}.json"
  }
}

コンポーネントのインストール

shadcn CLI 3.0+ を使用（名前空間付きレジストリ）：

# Install specific component
bunx shadcn@latest add @aceternity/background-beams
# or: npx shadcn@latest add @aceternity/background-beams
# or: pnpm dlx shadcn@latest add @aceternity/background-beams

# Component will be added to: components/ui/background-beams.tsx

手動インストール：

レジストリ方式が機能しない場合は、手動でインストールします。

必要な依存関係をインストールします。

bun add motion clsx tailwind-merge
# or: npm install motion clsx tailwind-merge

ユーティリティ関数を lib/utils.ts に追加します。

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

ui.aceternity.com からコンポーネントコードをプロジェクトにコピーします

安全なインストール

このセットアップでは、複数のリモートコード実行（create-next-app、shadcn init、shadcn add）が行われます。インストール前に、サプライチェーンセキュリティのベストプラクティスに従ってください。

インストール後スクリプトをブロック — npm config set ignore-scripts true（または Bun：デフォルトで無効）
クールダウン期間 — 新しいパッケージバージョンがコミュニティによって審査されるまで、7 日間待ちます
インストール前に監査 — socket package score npm <pkg> を実行するか、socket npm install <pkg> を使ってパッケージを確認します

Socket CLI との連携、クールダウンの設定、ロックファイルの検証、CI による適用を含むセキュリティ設定の全容については、dependency-upgrade スキルを読み込んでください。

コンポーネントのカテゴリ

1. 背景とエフェクト（28 コンポーネント）

ヒーローセクションや全ページレイアウト向けに、目を引くアニメーション付き背景やビジュアルエフェクトを作成します。

主なコンポーネント：

Background Beams - SVG パスに沿って動く、光るアニメーションビーム
Background Gradient - 滑らかなグラデーションとトランジションを備えた背景
Wavy Background - アニメーション付きの波模様
Aurora Background - オーロラをイメージしたアニメーション付きグラデーション
Sparkles - 粒子状のきらめきエフェクト
Meteors - 流れ星のアニメーション
Spotlight - 動的なスポットライトエフェクト
Grid and Dot Backgrounds - 控えめなグリッド／ドット模様
Vortex - 渦巻くアニメーション
Canvas Reveal Effect - Canvas アニメーションでコンテンツを表示

使用例：

"use client";
import { BackgroundBeams } from "@/components/ui/background-beams";

export default function HeroSection() {
  return (
    <div className="h-screen w-full relative">
      <div className="max-w-4xl mx-auto z-10 relative p-8">
        <h1 className="text-5xl font-bold">Welcome</h1>
        <p className="text-xl mt-4">Beautiful animated backgrounds</p>
      </div>
      <BackgroundBeams />
    </div>
  );
}

使用する場面：

視覚的なインパクトが必要なヒーローセクション
アニメーション付き背景を使うランディングページ
奥行きが必要な全画面セクション
ポートフォリオやエージェンシーのウェブサイト
行動喚起を含むマーケティングページ

2. カードコンポーネント（15 コンポーネント）

ホバーエフェクト、アニメーション、3D 変形を備えたインタラクティブなカードです。

主なコンポーネント：

3D Card Effect - CSS のパースペクティブと 3D 変形を使ったカード
Card Hover Effect - 滑らかなホバーアニメーションとトランジション
Expandable Card - コンテンツをさらに表示するために展開するカード
Focus Cards - ホバー時にフォーカス／強調表示されるカード
Card Spotlight - マウスの動きに追従するスポットライトエフェクト
Glare Card - ホログラフィックな光沢エフェクト
Wobble Card - 遊び心のある揺れのアニメーション
Infinite Moving Cards - 自動スクロールするカードカルーセル
Direction Aware Hover - カーソルの方向に応じて変化するホバーエフェクト

使用例：

"use client";
import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";

export function ProductCard() {
  return (
    <CardContainer>
      <CardBody className="bg-gray-50 rounded-xl p-6">
        <CardItem translateZ="50" className="text-2xl font-bold">
          Product Title
        </CardItem>
        <CardItem translateZ="60" as="p" className="text-sm mt-2">
          Product description goes here
        </CardItem>
        <CardItem translateZ="100" className="w-full mt-4">
          <img src="/product.jpg" className="rounded-xl" alt="Product" />
        </CardItem>
      </CardBody>
    </CardContainer>
  );
}

使用する場面：

製品の紹介
機能の強調表示
ポートフォリオの項目
チームメンバーのプロフィール
料金プラン
ブログ記事のプレビュー

3. スクロールとパララックス（5 コンポーネント）

スクロールに基づく魅力的なアニメーションやパララックス効果を作成します。

主なコンポーネント：

Parallax Scroll - パララックススクロールする画像
Sticky Scroll Reveal - スクロール中にコンテンツを表示
Container Scroll Animation - スクロールコンテナーのアニメーション
Hero Parallax - ヒーローセクションのパララックス効果
MacBook Scroll - MacBook スタイルのスクロール操作

使用例：

import { StickyScroll } from "@/components/ui/sticky-scroll-reveal";

const content = [
  {
    title: "Feature One",
    description: "Description of feature one...",
    content: <div>Visual content here</div>
  },
  // More items...
];

export function Features() {
  return <StickyScroll content={content} />;
}

使用する場面：

スクロール操作を取り入れた機能紹介
ストーリーテリングのレイアウト
プロダクトツアー
視覚的な区切りを取り入れた長文コンテンツ
インタラクティブなタイムライン

4. テキストコンポーネント（10 コンポーネント）

見出し、タイトル、インタラクティブなタイポグラフィ向けのテキストアニメーション効果です。

主なコンポーネント：

Text Generate Effect - 文字を一つずつ表示するテキスト
Typewriter Effect - タイピングアニメーション
Flip Words - 単語を回転させるアニメーション
Text Hover Effect - ホバー時に反応するテキスト
Hero Highlight - グラデーションでテキストを強調
Encrypted Text - マトリックス風の暗号化テキスト効果
Colourful Text - グラデーションでアニメーションするテキスト

使用例：

import { TypewriterEffect } from "@/components/ui/typewriter-effect";

const words = [
  { text: "Build" },
  { text: "amazing" },
  { text: "websites", className: "text-blue-500" }
];

export function Hero() {
  return <TypewriterEffect words={words} />;
}

使用する場面：

ヒーロー見出し
注目を集めるタイトル
動的なコンテンツ表示
インタラクティブなランディングページ
アニメーション付き CTA

5. ボタン（4 コンポーネント）

アニメーションや効果を備えた拡張ボタンコンポーネントです。

主なコンポーネント：

Tailwind CSS Buttons - スタイル付きボタンのコレクション
Hover Border Gradient - アニメーションするグラデーションの枠線
Moving Border - 枠線が動くアニメーション
Stateful Button - トランジション付きの複数状態ボタン

使用例：

import { MovingBorder } from "@/components/ui/moving-border";

export function CTAButton() {
  return (
    <MovingBorder duration={2000} className="p-4">
      <span>Get Started</span>
    </MovingBorder>
  );
}

6. ナビゲーション（5 コンポーネント）

モダンなナビゲーションメニューとタブシステムです。

主なコンポーネント：

Floating Navbar - フローティングナビゲーションバー
Navbar Menu - 多機能ナビゲーションメニュー
Tabs - アニメーション付きタブコンポーネント
Resizable Navbar - レスポンシブなナビゲーション
Sticky Banner - 固定表示されるお知らせバナー

7. 入力とフォーム（3 コンポーネント）

拡張されたフォーム入力とファイルアップロードのコンポーネントです。

主なコンポーネント：

Signup Form - アニメーション付きサインアップフォーム
Placeholders and Vanish Input - アニメーションするプレースホルダー付き入力欄
File Upload - ドラッグ＆ドロップでファイルをアップロード

使用例：

import { PlaceholdersAndVanishInput } from "@/components/ui/placeholders-and-vanish-input";

export function SearchBar() {
  const placeholders = [
    "Search for anything...",
    "What are you looking for?",
    "Type to search..."
  ];

  return (
    <PlaceholdersAndVanishInput
      placeholders={placeholders}
      onChange={(e) => console.log(e.target.value)}
      onSubmit={(e) => {
        e.preventDefault();
        console.log("submitted");
      }}
    />
  );
}

8. オーバーレイとポップオーバー（3 コンポーネント）

アニメーション付きのモーダルダイアログとツールチップです。

主なコンポーネント：

Animated Modal - 滑らかなアニメーション付きモーダル
Animated Tooltip - 表示時と非表示時にアニメーションするツールチップ
Link Preview - ホバー時に表示されるリンクプレビューポップオーバー

使用例：

import { Modal, ModalBody, ModalContent, ModalTrigger } from "@/components/ui/animated-modal";

export function BookingModal() {
  return (
    <Modal>
      <ModalTrigger className="bg-black text-white px-4 py-2 rounded-md">
        Book Now
      </ModalTrigger>
      <ModalBody>
        <ModalContent>
          <h2>Booking Details</h2>
          {/* Modal content */}
        </ModalContent>
      </ModalBody>
    </Modal>
  );
}

9. カルーセルとスライダー（4 コンポーネント）

画像スライダーとカルーセルのコンポーネントです。

主なコンポーネント：

Images Slider - 全画面表示の画像スライダー
Carousel - 標準的なカルーセルコンポーネント
Apple Cards Carousel - Apple スタイルのカードカルーセル
Animated Testimonials - お客様の声のスライダー

10. レイアウトとグリッド（3 コンポーネント）

グリッドレイアウトとコンテナーのコンポーネントです。

主なコンポーネント：

Layout Grid - アニメーション付きグリッドレイアウト
Bento Grid - 弁当箱風のグリッド
Container Cover - 全画面コンテナー

11. データと可視化（2 コンポーネント）

データや比較を表示するコンポーネントです。

主なコンポーネント：

Timeline - アニメーション付きタイムラインコンポーネント
Compare - ビフォーアフター比較スライダー

12. カーソルとポインター（3 コンポーネント）

カーソルに追従する効果と操作です。

主なコンポーネント：

Following Pointer - カーソルに追従する要素
Pointer Highlight - カーソル位置のハイライト効果
Lens - 拡大鏡効果

13. 3D コンポーネント（2 コンポーネント）

CSS トランスフォームを使用した 3D 視覚効果です。

主なコンポーネント：

3D Pin - Pinterest スタイルの 3D カード
3D Marquee - 3D 回転マーキー

14. ローダー（2 コンポーネント）

ローディングアニメーションと進捗インジケーターです。

主なコンポーネント：

Multi-step Loader - 複数ステップのローディングアニメーション
Loader - さまざまなローディングスピナー

15. セクションとブロック（3 コンポーネント）

事前に用意されたセクションテンプレートです。

主なコンポーネント：

機能セクション - 機能紹介用のテンプレート
カード - あらかじめデザインされたカードレイアウト
ヒーローセクション - ヒーローセクションのテンプレート

一般的なパターン

ダークモードのサポート

すべての Aceternity コンポーネントは、Tailwind のダークモードクラスを使用してダークモードをサポートします。

<div className="bg-white dark:bg-black text-black dark:text-white">
  {/* Content */}
</div>

レスポンシブデザイン

コンポーネントはデフォルトでレスポンシブです。Tailwind のレスポンシブプレフィックスを使用します。

<h1 className="text-2xl md:text-4xl lg:text-6xl">
  Responsive Heading
</h1>

コンポーネントの組み合わせ

コンポーネントを組み合わせて、複雑なレイアウトを作成できます。

import { BackgroundBeams } from "@/components/ui/background-beams";
import { TypewriterEffect } from "@/components/ui/typewriter-effect";
import { MovingBorder } from "@/components/ui/moving-border";

export default function Hero() {
  return (
    <div className="h-screen relative">
      <div className="z-10 relative flex flex-col items-center justify-center h-full">
        <TypewriterEffect words={words} />
        <MovingBorder>
          <button>Get Started</button>
        </MovingBorder>
      </div>
      <BackgroundBeams />
    </div>
  );
}

ベストプラクティス

1. パフォーマンスの最適化

「use client」ディレクティブを使用する - Aceternity コンポーネントは Framer Motion を使用するため、クライアント側でのレンダリングが必要です。

"use client";
import { Component } from "@/components/ui/component";

負荷の高いコンポーネントを遅延読み込みする：

import dynamic from 'next/dynamic';

const HeavyBackground = dynamic(
  () => import('@/components/ui/background-beams'),
  { ssr: false }
);

2. アクセシビリティ

ARIA ラベルを追加する：

<button aria-label="Open menu">
  <MenuIcon />
</button>

キーボードナビゲーションを確保する：

<div role="button" tabIndex={0} onKeyDown={handleKeyDown}>
  Interactive element
</div>

3. カスタマイズ

className を使用してスタイルを上書きする：

<BackgroundBeams className="opacity-50" />

コンポーネントのソースを直接変更する - コンポーネントはプロジェクトにコピーされるため、編集できます。

// components/ui/background-beams.tsx
export function BackgroundBeams({ className, myCustomProp }: Props) {
  // Customize as needed
}

4. 型安全性

プロパティの型に TypeScript を使用する：

interface CardProps {
  title: string;
  description: string;
  image?: string;
}

export function Card({ title, description, image }: CardProps) {
  // Component implementation
}

トラブルシューティング

よくある問題

1. 「Module not found: motion」

bun add motion
# or: npm install motion

2. 「cn is not defined」 lib/utils.ts に cn ヘルパー関数があることを確認してください。

3. コンポーネントがアニメーションしない ファイルの先頭に「use client」ディレクティブがあることを確認してください。

4. Tailwind クラスが機能しない Tailwind がセットアップされていることを確認してください。Tailwind v4（CSS ファースト）の場合、globals.css では単一のディレクティブで Tailwind をインポートします。

@import "tailwindcss";

（Tailwind v3 を引き続き使用している場合は、同等の設定は 3 つのディレクティブ @tailwind base; @tailwind components; @tailwind utilities; です。）

5. ダークモードが機能しない Tailwind v4 の場合、カスタムバリアントを使用して CSS でダークモードを設定します（例：クラスベースの方式では @custom-variant dark (&:where(.dark, .dark *));）。Tailwind v3 では、tailwind.config.ts に darkMode: "class" を設定します。

トークン効率

このスキルを使用すると、以下のようにトークンを大幅に節約できます。

事前に精査されたコンポーネントの選択 - コンポーネントの選択肢を調べる手間を約 3k トークン削減
インストール手順 - セットアップの問題をデバッグする手間を約 2k トークン削減
コンポーネントの分類 - 適切なコンポーネントを探す手間を約 2k トークン削減
使用例 - 定型コードを記述する手間を約 2k トークン削減
トラブルシューティングガイド - よくある問題をデバッグする手間を約 1k トークン削減

削減量の推定値：実装ごとに約 10k トークン（65～70% 削減）

防止できるエラー：

motion 依存関係の不足
shadcn CLI の初期化ミス
cn ユーティリティ関数の不足
「use client」ディレクティブの不足
レジストリ設定の誤り
Next.js 設定の誤り（Pages Router と App Router の違い）

参照資料を読み込むタイミング

タスクの内容に応じて参照ファイルを読み込みます。

ユーザーの質問	読み込む参照資料
新しいプロジェクトのセットアップ、インストール、導入方法	`references/quick-start.md`（465 行）
特定のコンポーネント、コンポーネントのカテゴリ、CLI コマンドの検索	`references/component-catalog.md`（635 行）
使用例、パターン、トラブルシューティング	メインの SKILL.md（このファイル）

参照資料の概要：

quick-start.md - 5 分でできるセットアップガイド、最初のコンポーネント例、トラブルシューティング、プロジェクト構成
component-catalog.md - インストールコマンドと使用例を含む、100 以上のコンポーネントの完全な一覧

追加リソース

公式ドキュメント：https://ui.aceternity.com/docs
コンポーネントギャラリー：https://ui.aceternity.com/components
Shadcn UI：https://ui.shadcn.com
Framer Motion：https://www.framer.com/motion
Tailwind CSS：https://tailwindcss.com

ライセンス

このスキルのドキュメントは、MIT License の下で提供されています。Aceternity UI のコンポーネントには独自のライセンスが適用されます。詳細は https://ui.aceternity.com をご確認ください。

最終更新日：2025-12-08 バージョン：1.1.0 メンテナー：Claude Skills Maintainers

Markdown 対応

ログインしてコメント

基本情報

作者: secondsky
リポジトリ: secondsky/claude-skills
カテゴリ: デザイン・UI
インストール数: 1,526
GitHub スター: 240

問題を報告

aceternity-ui

aceternity-ui について

主な機能

活用シーン

インストール

詳細

Aceternity UI スキル

概要

インストール

初期設定

コンポーネントのインストール

安全なインストール

コンポーネントのカテゴリ

1. 背景とエフェクト（28 コンポーネント）

2. カードコンポーネント（15 コンポーネント）

3. スクロールとパララックス（5 コンポーネント）

4. テキストコンポーネント（10 コンポーネント）

5. ボタン（4 コンポーネント）

6. ナビゲーション（5 コンポーネント）

7. 入力とフォーム（3 コンポーネント）

8. オーバーレイとポップオーバー（3 コンポーネント）

9. カルーセルとスライダー（4 コンポーネント）

10. レイアウトとグリッド（3 コンポーネント）

11. データと可視化（2 コンポーネント）

12. カーソルとポインター（3 コンポーネント）

13. 3D コンポーネント（2 コンポーネント）

14. ローダー（2 コンポーネント）

15. セクションとブロック（3 コンポーネント）

一般的なパターン

ダークモードのサポート

レスポンシブデザイン

コンポーネントの組み合わせ

ベストプラクティス

1. パフォーマンスの最適化

2. アクセシビリティ

3. カスタマイズ

4. 型安全性

トラブルシューティング

よくある問題

トークン効率

参照資料を読み込むタイミング

追加リソース

関連スキル

ライセンス

コメント