apple-browsers: Skill for Claude Code

ddg-drk-add-icon

Overview

Imports one or more SVGs into the DesignResourcesKitIcons Swift package at SharedPackages/Infrastructure/DesignResourcesKitIcons. For each icon, three things must always change together:

1. An *.imageset/ (or *.symbolset/ for Recolorable) directory under DesignSystemImages.xcassets/{Category}/{Size}/ containing the SVG.
2. A Contents.json in that directory — format differs by category.
3. A public static var accessor in the matching DesignSystemImages+Glyphs.swift / +Color.swift / +Recolorable.swift, inserted alphabetically inside the right SizeN enum.

Forgetting any of the three leaves the icon unusable.

Inputs

• Required: one or more local paths and/or http(s) URLs to SVGs. A single icon is just a list of length one — treat the singular and batch cases the same way.
• Optional, only if a filename doesn't follow convention: category, size, accessor name (per-icon).

Inputs may mix local paths and URLs in the same invocation, and may span multiple categories/sizes — they don't have to be homogeneous.

Filename convention (drives everything else)

Category	Filename	Example
Glyph	Title-Case-{size}.svg	Pin-Remove-12.svg
Color	Title-Case-Color-{size}.svg	Chat-Color-12.svg
Recolorable	lower-case-recolorable-{size}.svg	check-recolorable-24.svg

Allowed sizes: Glyph 12/16/20/24, Color 12/16/24/32/42/72/96/128, Recolorable 24.

If the file you were given doesn't match, rename it to match before continuing. Don't invent new size buckets — confirm with the user instead.

Steps

Run steps 1–6 for each input icon in the list (they're independent — fetch all first, then process). Step 7 is a single verification pass at the end.

1. Get the file locally. If input is a URL, curl -fL -o /tmp/<basename> <url>. If local, just note the path. When given multiple URLs, you may run the curls in parallel.
2. Parse the filename to derive:
   • Category (Glyph / Color / Recolorable — by presence of -Color- or -Recolorable-).
   • Size (trailing number before .svg).
   • Base name (everything before the category/size suffix).
   • Accessor name = base name lowerCamelCased. For Color, drop the Color suffix from the variable name but keep it in the resource name (e.g. Chat-Color-12.svg → accessor chat, resource .chatColor12). For Recolorable, same shape — drop Recolorable from the variable name but keep it in the resource (e.g. check-recolorable-24.svg → accessor check, resource .checkRecolorable24). For Glyph, no suffix to drop — the whole base name becomes the camelCased variable and the resource is <variable><size> (e.g. Pin-Remove-12.svg → accessor pinRemove, resource .pinRemove12).
3. Create the imageset/symbolset directory:
   • Glyph: SharedPackages/Infrastructure/DesignResourcesKitIcons/Sources/DesignResourcesKitIcons/DesignSystemImages.xcassets/Glyphs/{size}px/{Filename-without-.svg}.imageset/
   • Color: same root, Color/{size}px/...imageset/ — exception: Color/32x/ (no p, matches existing repo state).
   • Recolorable: Recolorable/{size}px/{Title-Cased-filename-without-.svg}.symbolset/ — the directory is Title-Case (e.g. Check-Recolorable-24.symbolset/) to match how Glyph and Color imageset directories are cased. (The existing check-recolorable-24.svg SVG predates this convention; new icons should follow it.)
4. Copy the SVG into that directory. If needed, rename the SVG to match the imageset/symbolset directory name (e.g. drop Check-Recolorable-24.svg inside Check-Recolorable-24.symbolset/). he filename field in Contents.json (next step) must reference the SVG file name exactly.
5. Write Contents.json in that same directory. Use the variant for the category: