作品集輪播互動
當變更首頁的專案展示輪播或「作品」頁面的圖形設計輪播時使用此技能。如果使用者說要使用或參考此技能，直接實作相關模式並根據要求調整其內容。
專案背景
此網站是由 build_site.mjs 產生的靜態作品集，共用行為在 site.js、樣式在 site.css。實作應保持原生於該架構。請勿安裝 React Bits、加入 React 執行環境、設定授權金鑰或複製專有元件。React Bits 的 Prism Carousel 與 Album Rail 僅作為視覺/互動參考。
保留網站現有的色彩調色盤、字體與設計代碼。僅輪播請求並不授權變更這些項目。確保目前頁面內容與路由正常運作，並確保藝術作品完全可見，不發生意外裁剪（在藝術作品本身必須保持完整之處，使用包含式圖片縮放）。
首頁：Prism 風格精選作品
首頁的 #featured 區段以置中、矩形的 coverflow 呈現專案。每個專案是一個投影片，包含其圖片與專案/問題描述，因此它們作為一個整體一起轉場。
- 將一個專案保持在中央顯眼位置；將相鄰的專案顯示為逐漸變窄、變小、變暗/去飽和的預覽，分別位於兩側。
- 導航時，將整個投影片（圖片與文字）以平滑的 coverflow 轉場帶入焦點，並在活動圖片上帶有簡短、節制的光掃效果。
- 支援上一步/下一步按鈕、直接進度點、水平指標拖曳/滑動、舞台滾輪捲動，以及當舞台聚焦時的左右鍵盤方向鍵。在第一個與最後一個專案時循環。
- 將中央圖片保持在矩形框架內，並保留其完整構圖。將可讀的描述文字直接分組在對應圖片下方。
- 維持可存取的標籤、焦點可見性、對離螢幕投影片使用
aria-hidden，以及對選取指示器宣告目前狀態。防止拖曳意外開啟專案連結。 - 在窄螢幕上，保留相同的圖片加描述關係與可用的控制項；縮小尺寸與間距，而不是裁剪活動的藝術作品。
「作品」頁面：專輯軌道風格圖形藝廊
#ideas 圖形設計區段是一次顯示一張圖片的水平扇形/coverflow 排版，展示圖形設計作品。靈感來自 Album Rail 的分層專輯封套，但使用此網站自己的藝術作品與矩形呈現。
- 將一張固定尺寸的矩形圖片置中。將相鄰的圖片以逐漸變小的比例、輕微旋轉和較低不透明度扇形排列在兩側；在軌道後方使用柔和的模糊矩形背景。
- 請勿加入藤蔓、唱片、黑膠碟片或唱盤播放器裝飾。不要將藝廊變成一排通用卡片。
- 保持藝廊聚焦在藝術作品上。選取項目的標題可顯示其標題與學科/類別；請勿為這些藝廊項目添加專案描述。
- 在舞台滾輪捲動、上一步/下一步按鈕、水平拖曳/滑動與左右鍵盤方向鍵上，一次前進一個項目。點擊可見的側邊圖片可選取它。在整個收藏中循環。
- 將
Limitless排除在此圖形藝廊之外。其行動 UI/UX 螢幕與解釋性描述應屬於它們自己的專屬區段，螢幕應一起顯示為單獨的應用設計展示。 - 保留圖片長寬比，並在框架內顯示完整的設計。使軌道具有回應性，同時不讓投影片溢出造成頁面層級的水平捲動。
實作工作流程
- 在編輯前檢查目前的標記產生器、行為與 CSS。現有的進入點為
build_site.mjs（#featured、#ideas以及專屬的 Limitless 區段）、site.js（[data-prism-carousel]與[data-design-carousel]）和site.css（.prism-*與.design-*規則）。行號可能改變；請依這些選擇器搜尋。 - 僅修改被請求的輪播或區段。保持資料驅動的專案內容與現有連結；不要將內容複製到硬編碼的投影片中。
- 保持指標、滾輪、按鈕、鍵盤與點擊互動與上述行為一致。避免全域捲動劫持；僅在指標位於輪播舞台上方時才捕捉滾輪輸入。
- 尊重
prefers-reduced-motion，提供可見的鍵盤焦點，並確保隱藏的投影片無法接收焦點或指標輸入。 - 當要求驗證或預覽時，檢查首頁與「作品」頁面在桌面與窄寬度下的顯示，包括圖片適應、轉場、控制項以及獨立的 Limitless 區段。