HTML

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

使用 ckm:slides，把粗略想法轉成具策略性的 HTML 簡報，內建投影片策略、文案公式、版型範本與可搭配 Chart.js 的模板。

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

baoyu-post-to-wechat 是一個用於 WeChat Official Account 發佈的技能，支援文章與圖文訊息的瀏覽器流程與 API 流程。可接受 Markdown、HTML 與純文字輸入，並支援以前言中繼資料擷取標題與摘要、Markdown 轉 WeChat 格式、圖片處理，以及用於 Chrome profile 自動化的環境檢查。

baoyu-markdown-to-html 可將 Markdown 轉成適合微信風格發佈的樣式化 HTML。支援主題、程式碼高亮、數學公式、PlantUML、註腳、圖片處理，以及可選的連結引用註記，並可透過 bun 或 npx -y bun 執行。

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 來處理影片剪輯時，可用於標題卡、疊加圖層、字幕、旁白、音訊反應動態，以及場景轉場。它更重視版面配置、時間安排與動畫決策，而不是泛用的、只靠提示詞的影片需求。

hyperframes-cli 是 HyperFrames 的 CLI 技能，可從終端機建立、驗證、預覽與渲染影片專案。可用於專案架構初始化、composition 檢查、編輯預覽、轉錄、TTS、診斷，以及在 AI 輔助影片剪輯工作流程中重複使用 hyperframes-cli。

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 使用。

speed 會啟動一個瀏覽器版 RSVP 快速閱讀器，以 Spritz 風格的 ORP 高亮方式一次顯示一個字。你可以用它快速檢視助理輸出、文章或筆記；流程可預期，會先去除 markdown，再開啟本機閱讀器檔案。

frontend-slides 是一個 Claude Code 技能，用於快速製作具動畫效果的 HTML 簡報，或將 PPT/PPTX 檔案轉成可直接在瀏覽器使用的投影片。當你需要快速產出精緻簡報、希望輸出零依賴，且偏好透過視覺風格探索而不是憑抽象設計猜測時，這個技能特別適合。內容包含 frontend-slides 的使用指引、安裝說明與工作流程建議。

用 wp-block-themes 來處理 WordPress 區塊主題工作：`theme.json`、`templates`、`template parts`、`patterns`、`style variations`，以及 `Site Editor` 除錯。它特別適合設計落地、安裝與使用流程，以及在較少猜測下釐清樣式階層、覆寫、快取與使用者自訂問題。

wp-block-development 技能可協助你更少靠猜測地建立、更新與除錯 WordPress Gutenberg 區塊。適用於 block.json 中繼資料、register_block_type(_from_metadata)、屬性與序列化、supports、動態渲染、deprecations，以及建置工具。這對於影響編輯器與前台一致性的 Frontend Development 任務特別有用。

這份 netlify-forms 指南說明如何在 Netlify 上處理 HTML 表單。可用來新增聯絡表單、意見回饋表單、檔案上傳、垃圾訊息過濾、AJAX 送出，以及自訂感謝頁，且不需要伺服器端程式碼。對 Backend Development 工作流程，以及需要在建置時偵測表單的 JS 渲染應用程式特別有幫助。