CSS

frontend-slides 可協助你從零開始製作充滿動畫效果的 HTML 簡報，或將 PowerPoint 檔轉換成 HTML 簡報。當你需要做簡報、提案 deck、工作坊、內部 demo，或是想用 frontend-slides 進行 UI Design 的視覺探索時，都很適合使用這個 skill；它能輸出零依賴的瀏覽器簡報，並讓投影片精準符合單一視窗尺寸。

使用 frontend-design 來打造具有鮮明風格、可直接上線的前端介面，並維持清楚的視覺主張。這個 frontend-design 技能特別適合 landing pages、dashboards、app shells 與各類元件；在這些場景中，層級、字體、動效與完成度的重要性，和實作本身同樣高。內容也提供以設計優先的 UI 工作流程安裝與使用指引。

使用 design-system skill 來產生或審查 UI 系統、從既有程式碼中擷取 tokens，並在真實 repo 中檢查樣式一致性。

overdrive 是一個 GitHub 技能，適合有雄心的 UI 設計工作，重視情境理解、先提案再規劃，以及極高水準的互動品質。可用來安裝並套用 overdrive，打造電影感轉場、響應式介面與高衝擊力的產品體驗。

typeset 透過修正字體選擇、層級、字級、字重與可讀性，提升 UI 排版，讓文字呈現更有意圖感。當 UI Design 裡的文字看起來普通、前後不一致，或不易快速掃讀時，就適合使用 typeset skill，幫助你建立更清楚的字體系統，減少猜測。

layout 技能可在 UI 看起來扁平、擁擠或排列過於死板時，協助改善間距、層級與整體構圖。它適合處理版面配置、對齊與視覺節奏等問題，提供的是偏實務的 UI Design layout 指南，而不是泛泛而談的樣式建議。當你需要調整結構、釐清群組關係，並改善閱讀動線時，這項技能特別適合。

optimize skill 可診斷並修正 UI 效能問題，涵蓋載入速度、渲染、動畫、圖片與 bundle 大小。當你需要一份結構化的 optimize 效能最佳化指南，針對緩慢、卡頓或不流暢的網頁體驗，以「先量測」為原則進行排查時，就適合使用它。

impeccable 是一個用於 UI 設計與前端開發的 skill，適合打造有辨識度、可投入正式環境的介面。你可以透過 craft、teach 或 extract 工作流塑造設計方向、載入更聚焦的參考資料，並實作更精緻的元件、頁面與 design system 模式；同時也提供更完整的安裝與使用判斷指引。

layout skill 可協助檢查並改善 UI 的構圖、留白、視覺層級、對齊與節奏感。特別適合用於畫面過於擁擠或結構薄弱的介面；使用前需先透過 /impeccable 蒐集必要脈絡。

frontend-design 是一個以情境脈絡為優先的技能，專門用來打造更有辨識度的前端 UI 程式碼。你可以用它把目標受眾、使用情境與品牌語氣，轉化為更成熟的版面配置、字體排印、色彩、動態效果、互動狀態與 UX 文案，適用於頁面、元件與整體流程設計。

harden skill 可協助將前端 UI 打磨到適合正式上線，涵蓋更完善的錯誤處理、空狀態與載入狀態、文字溢出修正、i18n 支援，以及針對真實資料情境的邊界案例覆蓋。

guizang-ppt-skill 是一套簡報技能，可用來打造單一檔案的 HTML 投影片簡報，風格介於編輯雜誌與電子紙之間。它能幫你快速做出適合發表會、演講與 demo 的橫向滑動式簡報，具備強烈排版感、WebGL 背景與可重複使用的版型。搭配 guizang-ppt-skill 指南，可更快、更穩定地產出簡報。

hyperframes-registry 可幫你更少猜測地安裝並串接可重用的 HyperFrames registry 項目。可用來執行 hyperframes add、辨識 blocks 與 components、合併片段、將 blocks 串入 index.html，並依照 hyperframes.json 的路徑對應來進行設計實作與 registry 探索。

