{
  "id": "animation-ui-feedback",
  "theme": "animations",
  "type": "code",
  "sourceCategory": "motion",
  "kind": "motion",
  "genre": "web-interaction",
  "title": "ボタンとカードの操作フィードバック",
  "description": "ホバー 押下 読み込み 成功状態を統一する",
  "prompt": "Create a reusable micro-interaction system for {{components}} in the existing application. The intended feel is {{feel}}. Define motion tokens for duration, easing, distance and scale. Cover hover, keyboard focus, pressed, loading, success and disabled states where relevant. Keep feedback immediate and restrained, preserve the layout footprint and prevent accidental double submission during loading. Use existing component APIs rather than duplicating components. For this UI task, prefer CSS and the Web Animations API or an animation library already installed. Do not introduce Three.js or a new animation dependency unless this specific effect requires it. Animate transform and opacity where possible, avoid layout thrashing, and preserve existing semantic HTML, focus order and interaction behavior.\n\nImplementation constraints:\nFirst inspect the existing repository and installed versions. Reuse its routing, styling, build tools and dependency conventions. Use React Three Fiber only if the project already uses it or the integration is clearly justified; otherwise use the existing Three.js integration or a minimal isolated component. Do not assume version-specific APIs: check the installed package documentation and types. Do not change unrelated pages or silently replace the application architecture. Explain any required new dependency before adding it. Dispose GPU resources, remove event listeners and stop rendering when the component is not visible. Respect prefers-reduced-motion and provide a readable non-WebGL fallback. Keep links and controls in accessible HTML above the canvas. Return the changed files, configuration knobs, tests performed and known limitations.\n\nAcceptance criteria:\n- All interactive states remain visually distinguishable without relying on motion alone.\n- Touch users receive feedback without depending on hover.\n- Focus rings remain visible and disabled elements do not look actionable.\n- Async success is announced accessibly where appropriate and focus is not unexpectedly moved.\n- Reduced-motion mode removes translation and spring overshoot while keeping state changes clear.",
  "variables": [
    {
      "key": "components",
      "label": "対象",
      "default": "primary buttons, selectable cards and save actions",
      "required": true
    },
    {
      "key": "feel",
      "label": "雰囲気",
      "default": "precise, calm and responsive",
      "required": true
    }
  ],
  "notes": [
    "画像ではなく、既存コードベースで実装を行う開発エージェント向けプロンプト。"
  ],
  "outputArtifact": "既存リポジトリに組み込んだ再利用可能なコンポーネントと設定、必要なスタイルまたはシェーダー、実行可能なデモ、変更ファイル一覧、検証結果と既知の制約",
  "modelPolicy": "model-agnostic coding agent",
  "aspectRatio": null,
  "referenceImageRequired": false,
  "transparentOutputRequested": null,
  "ageConstraint": null,
  "acceptanceCriteria": [
    "All interactive states remain visually distinguishable without relying on motion alone.",
    "Touch users receive feedback without depending on hover.",
    "Focus rings remain visible and disabled elements do not look actionable.",
    "Async success is announced accessibly where appropriate and focus is not unexpectedly moved.",
    "Reduced-motion mode removes translation and spring overshoot while keeping state changes clear."
  ],
  "keywords": [
    "アニメーション",
    "UI",
    "操作感"
  ],
  "defaultPrompt": "Create a reusable micro-interaction system for primary buttons, selectable cards and save actions in the existing application. The intended feel is precise, calm and responsive. Define motion tokens for duration, easing, distance and scale. Cover hover, keyboard focus, pressed, loading, success and disabled states where relevant. Keep feedback immediate and restrained, preserve the layout footprint and prevent accidental double submission during loading. Use existing component APIs rather than duplicating components. For this UI task, prefer CSS and the Web Animations API or an animation library already installed. Do not introduce Three.js or a new animation dependency unless this specific effect requires it. Animate transform and opacity where possible, avoid layout thrashing, and preserve existing semantic HTML, focus order and interaction behavior.\n\nImplementation constraints:\nFirst inspect the existing repository and installed versions. Reuse its routing, styling, build tools and dependency conventions. Use React Three Fiber only if the project already uses it or the integration is clearly justified; otherwise use the existing Three.js integration or a minimal isolated component. Do not assume version-specific APIs: check the installed package documentation and types. Do not change unrelated pages or silently replace the application architecture. Explain any required new dependency before adding it. Dispose GPU resources, remove event listeners and stop rendering when the component is not visible. Respect prefers-reduced-motion and provide a readable non-WebGL fallback. Keep links and controls in accessible HTML above the canvas. Return the changed files, configuration knobs, tests performed and known limitations.\n\nAcceptance criteria:\n- All interactive states remain visually distinguishable without relying on motion alone.\n- Touch users receive feedback without depending on hover.\n- Focus rings remain visible and disabled elements do not look actionable.\n- Async success is announced accessibly where appropriate and focus is not unexpectedly moved.\n- Reduced-motion mode removes translation and spring overshoot while keeping state changes clear.",
  "execution": {
    "status": "not-run",
    "actualModel": null,
    "modelVersion": null,
    "executionDate": null,
    "tokens": null,
    "cost": null,
    "elapsedSeconds": null,
    "output": null
  },
  "provenance": {
    "source": "Kumyu Academy creative templates",
    "sourceFile": "apps/academy/content/creative/templates/ja/animations.json",
    "sourceCommit": "33a0ac4473d64ec443e809d754051109d9324435",
    "sourceBlob": "502e10eb3be268edb033415c536bf21d9626812c",
    "sourceSha256": "e0d6f861d18b0fb8cb4615ad412d369c2c4d0211f8bd92e9b578ee8f776ba9d6",
    "originalJsonPointer": "/templates/1",
    "originalPromptSha256": "572cd888a98efa46442654d4abdf6a35774be6fe36584f8185b7fe90ef86302d",
    "publicPromptSha256": "572cd888a98efa46442654d4abdf6a35774be6fe36584f8185b7fe90ef86302d",
    "originalDefaultPromptSha256": "ff74d2cd0935e35dc074182c2b4058494bb00db9b80dbb23af6afa557e8b7f59",
    "publicDefaultPromptSha256": "ff74d2cd0935e35dc074182c2b4058494bb00db9b80dbb23af6afa557e8b7f59",
    "transformations": [],
    "defaultInterpolationMatchesOriginal": true,
    "validationNotes": []
  }
}