Html

frontend-slidesは、ゼロからアニメーション豊かなHTMLプレゼンテーションを作成したり、PowerPointファイルを変換したりするのに役立ちます。講演、ピッチデック、ワークショップ、社内デモ、そしてUI Design向けのfrontend-slidesで、見た目の検討を重視したいとき、ブラウザ出力をゼロ依存で使いたいとき、1つのビューポートに収まるスライドが必要なときに、このfrontend-slidesスキルを使ってください。

ckm:slides でラフなアイデアから、スライド戦略・コピーライティングの型・レイアウトパターンと Chart.js 対応テンプレ付きの戦略的HTMLスライドを生成できます。

optimize skill は、読み込み速度、描画、アニメーション、画像、バンドルサイズにまたがる UI パフォーマンス問題を診断し、改善するための skill です。遅い、もたつく、カクつく Web 体験を扱うときに、測定を起点にした体系的な optimize ガイドが必要ならこれを使ってください。

baoyu-post-to-wechat は、WeChat Official Account への記事投稿や画像付き投稿に対応した公開用スキルです。ブラウザ操作と API の両方のフローを備え、Markdown、HTML、プレーンテキスト入力をサポートします。frontmatter からのタイトル・要約抽出、Markdown から WeChat 形式への変換、画像処理、Chrome プロファイル自動化のための環境チェックにも対応しています。

baoyu-markdown-to-htmlは、MarkdownをWeChat風のスタイル付きHTMLに変換するスキルです。テーマ、コードハイライト、数式、PlantUML、脚注、画像処理、任意のリンク引用に対応し、`bun` または `npx -y bun` で実行できます。

guizang-ppt-skillは、編集誌×e-inkスタイルの単一HTMLファイルでスライドデッキを作成するためのプレゼンテーションスキルです。ローンチ、登壇、デモ向けに、横スワイプで進むデッキを、強いタイポグラフィ、WebGL背景、再利用しやすいレイアウトで素早く組み立てられます。guizang-ppt-skillのガイドを使えば、同じ品質のデッキをより短時間で繰り返し生成できます。

hyperframes-registry は、再利用可能な HyperFrames の registry アイテムを、迷いを減らしながらインストールして接続するのに役立ちます。`hyperframes add` の実行、blocks と components の見分け、スニペットの統合、`index.html` への block の接続、そしてデザイン実装や registry 検出のための `hyperframes.json` の path マッピング確認に使えます。

gsapは、HyperFramesのコンポジション向けの実用的なアニメーションリファレンスです。gsap.to()、from()、fromTo()、gsap.timeline()のどれを使うべきかを判断し、適切なvars、easing、stagger、transform、パフォーマンス最適化のパターンを適用するのに役立ちます。入場アニメーション、画面遷移、再利用可能なデザイン演出を、実装にそのまま使える形でまとめたいときに、このgsapガイドを使ってください。

hyperframes は、HyperFrames で HTML ベースの動画コンポジションを構築するためのワークフロースキルです。タイトルカード、オーバーレイ、字幕、ナレーション、音に反応するモーション、シーン遷移など、Video Editing 向けに構造化されたコードファーストの hyperframes が必要なときに使えます。汎用的なプロンプトだけの動画依頼よりも、レイアウト、タイミング、アニメーションの設計を重視します。

hyperframes-cli は、ターミナルから動画プロジェクトを作成・検証・プレビュー・レンダリングするための HyperFrames CLI スキルです。プロジェクトの雛形作成、composition の lint、編集内容のプレビュー、文字起こし、TTS、診断、そして AI 支援の動画編集ワークフローで再現性のある hyperframes-cli の利用に適しています。

infocardは、HTMLとCSSをページ内に直接埋め込むことで、Markdownで編集記事風の情報カードを作成できるスキルです。要約、トピックのスナップショット、ハイライトパネル、イベントカード、比較ブロックなど、意図的にデザインされた見た目が求められるUI Design向けコンテンツに適しています。図解やデータ可視化向けではないため、その用途には専用の図表スキルを使ってください。