gsap 是 HyperFrames 組合內容的實用動畫參考。它能幫你在 `gsap.to()`、`from()`、`fromTo()` 與 `gsap.timeline()` 之間做出選擇，並套用正確的 vars、easing、stagger、transform 與效能模式。當你需要可直接落地實作的進場動畫、轉場效果與可重複使用的設計動效時，就用這份 gsap 指南。

hyperframes 是一個工作流程技能，用於在 HyperFrames 中建立以 HTML 為基礎的影片組成內容。當你需要結構化、以程式碼為核心的 hyperframes 來處理影片剪輯時，可用於標題卡、疊加圖層、字幕、旁白、音訊反應動態，以及場景轉場。它更重視版面配置、時間安排與動畫決策，而不是泛用的、只靠提示詞的影片需求。

vue-best-practices 是一套用於 Vue 3 的 skill，適合程式碼產生、審查與重構。它會引導代理採用 Composition API、`<script setup lang="ts">`、明確的資料流、具 SSR 意識的設計選擇，以及 reactivity、SFC、composables、Router、Pinia 與以 Vite 為基礎的應用程式核心參考。

infocard 讓你直接在頁面中嵌入 HTML 和 CSS，用 Markdown 製作具有編輯風格的資訊卡片。它適合用於摘要、主題快照、重點面板、活動卡片、比較區塊，以及其他看起來經過刻意設計、適合 UI 設計的內容。它不適合圖表或資料視覺化；這類需求請改用專門的圖表或繪圖技能。

architecture 是一個用來建構 HTML 與 CSS 分層系統視圖的繪圖技能，具備色彩區分區塊、格線版面與清楚的元件階層。它特別適合用於使用者／應用／資料／基礎架構圖、微服務地圖，以及企業架構。當你需要快速、可編輯的 Diagramming 輸出時，它比泛用提示詞更適合取代使用。

ui-web 協助你設計與調整網頁 UI 元件，提供 WCAG 2.1 AA 檢查、強對比、清楚可見的控制項，以及適合深色模式的 Tailwind 樣式做法。當你需要實用的 UI 設計指引，能提升無障礙性並減少猜測時，可在 React 風格前端使用這個 ui-web 技能。

web-design-guidelines 是一套不綁框架的指南，用來建立、審查與修正可近用、響應式的網頁 UI。可用在語意化 HTML、WCAG 2.2 檢查、表單、焦點狀態、對比度、深色模式、效能，以及跨 HTML、CSS 和 JS 的版面決策。

使用內嵌 SVG，製作精緻、深色主題的架構圖，並輸出為獨立 HTML 檔案。architecture-diagram 技能專為系統架構、基礎架構、雲端、安全性與網路拓樸圖而設計，提供可直接在瀏覽器開啟的視覺化成果，具備語意化配色、清晰的元件關係與一致的技術風格。

pptx-posters 協助以 HTML/CSS 製作研究海報，方便輸出給 PowerPoint 使用、匯出 PDF，或轉換成 PPTX。只有在使用者明確需要 PPTX 海報或 PowerPoint 編輯時，才應使用這個技能。若是一般研究海報，latex-posters 通常會是更合適的選擇。

redesign-existing-projects 技能可將既有網站與應用升級到精品級質感。它會先檢查現有設計、找出通用的 AI 痕跡，再在不破壞功能的前提下進行高質感的設計實作。可搭配各種 CSS framework 或純 CSS 使用。

fixing-motion-performance 可在不預設更換技術堆疊的情況下，協助稽核並修正 UI 動畫效能問題。當動效卡頓、與捲動連動的效果成本過高，或轉場造成 layout、paint 或 compositing 工作時，特別適合用在前端開發。它能把動畫 bug 轉化成清楚、可直接落到程式碼層級的修正。