skill CX Codex

setup-fa — Claude Code skill: what it does, how to install

Q: How to install setup-fa in Claude Code?

Run `npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a claude-code`. The file will be placed in `~/.claude/skills/setup-fa/SKILL.md`.

Q: What is required for Kit integration?

You need the `fa` CLI version 0.8.0 or newer authenticated via `fa login` or configured using the `FA_API_TOKEN` environment variable.

Configures Font Awesome from scratch: detects your framework, sets up a Kit or packages, and creates .font-awesome.md for icon workflows.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a claude-code

Open on GitHub

What setup-fa does

The skill inspects the repository using an exploration subagent. It identifies the package manager, checks for frameworks like React or Vue, and maps out any icon classes already in the codebase. Setup prioritizes an official Font Awesome Kit over manual setups. The agent requests confirmation first, before writing configuration files or installing dependencies.

Kit features require the fa command-line tool at version 0.8.0 or newer. When the CLI is not found on PATH, the skill falls back to internal Python scripts. Raw SVG generation is prohibited. The skill pulls official markup through the API instead of guessing paths from memory. Without fa login or a valid FA_API_TOKEN, kit setup will fail.

What it helps with

configure Font Awesome in a React or Vue project
switch from unofficial CDNs to an official Font Awesome Kit
generate the .font-awesome.md file required by /add-icon
audit the repository for previously imported icon families and styles

Example prompts for the agent

Set up Font Awesome in this project using Kit
Configure Font Awesome packages for our Vue application
Set up Font Awesome from scratch with method auto

How to install setup-fa

1Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a claude-code

2Manually: put the files in place

~/.claude/skills/setup-fa/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/setup-fa/

1Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a codex

2Manually: put the files in place

.agents/skills/setup-fa/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a cursor

2Manually: put the files in place

.cursor/skills/setup-fa/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install FortAwesome/fontawesome-agent-tools setup-fa

2Manually: put the files in place

.github/skills/setup-fa/SKILL.md

1Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a gemini-cli

2Platform CLI

gemini skills install https://github.com/FortAwesome/fontawesome-agent-tools --path plugins/icons/skills/setup-fa

Manually: put the files in place

.devin/skills/setup-fa/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about setup-fa

How to install setup-fa in Claude Code?

Run npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a claude-code. The file will be placed in ~/.claude/skills/setup-fa/SKILL.md.

What does setup-fa do?

It examines your project structure, installs Font Awesome packages or Kit embed code, and generates .font-awesome.md for subsequent icon commands.

What is required for Kit integration?

You need the fa CLI version 0.8.0 or newer authenticated via fa login or configured using the FA_API_TOKEN environment variable.

Similar skills

All skills for Frontend and UI →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set4

add-icon Finds and inserts Font Awesome icons into your codebase according to your active framework and setup. CX Codex +1 569installs suggest-icon Picks a Font Awesome icon for a concept, situation or verb, then checks it exists in your version or Kit. CX Codex +1 551installs fa-help Answers Font Awesome questions from the official documentation instead of model memory. Handy for setup, styling and upgrade work. CX Codex +1 498installs