Agent skill

Icons

How to add icons to the vglist frontend using Lucide via @lucide/vue.

Install Icons

skills CLI

$ npx skills add connorshea/vglist --skill icons -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install connorshea/vglist icons --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/connorshea/vglist.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/icons .claude/skills/icons && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "icons" agent skill from https://github.com/connorshea/vglist/tree/main/.claude/skills/icons into .claude/skills/icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "icons", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/connorshea/vglist/tree/main/.claude/skills/icons

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add connorshea/vglist --skill icons -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install connorshea/vglist icons --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/connorshea/vglist.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/icons .agents/skills/icons && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "icons" agent skill from https://github.com/connorshea/vglist/tree/main/.claude/skills/icons into .agents/skills/icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "icons", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add connorshea/vglist --skill icons -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install connorshea/vglist icons --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/connorshea/vglist.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/icons .cursor/skills/icons && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "icons" agent skill from https://github.com/connorshea/vglist/tree/main/.claude/skills/icons into .cursor/skills/icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "icons", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/connorshea/vglist.git --path .claude/skills/icons

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add connorshea/vglist --skill icons -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install connorshea/vglist icons --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/connorshea/vglist.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/icons .gemini/skills/icons && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "icons" agent skill from https://github.com/connorshea/vglist/tree/main/.claude/skills/icons into .gemini/skills/icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "icons", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install connorshea/vglist icons

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add connorshea/vglist --skill icons -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/connorshea/vglist.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/icons .github/skills/icons && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "icons" agent skill from https://github.com/connorshea/vglist/tree/main/.claude/skills/icons into .github/skills/icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "icons", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add connorshea/vglist --skill icons -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install connorshea/vglist icons --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/connorshea/vglist.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/icons .opencode/skills/icons && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "icons" agent skill from https://github.com/connorshea/vglist/tree/main/.claude/skills/icons into .opencode/skills/icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "icons", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: icons
GitHub stars: 160
Token cost: ~321 tokens
SKILL.md length: 140 words
Files: 1
Skills in repo: 1
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

How to add icons to the vglist frontend using Lucide via @lucide/vue.

Works in 7 steps: Always use Lucide icons from… → Import icons by name directly from… → Use icons in templates as Vue components → …
Reviewing icon usage in Vue components
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Tasks that involve Icons and illustration

What it does

Icons is an agent skill from connorshea/vglist. How to add icons to the vglist frontend using Lucide via @lucide/vue. Use when adding, replacing, or reviewing icon usage in Vue components.

Its SKILL.md is about 320 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Icons and illustration, Game development and Backend development. It works with Vue.js and Ruby on Rails. The repository describes itself as: A video game library tracking web app built in Rails and powered by Wikidata. The licence is MIT.

When your agent uses it

Reviewing icon usage in Vue components
Tasks that involve Icons and illustration
Tasks that involve Game development

Example prompts

“/icons”

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

Always use Lucide icons from @lucide/vue. Never create custom SVG icon components or use inline elements for icons.
Import icons by name directly from @lucide/vue
Use icons in templates as Vue components
Browse available icons at https://lucide.dev/icons/ — search by concept (e.g. "delete", "settings", "user") to find the right icon name.
Allowed SVG exceptions: The vglist logo files (vglist-logo.svg, vglist-favicon.svg, safari-pinned-tab.svg) are brand assets and should…
Do not use Font Awesome, Material Icons, Heroicons, or any other icon library.
Size and styling: Pass size as a prop for pixel dimensions. Use CSS classes or Bulma utility classes for color/spacing.

What it can do on your machine

Read from SKILL.md and the folder at commit e717310. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are vue).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- lucide.dev
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Icons loads about 321 tokens when it runs. Until then it costs about 37 tokens; SKILL.md has 140 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~37
When it runs · the whole SKILL.md, loaded when a task matches: ~321

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from connorshea/vglist at commit e717310, republished under its MIT licence (© connorshea). 140 words, ~321 tokens.

