motionsite 是做什麼的？
打造「動態網站」風格：全螢幕循環影片英雄區塊、深色漸層覆蓋層以確保文字可讀性、玻璃效果卡片、文字動畫、互動按鈕，以及滾動觸發的區塊顯示。好的動態網站與緩慢、難以存取的網站之間的差別，就在於下列檢查清單，因此此技能會先建立頁面，再進行稽核。
與 motionsites.ai 無關。此技能不包含任何第三方提示或素材。
可獨立運行： 當您要求建立登陸頁面、英雄區塊或動畫網站時，Claude 會選用此技能，從模板建置頁面，並在回報前執行稽核。
流程
- 一次性取得需求摘要。 品牌名稱、一句承諾、主要行動呼籲、3 到 6 個區塊（功能、見證、定價、常見問題）、語氣（平靜、大膽、俏皮、奢華），以及他們已擁有的任何標誌、顏色或字型。如果使用者未提供任何資訊，請自行選擇方向並說明選擇了哪一個。
- 從專案中選擇技術棧。 現有的 React/Next/Vue/Svelte 專案：在該技術棧中建置元件。空白資料夾且無偏好：使用單一檔案
templates/site.html（無需建置步驟，雙擊即可開啟）。如果他們要求使用 React、Vite、TypeScript 和 Tailwind，則使用templates/Hero.tsx和templates/useReveal.ts。 - 確保影片輕量且合法。 請參閱
references/assets.md。使用使用者自己的素材、生成的片段或已授權的片段，切勿直接連結他人的 CDN。在取得實際素材前，先使用模板內含的 CSS 動畫漸層背景，讓頁面看起來已完工。實際素材的啟用方式為，在.hero-media上填入三個 data 屬性（data-video-mp4、data-video-webm、data-poster）。使用scripts/make_video_assets.sh腳本製作網頁版本（mp4 + webm + poster）。 - 從模板建立頁面。 保留以下部分：英雄區塊（影片 + 覆蓋層 + 標題 + CTA）、一個玻璃導覽列、3 到 6 個包含顯示動畫的內容區塊、頁尾。套用
references/design-recipes.md中的設計配方（字體比例、間距、色盤、玻璃卡片、按鈕狀態、時間設定）。 - 套用效能與可及性規則（如下）。這些不是可選的附加功能；它們是讓頁面在手機上可用的關鍵。
- 稽核。 執行
python3 <skill-dir>/scripts/check_motion.py <site-folder>並修正每個 FAIL。然後在瀏覽器中檢視：桌面和手機寬度、開啟減少動畫模式、JavaScript 在第一個畫面繪製時關閉。詳細資訊請參閱references/performance-accessibility.md。 - 回報已建立的檔案、如何取代佔位影片、稽核結果，以及一個需要注意的事項。
決定品質的規則
- 影片：需包含
muted、loop、playsinline（缺少這些屬性時，行動瀏覽器將拒絕在頁面中播放）、設定poster、preload="metadata"、無音軌。按照模板的做法，在檢查減少動畫和資料節省模式後才從腳本開始播放，讓這些訪客永遠不需下載影片。英雄片段目標大小為 2 到 4 MB，解析度最高 1080p，長度 6 到 12 秒且能乾淨循環。 - 海報是第一個畫面。 訪客首先看到的是海報圖片（或漸層），這也是 Largest Contentful Paint（最大內容繪製）的測量對象。為其設定
fetchpriority="high"和確切尺寸。 - 尊重訪客。 在
prefers-reduced-motion: reduce或資料節省模式啟用時，顯示海報而非播放影片，並關閉動畫。當影片滾出畫面時暫停播放。 - 僅對
transform和opacity設定動畫。 切勿對top、left、width、height或margin設定動畫；這些屬性會強制觸發佈局和手機上的卡頓。 - 文字在影片上要保持可讀性。 在影片和文字之間放置漸層覆蓋層，確保內文文字與最暗和最亮影格之間的對比度至少達到 4.5:1，且切勿將小字直接置於動態畫面上。
- 每個區塊一個想法，每個元素一個動畫。 交錯間隔為 60 到 100 毫秒，持續時間 400 到 800 毫秒，使用 ease-out。如果所有東西都在動，視線就沒有焦點。
- 行動優先。 英雄區塊使用
100svh，而非100vh。在 375 像素寬度下測試；無水平滾動。在小螢幕上考慮使用較輕量或靜態的英雄區塊。 - 真實的內容結構。 一個
h1、地標元素（header、main、footer）、按鈕應為<button>或<a>、連結需有文字、圖片需有alt。 - 擁有自己的素材。 不使用第三方 CDN 影片，字型自行託管或來自字型提供者，授權資訊記錄在
assets/README.md中。
檔案
| 檔案 | 用途 |
|---|---|
templates/site.html | 完整的單一檔案登陸頁面：影片英雄區塊（透過 data 屬性啟用）附 CSS 漸層後備、玻璃導覽列、動畫標題、滾動觸發顯示、卡片、CTA、頁尾 |
templates/Hero.tsx、templates/useReveal.ts | 英雄區塊和滾動顯示鉤子的 React 版本 |
references/design-recipes.md | 字型、顏色、間距、玻璃效果、按鈕、動畫時間、區塊模式 |
references/performance-accessibility.md | 效能預算、減少動畫、影片行為、測試步驟 |
references/assets.md | 影片來源、授權、生成片段、編碼 |
scripts/make_video_assets.sh | ffmpeg：輸入片段轉換為網頁 mp4、webm、poster |
scripts/check_motion.py | 稽核網站資料夾中的上述問題 |