Css

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

frontend-design を使うと、明確なビジュアルの方向性を持った、個性のある本番品質のフロントエンド UI を構築できます。この frontend-design skill は、ランディングページ、ダッシュボード、アプリのシェル、各種コンポーネントなど、実装だけでなく階層、タイポグラフィ、モーション、仕上げの精度が重要な場面向けです。デザイン先行の UI 制作に向けたインストール方法と使い方のガイドも含まれています。

design-system skill を使って UI システムを生成・監査し、既存コードからトークンを抽出し、実運用のリポジトリでスタイルの一貫性をレビューできます。

overdriveは、意欲的なUIデザインに向けたGitHub skillです。文脈の把握、提案先行の進め方、そして優れたインタラクション品質を重視しています。映画的なトランジション、レスポンシブなインターフェース、高い訴求力を持つプロダクト体験を実現したいときに、overdriveを導入して活用できます。

typeset は、フォント選択、階層、サイズ、ウェイト、読みやすさを整えることで、UI のタイポグラフィを改善し、テキストに意図を持たせます。UI Design で、文字がありきたりで一貫性がない、または読み取りにくいときに使うと、迷いの少ない明確な টাইポグラフィ体系を作れます。

layoutスキルは、UIが平坦に見える、詰まって見える、あるいは機械的に配置されているときに、余白、階層、構成を整えるのに役立ちます。一般的なスタイリングではなく、UI Design向けの実践的なlayoutガイドとして、レイアウト、整列、視覚的なリズムの問題に使えます。構造的な修正、グルーピングの明確化、より自然な読み順が必要な場面に最適です。

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

impeccable は、個性があり本番品質のインターフェースを構築するための UI デザイン／フロントエンド向けスキルです。`craft`、`teach`、`extract` を使ってデザインの方向性を固め、要点を絞った参考資料を読み込み、洗練されたコンポーネント、ページ、デザインシステムのパターンを実装できます。導入や活用時の判断に役立つガイダンスも比較的充実しています。

layout スキルは、UIの構成、余白、階層、整列、視覚的リズムを見直し、改善するためのスキルです。情報が詰まりすぎた画面や、構造が弱い画面のレビューに特に向いており、利用前に文脈整理のため /impeccable へ先に依存します。

frontend-design は、文脈を起点に個性あるフロントエンドUIコードを作るための skill です。想定ユーザー、利用シーン、ブランドトーンをもとに、ページ・コンポーネント・画面フローのレイアウト、タイポグラフィ、配色、モーション、インタラクション状態、UXライティングをより完成度高く整えたいときに役立ちます。

harden スキルは、エラー処理の強化、空状態・ローディング状態の整備、テキストあふれの修正、i18n 対応、実データで起こりがちなエッジケースへの対処を通じて、フロントエンドUIを本番運用に耐える状態へ仕上げるのに役立ちます。

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 が必要なときに使えます。汎用的なプロンプトだけの動画依頼よりも、レイアウト、タイミング、アニメーションの設計を重視します。

vue-best-practices は、コード生成・レビュー・リファクタリングに対応した Vue 3 向けスキルです。Composition API、`<script setup lang="ts">`、明示的なデータフロー、SSR を意識した設計判断を促しつつ、リアクティビティ、SFC、composables、Router、Pinia、Vite ベースのアプリに関する主要リファレンスへ導きます。

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でも動作します。

fixing-motion-performance は、既存のスタックを基本的に変えずに、UI アニメーションのパフォーマンス問題を監査・修正するのに役立ちます。モーションがカクつく、スクロール連動エフェクトが重い、トランジションが layout・paint・compositing を発生させている、といったフロントエンドの課題で使うのに最適です。アニメーションの不具合を、原因が明確なコードレベルの修正へ落とし込めます。