architecture は、HTML と CSS を使ってレイヤー構成のシステム図を作るためのダイアグラム作成技能です。色分けされたセクション、グリッドレイアウト、明確なコンポーネント階層を備えています。ユーザー／アプリケーション／データ／インフラの図、マイクロサービスの構成図、エンタープライズアーキテクチャに最適です。Diagramming の出力で、素早く編集しやすい architecture を求めるなら、汎用プロンプトの代わりに使うのが効果的です。

ui-webは、WCAG 2.1 AAのチェック、十分なコントラスト、見やすいコントロール、ダークモードに強いTailwindパターンを使って、Web UIコンポーネントの設計とスタイル調整を支援します。React系のフロントエンドで、実務的なUIデザイン指針が必要なときに使うことで、アクセシビリティを高め、迷いを減らせます。

web-design-guidelines は、アクセシブルでレスポンシブな Web UI を設計・レビュー・修正するための、フレームワーク非依存のガイドです。セマンティックな HTML、WCAG 2.2 の確認、フォーム、フォーカス状態、コントラスト、ダークモード、パフォーマンス、レイアウト判断まで、HTML・CSS・JS をまたいで活用できます。

inline SVGを使った洗練されたダークテーマのアーキテクチャ図を、単体のHTMLファイルとして作成します。architecture-diagramスキルは、システムアーキテクチャ、インフラ、クラウド、セキュリティ、ネットワークトポロジーの図に最適化されており、ブラウザですぐ使えるビジュアルを、意味のある色分け、明確なコンポーネント関係、一貫した技術スタイルで提供します。

pptx-posters は、PowerPoint で扱いやすい形での納品、PDF 書き出し、または PPTX 変換に向けて、HTML/CSS で研究ポスターを作成するのを支援するスキルです。このスキルは、ユーザーが明確に PPTX ポスターまたは PowerPoint での編集を必要としている場合にのみ使ってください。一般的な研究ポスターなら、通常は latex-posters のほうが適しています。

redesign-existing-projects は、既存のWebサイトやアプリをプレミアム品質へ引き上げるための skill です。現在のデザインを監査し、ありがちなAIっぽいパターンを見つけ出し、機能を壊さずにハイエンドなデザイン実装を適用します。CSSフレームワークでもプレーンなCSSでも動作します。

speed は、Spritz 風の ORP ハイライトを使って 1 語ずつテキストを表示する、ブラウザベースの RSVP スピードリーダーを起動します。アシスタント出力、記事、メモを素早く確認したいときに使えます。Markdown を除去してローカルのリーダーファイルを開く、予測しやすいワークフローになっています。

frontend-slidesは、アニメーションを多用したHTMLプレゼンテーションを作成したり、PPT/PPTXファイルをブラウザ対応のスライドデッキに変換したりするためのClaude Codeスキルです。仕上がりの良いデッキを素早く作りたいとき、依存関係なしの出力が必要なとき、抽象的なデザイン推測よりも見た目を試しながら詰めたいときに適しています。frontend-slidesの使い方、導入メモ、ワークフローのヒントが含まれています。

WordPressのブロックテーマ作業では、wp-block-themesを使うと便利です。theme.json、テンプレート、テンプレートパーツ、パターン、スタイルバリエーション、Site Editor のデバッグまで幅広く対応できます。デザイン実装や導入・利用の流れに向いており、スタイル階層、上書き、キャッシュ、ユーザーによるカスタマイズの問題を、勘に頼らず整理して解決しやすくするために作られています。

wp-block-development は、WordPress の Gutenberg ブロックをより少ない試行錯誤で作成・更新・デバッグできるようにするスキルです。`block.json` のメタデータ、`register_block_type(_from_metadata)`、attributes と serialization、supports、dynamic rendering、deprecations、build tooling に使えます。特に、エディターとフロントエンドの一致に影響する Frontend Development タスクで効果を発揮します。

Netlify 上で HTML フォームを扱うための netlify-forms ガイドです。お問い合わせフォーム、フィードバックフォーム、ファイルアップロード、スパムフィルタリング、AJAX 送信、サーバーサイドコードなしのカスタム完了ページ追加に役立ちます。Backend Development のワークフローや、ビルド時のフォーム検出が必要な JS レンダリングアプリにも有用です。