Download SKILL.mdSave it as .claude/skills/icons/SKILL.md (or your agent's skills folder).

name: icons
description: How to add icons to the vglist frontend using Lucide via @lucide/vue. Use when adding, replacing, or reviewing icon usage in Vue components.

Icons

When adding icons to the vglist frontend, follow these rules:

Rules

Always use Lucide icons from @lucide/vue. Never create custom SVG icon components or use inline <svg> elements for icons.

Import icons by name directly from @lucide/vue:

vue

import { Search, ChevronRight, Trash2 } from "@lucide/vue";

Use icons in templates as Vue components:
vue
```
<Search :size="20" />
```
Browse available icons at https://lucide.dev/icons/ — search by concept (e.g. "delete", "settings", "user") to find the right icon name.
Allowed SVG exceptions: The vglist logo files (vglist-logo.svg, vglist-favicon.svg, safari-pinned-tab.svg) are brand assets and should remain as SVGs. Custom data visualizations (like the rating circle in GameDetailsSection.vue) that use dynamic SVG with computed attributes are also fine.
Do not use Font Awesome, Material Icons, Heroicons, or any other icon library.
Size and styling: Pass size as a prop for pixel dimensions. Use CSS classes or Bulma utility classes for color/spacing.

Files

Just SKILL.md in .claude/skills/icons of connorshea/vglist.

Open the folder on GitHubat commit e717310

Compare with similar skills

Icons next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Icons compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Icons this skillconnorshea/vglist	160	—	~321	Automated safety check: Pass	MIT	3 days ago
Solar Iconssaoudi-h/solar-icons	190	—	~2.1k	Automated safety check: Pass	MIT	yesterday
Kill AI Slopyetone/kill-ai-slop	1.3k	—	~1.4k	Automated safety check: Pass	Apache-2.0	25 days ago
Vue Component Developmentgdarko/laravel-vue-starter	145	—	~1.1k	Automated safety check: Pass	MIT	6 mo ago
Vite Plugin SVG Icons Ngyangxu52/vite-plugin-svg-icons-ng	117	—	~919	Automated safety check: Pass	MIT	12 days ago
Frontend UIfossasia/eventyay	1.7k	—	~299	Automated safety check: Pass	Apache-2.0	yesterday

Similar skills

Solar Icons
saoudi-h/solar-icons
Add Solar Icons via @solar-icons/cli to any React, Vue, Svelte, Solid, Angular, React Native, Nuxt, Static, vanilla JS, or Laravel Blade project.
190 GitHub stars~2.1k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Kill AI Slop
yetone/kill-ai-slop
Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.
1.3k GitHub stars~1.4k tokensUpdated 25 days ago
Frontend & DesignAuto-check passed
Vue Component Development
gdarko/laravel-vue-starter
Activate when creating or modifying Vue 3 components, pages, layouts, stores, or services in the frontend.
145 GitHub stars~1.1k tokensUpdated 6 mo ago
Frontend & DesignAuto-check passed
Vite Plugin SVG Icons Ng
yangxu52/vite-plugin-svg-icons-ng
Consumer setup and integration for vite-plugin-svg-icons-ng: installation, createSvgIconsPlugin configuration, direct SVG usage, Vue 3 and React components, htmlMode, virtual modules, TypeScript…
117 GitHub stars~919 tokensUpdated 12 days ago
Frontend & DesignAuto-check passed
Frontend UI
fossasia/eventyay
Frontend UI implementation, accessibility, and responsive checks for Django templates and Vue components
1.7k GitHub stars~299 tokensUpdated yesterday
Frontend & DesignAuto-check passed
Figma To Static
LeoYeAI/openclaw-master-skills
Convert Figma design files to pixel-level mobile-first static HTML/CSS pages.
2.2k GitHub stars~7.1k tokensUpdated 2 mo ago
Frontend & DesignAuto-check passed

Works with

Questions about Icons

What does Icons do?

How to add icons to the vglist frontend using Lucide via @lucide/vue. Icons is an agent skill from connorshea/vglist. How to add icons to the vglist frontend using Lucide via @lucide/vue.

When should I use Icons?

Icons fits situations like: reviewing icon usage in Vue components; tasks that involve Icons and illustration; tasks that involve Game development.

How do I install Icons in Claude Code?

Run `npx skills add connorshea/vglist --skill icons -a claude-code`. Or copy the skill folder (.claude/skills/icons in connorshea/vglist) into .claude/skills/icons in your project. Claude Code loads it when a task matches its description.

How do I install Icons in Codex?

Run `npx skills add connorshea/vglist --skill icons -a codex`. Or copy the skill folder (.claude/skills/icons in connorshea/vglist) into .agents/skills/icons in your project. Codex loads it when a task matches its description.

Can I use Icons in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add connorshea/vglist --skill icons -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/icons, .gemini/skills/icons, .github/skills/icons and .opencode/skills/icons in your project.

What does Icons need to run?

SKILL.md names no scripts, command-line tools or credentials: Icons is instructions for the agent only.

Does Icons access the network?

SKILL.md names 1 domain. As links in the text: lucide.dev. This is read from the text; nothing was executed.

Is Icons safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Icons use?

Icons is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Icons use?

About 321 tokens (SKILL.md is roughly 1.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Icons?

Skills that share tags, products or a category with Icons: Solar Icons (saoudi-h/solar-icons, 190 stars), Kill AI Slop (yetone/kill-ai-slop, 1.3k stars), Vue Component Development (gdarko/laravel-vue-starter, 145 stars) and Vite Plugin SVG Icons Ng (yangxu52/vite-plugin-svg-icons-ng, 117 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Icons?

connorshea (a GitHub user) maintains it in connorshea/vglist, which has 160 GitHub stars. The repository was last updated on October 7, 2026.

Source: connorshea/vglist on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Icons

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Icons

Rules

Files

Compare with similar skills

Similar skills

Solar Icons

Kill AI Slop

Vue Component Development

Vite Plugin SVG Icons Ng

Frontend UI

Figma To Static

Related

Questions about Icons