docs: add data-anim Inspector page and demo gif

Add Inspector docs (en/ja), sidebar navigation, demo gif converted from
screen recording, and README section. Also add docs:dev/docs:build scripts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ryo-manba

README.md

@@ -39,6 +39,10 @@ import 'data-anim';
 - Visit the [Documentation](https://ryo-manba.github.io/data-anim/) to view the full API reference.
 - Try the [Playground](https://ryo-manba.github.io/data-anim/playground/) to experiment with animations interactively.
 
+## data-anim Inspector
+
+[data-anim Inspector](https://chromewebstore.google.com/detail/data-anim-inspector/cocpaadjbnbeakonflehnoefjlkhpnmb) — Chrome extension for browsing and previewing animations in the browser.
+
 ## Documentation
 
 Visit [https://ryo-manba.github.io/data-anim/](https://ryo-manba.github.io/data-anim/) to view the full documentation.

docs/public/inspector-demo.gif

@@ -29,6 +29,12 @@ const sections = [
       { href: getLocalizedPath('docs/anti-fouc', locale, base), label: t.antiFouc },
     ],
   },
+  {
+    title: t.tools,
+    links: [
+      { href: getLocalizedPath('docs/inspector', locale, base), label: t.inspector },
+    ],
+  },
   {
     title: t.guides,
     links: [

docs/src/components/Sidebar.astro

@@ -30,6 +30,8 @@ export const translations = {
       advanced: 'Advanced',
       responsive: 'Responsive',
       antiFouc: 'Anti-FOUC',
+      tools: 'Tools',
+      inspector: 'data-anim Inspector',
       guides: 'Guides',
       typescript: 'TypeScript',
       integration: 'Integration',
@@ -51,6 +53,8 @@ export const translations = {
       advanced: '応用',
       responsive: 'レスポンシブ',
       antiFouc: 'Anti-FOUC',
+      tools: 'ツール',
+      inspector: 'data-anim Inspector',
       guides: 'ガイド',
       typescript: 'TypeScript',
       integration: 'インテグレーション',

docs/src/i18n/translations.ts

@@ -0,0 +1,30 @@
+---
+layout: ../../layouts/DocsLayout.astro
+title: data-anim Inspector
+description: A Chrome extension to visually browse and preview all data-anim animations.
+---
+
+# data-anim Inspector
+
+[data-anim Inspector](https://chromewebstore.google.com/detail/data-anim-inspector/cocpaadjbnbeakonflehnoefjlkhpnmb) is a Chrome extension that lets you visually browse and preview all data-anim animations directly in the browser.
+
+<img src="/data-anim/inspector-demo.gif" alt="data-anim Inspector demo" width="800" />
+
+## Installation
+
+Install from the [Chrome Web Store](https://chromewebstore.google.com/detail/data-anim-inspector/cocpaadjbnbeakonflehnoefjlkhpnmb).
+
+## Features
+
+- **Browse animations** — View all 30+ built-in animations organized by category (Fade, Slide, Zoom, Bounce, Attention, Rotate).
+- **Live preview** — Click any animation to see it play instantly on a preview element.
+- **Replay All** — Replay all animations on the current page with one click.
+- **Copy attributes** — Copy the `data-anim` HTML attributes to your clipboard so you can paste them directly into your code.
+- **Element inspection** — Select elements on the page to inspect and modify their data-anim attributes in real time.
+
+## Usage
+
+1. Open any page that uses data-anim (or any page — the extension works standalone too).
+2. Click the data-anim Inspector icon in your browser toolbar.
+3. Browse animations by category and click to preview.
+4. Use the copy button to grab the HTML attributes for your code.

docs/src/pages/docs/inspector.mdx

@@ -0,0 +1,30 @@
+---
+layout: ../../../layouts/DocsLayout.astro
+title: data-anim Inspector
+description: data-animのアニメーションをブラウザで確認・プレビューできるChrome拡張機能。
+---
+
+# data-anim Inspector
+
+[data-anim Inspector](https://chromewebstore.google.com/detail/data-anim-inspector/cocpaadjbnbeakonflehnoefjlkhpnmb)は、data-animの全アニメーションをブラウザ上で直接確認・プレビューできるChrome拡張機能です。
+
+<img src="/data-anim/inspector-demo.gif" alt="data-anim Inspector デモ" width="800" />
+
+## インストール
+
+[Chrome ウェブストア](https://chromewebstore.google.com/detail/data-anim-inspector/cocpaadjbnbeakonflehnoefjlkhpnmb)からインストールできます。
+
+## 機能
+
+- **アニメーション一覧** — Fade、Slide、Zoom、Bounce、Attention、Rotateなど、30以上の組み込みアニメーションをカテゴリ別に閲覧。
+- **ライブプレビュー** — アニメーションをクリックするだけで、プレビュー要素上で即座に再生。
+- **Replay All** — 現在のページ上の全アニメーションをワンクリックで再生。
+- **属性コピー** — `data-anim`のHTML属性をクリップボードにコピーし、コードに直接貼り付け可能。
+- **要素インスペクション** — ページ上の要素を選択して、data-anim属性をリアルタイムで確認・変更。
+
+## 使い方
+
+1. data-animを使用しているページ（または任意のページ）を開きます。
+2. ブラウザツールバーのdata-anim Inspectorアイコンをクリック。
+3. カテゴリ別にアニメーションを閲覧し、クリックでプレビュー。
+4. コピーボタンでHTML属性を取得し、コードに貼り付け。

docs/src/pages/ja/docs/inspector.mdx

@@ -28,7 +28,9 @@
     "format:check": "oxfmt --check src/ tests/",
     "test": "vitest run",
     "test:watch": "vitest",
-    "check": "pnpm lint && pnpm format:check && pnpm test && pnpm build"
+    "check": "pnpm lint && pnpm format:check && pnpm test && pnpm build",
+    "docs:dev": "pnpm --filter docs dev",
+    "docs:build": "pnpm --filter docs build"
   },
   "keywords": [
     "animation",