本文へ移動
cccskills
無料GitHub で公開日本語紹介

suggest-lucide-icons

表したい概念や画面の配置に合うLucideアイコンを候補から探し、実在確認を経て意味や見た目を比べ、用途ごとにおすすめを提示します。

原文原文の説明を見る

Suggest relevant Lucide icons for concepts or UI placements. Searches lucide.dev to find actual icons that symbolize ideas or fit design contexts. Use when needing icons for UI work, documentation, or symbolic representation.

graphif/project-graphスター 4,510(GitHub 4,510 + cccskills 0)

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • UIの概念に合うアイコンを選びたいとき
  • 画面配置に合うアイコンを探したいとき
  • 資料やドキュメント用の記号を選びたいとき

日本語での紹介

できること

表したい概念や画面上の配置に合うLucideアイコンを探し、候補名と選んだ理由を提示します。概念から連想できる意味や視覚的な比喩を考え、スクリーンショットがあれば画面の文脈も踏まえて候補を出します。候補はアイコンファイルを確認して実在するものに絞り、複数案の中から最も適したものを推薦します。アイコン名はLucideの表記規則に沿った英語のkebab-caseで示します。

こんなときに便利

UIのボタンやナビゲーションに使うアイコンを選びたいとき、ドキュメントの意味を視覚化したいとき、抽象的な概念を表す記号を探したいときに向いています。画面画像を添えれば、配置や用途に合わせた提案を受けられます。

使い方の例

  • 「通知設定に合うLucideアイコンを3つ提案し、最適なものを選んでください」
  • 「この画面の検索欄と履歴欄に合うアイコンを探してください」
  • 「データの同期を表すアイコン候補を、意味の違いも含めて比較してください」

注意点

候補はlucide.devのアイコンセットを対象にし、実在確認のためにアイコンSVGを取得します。

この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル(2)

  • SKILL.md2.8 KB
  • changelog.md954 B

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Suggest Lucide Icons

Suggest the most relevant icons from the Lucide open source icon pack to symbolize a concept or fit specific UI placements. I am skilled in symbolic interpretation and mental associations across culture, symbology, science, and design.

Input

Provide one or both:

  • Concept: The idea, action, or meaning to represent
  • Screenshot: UI context showing where icons are needed

Naming conventions

Icon names follow strict rules — apply these when generating candidates:

  • kebab-case: arrow-up not Arrow Up
  • International English: color not colour
  • Group variants: <group>-<variant> — e.g. badge-plus is based on badge
  • Multiple elements, different sizes: list largest first — circle-person if circle is bigger
  • Element with modifier: [element]-[modifier] — circle-dashed not dashed-circle; combined: circle-dashed-heart-broken

Process

  1. Brainstorm associations

    • Key ideas and visual metaphors related to the concept
    • Context clues from screenshot if provided
    • Generate 4–6 candidate icon names in kebab-case (e.g. arrow-right, circle-check)
  2. Verify candidates

    • For each candidate, fetch: https://unpkg.com/lucide-static@latest/icons/[icon-name].svg
    • Use WebFetch or follow redirects (curl -L) — unpkg issues a 302 before the final response
    • SVG content in the response means the icon exists; a 404 means it doesn't
    • Discard any that don't exist; try alternate names if needed to reach 3 confirmed icons
  3. Present 3 confirmed candidates

    • Icon name
    • Why it fits (symbolic meaning, visual clarity, context appropriateness)
  4. Recommend best choice

    • Single strongest option
    • Rationale for recommendation

Guidelines

  • Never suggest an icon without confirming it via the unpkg URL
  • Never suggest made-up icon names
  • If fewer than 3 candidates survive verification, brainstorm more before giving up
  • If no good matches exist after thorough searching, say so
  • For screenshots, tailor to specific design context
  • Provide a distinct recommendation for each icon needed
  • Ready for multiple feedback rounds to refine suggestions

Output Format

Brainstorm: [Key associations and metaphors]

Candidate Icons:

  1. icon-name — Explanation of fit
  2. icon-name — Explanation of fit
  3. icon-name — Explanation of fit

Recommendation: icon-name — Why this is the strongest choice for [context]

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

create-keybind

無料概要あり

Project Graphに新しいショートカットを登録し、キー割り当てや設定画面の分類、各言語の説明文まで追加する手順を案内するスキルです。

  • 新しいショートカットを追加したいとき
  • 既定のキー割り当てを変更したいとき
  • 設定画面にショートカットを分類表示したいとき
graphif/project-graph4,5102026年10月26日 更新

create-setting-item

無料概要あり

Project Graphに設定項目を追加し、値の型や初期値、アイコン、翻訳、設定画面での分類まで反映する手順を案内するスキルです。

  • 設定項目や選択肢を追加したいとき
  • 初期値と入力形式を定義したいとき
  • 設定画面の分類に項目を配置したいとき
graphif/project-graph4,5102026年10月26日 更新

manage-translations

無料概要あり

Project Graphの翻訳ファイルの場所と対応言語を確認し、新しい翻訳の追加や既存訳の更新、翻訳システムの把握を支援します。

  • 翻訳ファイルの場所を確認したいとき
  • 対応言語を調べたいとき
  • 新しい言語の翻訳を追加したいとき
graphif/project-graph4,5102026年10月26日 更新

ponytail

無料概要あり

コーディング作業で、依頼を満たすために必要な最小限の変更を選び、影響範囲や確認事項も含めて簡潔に進め方を整えるスキルです。

  • 最小限の変更で機能を追加したいとき
  • バグの原因と影響範囲を確認したいとき
  • リファクタリングの範囲を絞りたいとき
graphif/project-graph4,5102026年10月26日 更新

shadcn

無料概要あり

shadcn/uiのコンポーネントを探して追加・更新し、プロジェクト設定に沿ったUIの構成や修正を支援するスキルです。

  • レジストリからUI部品を探したいとき
  • コンポーネントを追加・更新したいとき
  • 既存UIの不具合を調べたいとき
graphif/project-graph4,5102026年10月26日 更新

type-check

無料概要あり

TypeScriptのコードをプロジェクト指定のコマンドで型チェックし、型の不整合を確認するスキルです。

  • 変更後に型エラーを確認したいとき
  • プロジェクトの型チェックを実行したいとき
  • TypeScriptの型整合性を確かめたいとき
graphif/project-graph4,5102026年10月26日 更新

graphif のスキルをすべて見る

このスキルの問題を報告する