hyva-render-media-image
Hyvä ThemeのMediaビューモデルを使用してレスポンシブ画像コードを生成します。このスキルは、Hyväテンプレートに画像をレンダリングしたり、レスポンシブpicture要素を作成したり、ヒーロー画像や商品画像などのレスポンシブブレークポイントが必要な画像を追加する場合に使用します。トリガーフレーズには「画像をレンダリング」「テンプレートに画像を追加」「レスポンシブ画像」「picture要素」「ヒーロー画像」「レスポンシブバナー」「モバイルとデスクトップ用画像」「バナー画像」が含まれます。
description の原文を見る
Generate responsive image code for Hyvä Theme templates using the Media view model. This skill should be used when the user wants to render images in a Hyvä template, create responsive picture elements, add hero images, product images, or any image that needs responsive breakpoints. Trigger phrases include "render image", "add image to template", "responsive image", "picture element", "hero image", "responsive banner", "image for mobile and desktop", or "banner image".
SKILL.md 本文
Hyvä Render Image
Hyvä Theme テンプレート向けに \Hyva\Theme\ViewModel\Media ビューモデルを使用して、レスポンシブな <picture> 要素を生成します。
使用時期
- Hyvä PHTML テンプレートへの画像追加
- モバイル/デスクトップ向けの異なるソースを持つレスポンシブ画像の作成
- ヒーローバナー、商品画像、CMS コンテンツ画像の実装
- Core Web Vitals (LCP, CLS) の最適化
ワークフロー
1. 画像要件の確認
ユーザーは以下の方法で画像データを提供する可能性があります：
オプション A: 直接値 - ユーザーに以下を尋ねます：
- 画像パス -
pub/media/内の場所（例：wysiwyg/hero.jpg、catalog/product/...） - 画像寸法 - ピクセル単位の幅と高さ
- レスポンシブ要件 - モバイル vs デスクトップで異なる画像が必要か
- 画像の用途 - ヒーロー/LCP 画像（即座読み込み）か下部折り返し部分（遅延読み込み）か
- 代替テキスト - アクセシビリティのための意味のある説明
オプション B: PHP 変数 -
...
詳細情報
- 作者
- hyva-themes
- ライセンス
- OSL-3.0
- 最終更新
- 不明
Source: https://github.com/hyva-themes/hyva-ai-tools / ライセンス: OSL-3.0
関連スキル
agent-browser
AI エージェント向けのブラウザ自動化 CLI です。ウェブサイトとの対話が必要な場合に使用します。ページ遷移、フォーム入力、ボタンクリック、スクリーンショット取得、データ抽出、ウェブアプリのテスト、ブラウザ操作の自動化など、あらゆるブラウザタスクに対応できます。「ウェブサイトを開く」「フォームに記入する」「ボタンをクリックする」「スクリーンショットを取得する」「ページからデータを抽出する」「このウェブアプリをテストする」「サイトにログインする」「ブラウザ操作を自動化する」といった要求や、プログラマティックなウェブ操作が必要なタスクで起動します。
anyskill
AnySkill — あなたのプライベート・スキルクラウド。GitHubを基盤としたリポジトリからエージェントスキルを管理、同期、動的にロードできます。自然言語でクラウドスキルを検索し、オンデマンドでプロンプトを自動ロード、カスタムスキルのアップロードと共有、スキルバンドルの一括インストールが可能です。OpenClaw、Antigravity、Claude Code、Cursorに対応しています。
engram
AIエージェント向けの永続的なメモリシステムです。バグ修正、意思決定、発見、設定変更の後はmem_saveを使用してください。ユーザーが「覚えている」「記憶している」と言及した場合、または以前のセッションと重複する作業を開始する際はmem_searchを使用します。セッション終了前にmem_session_summaryを使用して、コンテキストを保持してください。
skyvern
AI駆動のブラウザ自動化により、任意のウェブサイトを自動化できます。フォーム入力、データ抽出、ファイルダウンロード、ログイン、複数ステップのワークフロー実行など、ユーザーがウェブサイトと連携する必要があるときに使用します。Skyvernは、LLMとコンピュータビジョンを活用して、未知のサイトも自動操作可能です。Python SDK、TypeScript SDK、REST API、MCPサーバー、またはCLIを通じて統合できます。
pinchbench
PinchBenchベンチマークを実行して、OpenClawエージェントの実世界タスクにおけるパフォーマンスを評価できます。モデルの機能テスト、モデル間の比較、ベンチマーク結果のリーダーボード提出、またはOpenClawのセットアップがカレンダー、メール、リサーチ、コーディング、複数ステップのワークフローにどの程度対応しているかを確認する際に使用します。
openui
OpenUIとOpenUI Langを使用してジェネレーティブUIアプリを構築できます。これらはLLM生成インターフェースのためのトークン効率的なオープン標準です。OpenUI、@openuidev、ジェネレーティブUI、LLMからのストリーミングUI、AI向けコンポーネントライブラリ、またはjson-render/A2UIの置き換えについて述べる際に使用します。スキャフォルディング、defineComponent、システムプロンプト、Renderer、およびOpenUI Lang出力のデバッグに対応しています。