HTML

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

html-to-image-automation 可協助 agent 透過 Rube MCP 使用 Composio 的 Html To Image toolkit，將 HTML 轉換成圖片，並在執行前先以 schema-first 方式探索工具。

artifacts-builder 可協助建立複雜的 Claude HTML artifacts，以 React 18、TypeScript、Vite、Tailwind CSS 與 shadcn/ui 專案形式開發，再打包成單一 bundle.html。最適合需要狀態管理、可重用元件與精緻應用流程的 Frontend Development artifacts。

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

page-cro 是一個 Conversion Rate Optimization skill，用於稽核行銷頁面、釐清轉換目標，找出價值主張、CTA、信任感、摩擦點與社會證明方面的問題，並排定修正優先順序。內含 page-cro 使用指引，以及可進行 HTML 或 URL 檢查的 conversion_audit.py 輔助工具。

md-review 可將包含 unified diff fences 與 severity callouts 的 markdown PR writeups，轉成單一檔案、雙欄式的 HTML code review。它使用 parser、annotation 與 renderer scripts，需要指定 reviewer，支援 BLOCKER/MAJOR/MINOR/NIT 慣例，並保留可存取的嚴重度提示。

collab-proof 可協助 Claude Code 使用者，將 AI 輔助開發 session 轉化為可佐證的協作紀錄，清楚區分開發者決策、Claude 的貢獻、被捨棄的替代方案，以及可用於 retrospectives、作品集、招募與 Knowledge Capture 的 proof artifacts。

email-template-builder 協助團隊設計交易型電子郵件系統，支援 React Email 或 MJML 範本、Resend、Postmark、SendGrid、AWS SES 等服務商整合、預覽工具、i18n、深色模式、送達率檢查與追蹤。最適合 SaaS 與產品團隊，用來把一次性的 HTML email 轉換成可維護的工作流程。

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，再開啟本機閱讀器檔案。