card
カードレイアウトの設計・最適化・監査を行いたい場合に使用します。「カードレイアウト」「カードコンポーネント」「カードグリッド」「プロダクトカード」「テンプレートカード」「ツールカード」「フィーチャーカード」「ギャラリーカード」「インテグレーションカード」「カードデザイン」といったキーワードが挙がった際にも活用してください。グリッドレイアウト全般には grid スキルを使用します。
description の原文を見る
When the user wants to design, optimize, or audit card layouts for content display. Also use when the user mentions "card layout," "card component," "card grid," "product cards," "template cards," "tool cards," "feature cards," "gallery cards," "integration cards," or "card design." For grids, use grid.
SKILL.md 本文
Components: Card Layout
スキャン可能でレスポンシブなコンテンツ表示のためのカードレイアウトデザインガイド。カードは関連するコンテンツをグループ化する自己完結型のコンテナであり、ブログ投稿、商品、テンプレート、ツール、機能、ギャラリー、統合のグリッド表示に使用されます。
呼び出し時: 初回使用時、有用な場合は、このスキルがカバーする内容と重要性について1～2文で説明してから、メイン出力を提供してください。その後の使用時またはユーザーがスキップを求めた場合は、メイン出力に直接進んでください。
Card Anatomy
| 要素 | 目的 |
|---|---|
| Container | ボーダー、背景、シャドウ; 一貫したパディング |
| Image / Thumbnail | ビジュアルアンカー; 一貫したアスペクト比 (1:1, 4:3 が一般的) |
| Title | 明確; 関連性がある場合はキーワード豊富 |
| Description / Metadata | サポートテキスト; 日付、著者、カテゴリ |
| CTA | アクションボタンまたはリンク; 「View」「Use」「Connect」など |
原則: 1カード = 1トピック。スキャン可能性のため、各カードを絞った内容に保つ。
ユースケース別カードタイプ
| タイプ | 典型的な要素 | ページスキル |
|---|---|---|
| 商品カード | 画像、名前、価格、CTA (カートに追加、表示) | products-page-generator |
| テンプレートカード | サムネイル、名前、短い説明、「使用」または「プレビュー」CTA | template-page-generator |
| ツールカード | 名前、1行の利点、ツールページへのCTA | tools-page-generator |
| 機能カード | 名前、利点、オプションのスクリーンショット | features-page-generator |
| ギャラリー / ショーケースアイテム | サムネイル、タイトル、クリエーター、リンク | showcase-page-generator |
| 統合カード | ロゴ、名前、短い説明、「接続」または「インストール」 | integrations-page-generator |
| ブログ / 記事カード | カバー画像、タイトル、抜粋、日付、著者 | blog-page-generator, article-page-generator |
| リソースカード | サムネイル、タイトル、形式 (ガイド、ウェビナー)、CTA | resources-page-generator |
レイアウト & レスポンシブ対応
- Grid: CSS Grid
repeat(auto-fill, minmax())または Flexbox; カラム数はビューポートに合わせて調整 - Mobile: 小さい画面では1カラム; デスクトップでは2～4カラム
- 一貫性: すべてのカード間で同じパディング、間隔、アスペクト比
- Hover: 微妙な浮上効果 (シャドウ、translate-y); レイアウトシフト (CLS) を引き起こす scale は避ける
デザイン原則
| 原則 | 実践 |
|---|---|
| ビジュアルハイアラルキー | タイトル > 説明 > CTA; 明確なフロー |
| スキャン可能性 | 最小限のテキスト; 利点主導のコピー |
| 一貫性 | グリッド内のすべてのカードで同じ構造 |
| アクション明確性 | 1カードにつき1つのプライマリCTA; 選択肢の過負荷を避ける |
SEO & Schema
- カード自体: 特定のスキーマなし; レイアウトはUI
- カード内のコンテンツ: ページに適切なスキーマを使用 (Product, Article, ItemList など); schema-markup を参照
- 画像: サムネイルの alt テキスト; image-optimization を参照
- リンク: 説明的なアンカーテキスト; 内部リンク; internal-links を参照
Grid vs List vs Masonry vs Carousel
| レイアウト | 最適な用途 | スキル |
|---|---|---|
| Grid | ビジュアルコンテンツ (商品、テンプレート、ギャラリー); 等しい強調 | grid |
| List | テキスト多め (ブログインデックス、ドキュメント); コンパクト; タイトルでスキャン | list |
| Masonry | 高さのバリエーション; 画像ギャラリー、ポートフォリオ | masonry |
| Carousel | スペース限定; 推薦文、ロゴ、フィーチャー回転 | carousel |
関連スキル
- products-page-generator: 商品カード、グリッドレイアウト、カテゴリページ
- template-page-generator: テンプレートカード、ギャラリー構造
- tools-page-generator: ツールカード、ツールキットハブ
- features-page-generator: 機能グリッド/リスト
- showcase-page-generator: ギャラリーグリッド、アイテムごとの形式
- integrations-page-generator: カタロググリッド、統合カード
- category-page-generator: 商品グリッド、一貫したレイアウト
- grid: カード表示用グリッドレイアウト; グリッドを使用する時期
- list: リストレイアウト; リスト形式のカード
- masonry: 高さのバリエーションのあるカード用 (ギャラリー)
- carousel: カードスライド用カルーセル (推薦文、フィーチャー)
- hero-generator: Hero vs カード—hero は単一のアブーブザフォールド; カードは繰り返しユニット
- brand-visual-generator: タイポグラフィ、間隔、ビジュアル一貫性
- image-optimization: カードサムネイル最適化、alt テキスト、LCP
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- kostja94
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/kostja94/marketing-skills / ライセンス: MIT
関連スキル
secure-code-guardian
認証・認可の実装、ユーザー入力の保護、OWASP Top 10の脆弱性対策が必要な場合に使用します。bcrypt/argon2によるパスワードハッシング、パラメータ化ステートメントによるSQLインジェクション対策、CORS/CSPヘッダーの設定、Zodによる入力検証、JWTトークンの構築などのカスタムセキュリティ実装に対応します。認証、認可、入力検証、暗号化、OWASP Top 10対策、セッション管理、セキュリティ強化全般で活用できます。ただし、構築済みのOAuth/SSO統合や単独のセキュリティ監査が必要な場合は、より特化したスキルの検討をお勧めします。
claude-authenticity
APIエンドポイントが本物のClaudeによって支えられているか（ラッパーやプロキシ、偽装ではないか）を、claude-verifyプロジェクトを模した9つの重み付きルールベースチェックで検証できます。また、Claudeの正体を上書きしているプロバイダーから注入されたシステムプロンプトも抽出します。完全に自己完結しており、httpx以外の追加パッケージは不要です。Claude APIキーまたはエンドポイントを検証したい場合、サードパーティのClaudeサービスが本物か確認したい場合、APIプロバイダーのClaude正当性を監査したい場合、複数モデルを並行してテストしたい場合、またはプロバイダーが注入したシステムプロンプトを特定したい場合に使用できます。
anth-security-basics
Anthropic Claude APIのセキュリティベストプラクティスを適用し、キー管理、入力値の検証、プロンプトインジェクション対策を実施します。APIキーの保護、Claudeに送信する前のユーザー入力検証、コンテンツセーフティガードレールの実装が必要な場合に活用できます。「anthropic security」「claude api key security」「secure anthropic」「prompt injection defense」といったフレーズでトリガーされます。
x-ray
x-ray.mdプレ監査レポートを生成します。概要、強化された脅威モデル（プロトコルタイプのプロファイリング、Gitの重み付け攻撃面分析、時間軸リスク分析、コンポーザビリティ依存関係マッピング）、不変条件、統合、ドキュメント品質、テスト分析、開発者・Gitの履歴をカバーしています。「x-ray」「audit readiness」「readiness report」「pre-audit report」「prep this protocol」「protocol prep」「summarize this protocol」のキーワードで実行されます。
semgrep
Semgrepスタティック分析スキャンを実行し、カスタム検出ルールを作成します。Semgrepでのコードスキャン、セキュリティ脆弱性の検出、カスタムYAMLルールの作成、または特定のバグパターンの検出が必要な場合に使用します。重要：ユーザーが「バグをスキャンしたい」「コード品質を確認したい」「脆弱性を見つけたい」「スタティック分析」「セキュリティlint」「コード監査」または「コーディング標準を適用したい」と尋ねた場合も、Semgrepという名称を明記していなくても、このスキルを使用してください。Semgrepは30以上の言語に対応したパターンベースのコードスキャンに最適なツールです。
ghost-bits-cast-attack
Java「ゴーストビッツ」/キャストアタック プレイブック（Black Hat Asia 2026）。16ビット文字が8ビットバイトに暗黙的に縮小されるJavaサービスへの攻撃時に使用します。WAF/IDSを回避して、SQLインジェクション、デシリアライゼーション型RCE、ファイルアップロード（Webシェル）、パストトラバーサル、CRLF インジェクション、リクエストスマグリング、SMTPインジェクションを実行できます。Tomcat、Spring、Jetty、Undertow、Vert.x、Jackson、Fastjson、Apache Commons BCEL、Apache HttpClient、Angus Mail、JDK HttpServer、Lettuce、Jodd、XMLWriterに影響し、WAFバイパスにより多くの「パッチ済み」CVEを再度有効化します。