FI

fix-nerd-fonts

Fixes corrupted or missing Nerd Font icons in source code.

Install

mkdir -p .claude/skills/fix-nerd-fonts && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17151" && unzip -o skill.zip -d .claude/skills/fix-nerd-fonts && rm skill.zip

Installs to .claude/skills/fix-nerd-fonts

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Verify and fix Nerd Font icons after editing files. Use whenever writing or
75 chars · catalog descriptionno explicit “when” trigger
Intermediate

Key capabilities

  • Verify the presence of Nerd Font icons in a file
  • Identify missing Nerd Font icons after file edits
  • Replace placeholder strings with correct Unicode characters for Nerd Font icons
  • Use appropriate Unicode escape syntax for different codepoint ranges
  • Convert raw Nerd Font bytes to Unicode escape syntax in source code
  • Add new Nerd Font icons to the project with proper verification and escape syntax

How it works

The skill provides Python scripts to verify and fix Nerd Font icons by checking for specific Unicode codepoints and replacing placeholders with the correct escape sequences.

Inputs & outputs

You give it
A file path containing or expected to contain Nerd Font icons
You get back
Confirmation of icon presence or a corrected file with restored icons

When to use fix-nerd-fonts

  • Restore icons in terminal UI
  • Check icon integrity
  • Fix character encoding

About this skill

Fix Nerd Fonts

Nerd Font icons use Unicode Private Use Area codepoints (U+E000-U+F8FF and U+F0000-U+10FFFF). The Write and Edit tools may silently strip or corrupt these characters. This skill ensures they survive every edit.

When This Skill Applies

After every Write or Edit to a file that contains Nerd Font icons. Currently the known files are:

FileIcons
tui/src/main.rsnf-md-web (U+F059F), nf-fa-keyboard_o (U+F11C), nf-fa-user (U+F007)
issues/0504-web-tui/README.mdnf-md-web (U+F059F), nf-fa-keyboard_o (U+F11C), nf-fa-user (U+F007), nf-md-refresh (U+F0450)

Update this table when new files or icons are added.

The Problem

The Write and Edit tools transmit file content as text. Characters in the Private Use Area — especially Supplementary Private Use Area codepoints above U+FFFF — may be silently dropped, replaced with replacement characters, or truncated. The file saves without error, but the icons are gone.

This is invisible in diffs and code review because the missing character leaves no trace — just an empty string where the icon was.

Step 1: Verify Icons

After any edit, run the verification script:

python3 -c "
src = open('<file_path>').read()
icons = {
    'nf-md-web (U+F059F)': '\U000F059F',
    'nf-fa-keyboard_o (U+F11C)': '\uF11C',
    'nf-fa-user (U+F007)': '\uF007',
    'nf-md-refresh (U+F0450)': '\U000F0450',
}
for name, char in icons.items():
    if char in src:
        print(f'  OK  {name}')
    else:
        print(f'  MISSING  {name}')
"

Adjust the icon list to match what the file should contain.

Step 2: Fix Missing Icons

If any icon is missing, use the placeholder-and-replace pattern:

  1. In the Edit tool, use a unique ASCII placeholder string where the icon should go (e.g., PLACEHOLDER_WEB, PLACEHOLDER_KEYBOARD).
  2. Then run Python to replace the placeholder with the real Unicode character:
python3 -c "
src = open('<file_path>').read()
src = src.replace('PLACEHOLDER_WEB', '\U000F059F')
src = src.replace('PLACEHOLDER_KEYBOARD', '\uF11C')
src = src.replace('PLACEHOLDER_USER', '\uF007')
src = src.replace('PLACEHOLDER_REFRESH', '\U000F0450')
open('<file_path>', 'w').write(src)
"

Step 3: Verify Again

Re-run the verification script from Step 1 to confirm all icons are present.

Python Escape Syntax

Codepoints at or below U+FFFF use \uXXXX:

'\uF11C'   # U+F11C  (nf-fa-keyboard_o)
'\uF007'   # U+F007  (nf-fa-user)

Codepoints above U+FFFF use \U00XXXXXX (8 hex digits, zero-padded):

'\U000F059F'  # U+F059F  (nf-md-web)
'\U000F0450'  # U+F0450  (nf-md-refresh)

Using \uF059F for a codepoint above U+FFFF is wrong — Python interprets it as \uF059 + literal F, producing a garbage character.

Rule: Always Use Unicode Escape Syntax in Source Code

NEVER embed raw Nerd Font bytes in source code. Always use the language's Unicode escape syntax. Raw UTF-8 bytes are silently corrupted by text editors, LLM tools, clipboard operations, and diff/patch workflows. Unicode escapes are pure ASCII and survive any tool chain.

LanguageSyntaxExample (U+F007)Example (U+F059F)
Rust\u{XXXX}"\u{F007}""\u{F059F}"
Zig\u{XXXX}"\u{F007}""\u{F059F}"
Python\uXXXX / \U00XXXXXX'\uF007''\U000F059F'
C/C++\uXXXX / \UXXXXXXXXu8"\uF007"u8"\U000F059F"
Swift\u{XXXX}"\u{F007}""\u{F059F}"
JavaScript\u{XXXX}"\u{F007}""\u{F059F}"

When editing a file that contains raw Nerd Font bytes, convert them to Unicode escapes as part of the edit. Use xxd or python3 to identify the codepoint, then replace the raw bytes with the appropriate escape.

Adding New Icons

When introducing a new Nerd Font icon to the project:

  1. Add the icon name, codepoint, and file to the table in this skill.
  2. Add it to the verification script's icons dict.
  3. Add a placeholder constant for it.
  4. Use the placeholder-and-replace pattern for the first embed.
  5. Use Unicode escape syntax (\u{...} in Rust/Zig, etc.) — never raw bytes.

When not to use it

  • When editing files that do not contain Nerd Font icons
  • When the issue is not related to Private Use Area character corruption
  • When the task is not about verifying or fixing icon integrity

Prerequisites

Python 3

Limitations

  • Requires manual adjustment of the icon list in the verification script
  • Requires using unique ASCII placeholder strings for fixing missing icons
  • Relies on Python for verification and fixing scripts

How it compares

This method directly addresses the problem of text editor corruption of Private Use Area characters by using explicit Unicode escape syntax, ensuring icon integrity across toolchains.

Compared to similar skills

fix-nerd-fonts side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
fix-nerd-fonts (this skill)02moReviewIntermediate
frontend-design4812moNo flagsAdvanced
screenshot-to-code2042moNo flagsBeginner
textual1439moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

frontend-design

anthropics

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

481544

screenshot-to-code

OneWave-AI

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

204389

textual

KyleKing

Expert guidance for building TUI (Text User Interface) applications with the Textual framework. Invoke when user asks about Textual development, TUI apps, widgets, screens, CSS styling, reactive programming, or testing Textual applications.

143346

web-artifacts-builder

anthropics

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

49162

radix-ui-design-system

sickn33

Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.

33130

svelte-ui-design

XIYO

ALWAYS use this skill for ANY Svelte component styling, design, or UI work. Svelte 5 UI design system using Tailwind CSS 4, Skeleton Labs design tokens/presets/Tailwind Components, and Bits UI headless components. Covers class composition, color systems, interactive components, forms, overlays, and all visual design.

23136

Search skills

Search the agent skills registry