claude-code-pilot 3.2.0 → 3.3.0

package/src/skills/ios-icon-gen/scripts/iconify_gen.sh

@@ -0,0 +1,235 @@
+#!/bin/bash
+#
+# Generate iOS icon imagesets from Iconify API (275k+ open source icons)
+# Uses: curl (download SVG) + sips (SVG->PNG conversion, built into macOS)
+#
+# Usage:
+#   iconify_gen.sh <icon-id> <asset-name> [options]
+#   iconify_gen.sh search <query> [--prefix <collection>] [--limit <n>]
+#
+# Examples:
+#   iconify_gen.sh mdi:receipt-text-outline myExpenseIcon
+#   iconify_gen.sh search "business card"
+#   iconify_gen.sh search receipt --prefix mdi
+
+set -euo pipefail
+
+API_BASE="https://api.iconify.design"
+readonly CURL_OPTS=(--fail --silent --show-error --connect-timeout 10 --max-time 30)
+
+# Defaults
+SIZE=68
+COLOR="8E8E93"
+OUTPUT="/tmp/icons"
+LIMIT=20
+
+require_value() {
+    local flag="$1"
+    local value="${2-}"
+    if [[ -z "$value" || "$value" == --* ]]; then
+        echo "ERROR: ${flag} requires a value" >&2
+        exit 1
+    fi
+}
+
+usage() {
+    cat <<'EOF'
+Usage:
+  iconify_gen.sh <icon-id> <asset-name> [options]    Generate an icon imageset
+  iconify_gen.sh search <query> [options]             Search for icons
+  iconify_gen.sh preview <icon-id>                    Download preview SVG
+  iconify_gen.sh collections                          List popular icon collections
+
+Generate Options:
+  --size <pt>       Base size in points (default: 68)
+  --color <hex>     Color hex without # (default: 8E8E93)
+  --output <dir>    Output directory (default: /tmp/icons)
+
+Search Options:
+  --prefix <name>   Filter by collection (e.g., mdi, lucide, tabler, ph)
+  --limit <n>       Max results (default: 20)
+
+Icon ID Format: <collection>:<icon-name>
+  Examples: mdi:receipt-text-outline, lucide:credit-card, ph:address-book
+
+Popular Collections:
+  mdi      Material Design Icons (7400+ icons)
+  lucide   Lucide (1700+ icons)
+  tabler   Tabler Icons (6000+ icons)
+  ph       Phosphor (9000+ icons)
+  ri       Remix Icon (2800+ icons)
+  carbon   Carbon (2100+ icons)
+EOF
+    exit 0
+}
+
+search_icons() {
+    local query="$1"
+    shift
+    local prefix=""
+
+    while [[ $# -gt 0 ]]; do
+        case "$1" in
+            --prefix) require_value --prefix "${2-}"; prefix="$2"; shift 2 ;;
+            --limit) require_value --limit "${2-}"; LIMIT="$2"; shift 2 ;;
+            *) shift ;;
+        esac
+    done
+
+    local encoded_query
+    encoded_query="$(python3 -c "import urllib.parse, sys; print(urllib.parse.quote(sys.argv[1]))" "$query")"
+    local url="${API_BASE}/search?query=${encoded_query}&limit=${LIMIT}"
+    if [[ -n "$prefix" ]]; then
+        url="${url}&prefix=${prefix}"
+    fi
+
+    local response
+    response=$(curl "${CURL_OPTS[@]}" "$url") || { echo "ERROR: Search request failed"; exit 1; }
+
+    local total
+    total=$(echo "$response" | python3 -c "import sys,json; print(json.load(sys.stdin).get('total',0))")
+
+    echo "Found ${total} icons for '${query}':"
+    echo ""
+    echo "$response" | python3 -c "
+import sys, json
+data = json.load(sys.stdin)
+for icon in data.get('icons', []):
+    print(f'  {icon}')
+"
+    echo ""
+    echo "Generate with: iconify_gen.sh <icon-id> <asset-name>"
+    echo "Preview with:  iconify_gen.sh preview <icon-id>"
+}
+
+list_collections() {
+    echo "Popular Iconify collections:"
+    echo ""
+    local resp
+    resp=$(curl "${CURL_OPTS[@]}" "${API_BASE}/collections") || { echo "ERROR: Failed to fetch collections list"; exit 1; }
+    echo "$resp" | python3 -c "
+import sys, json
+data = json.load(sys.stdin)
+popular = ['mdi','lucide','tabler','ph','ri','carbon','solar','heroicons','bi','octicon','ion','fe','charm','ci','iconoir','basil','uil','mingcute','flowbite','mynaui']
+for k in popular:
+    if k in data:
+        v = data[k]
+        name = v.get('name','')
+        total = v.get('total',0)
+        print(f'  {k:12s} {name} ({total} icons)')
+"
+    echo ""
+    echo "Full list: https://icon-sets.iconify.design/"
+}
+
+preview_icon() {
+    local icon_id="$1"
+    local collection="${icon_id%%:*}"
+    local name="${icon_id#*:}"
+    local url="${API_BASE}/${collection}/${name}.svg?width=136&height=136&color=%23${COLOR}"
+    local outfile="/tmp/iconify_preview_${collection}_${name}.svg"
+
+    curl "${CURL_OPTS[@]}" "$url" -o "$outfile" || { echo "ERROR: Icon '${icon_id}' not found"; exit 1; }
+    echo "Preview SVG: ${outfile}"
+    echo "URL: ${url}"
+
+    # Also convert to PNG for visual check
+    local pngfile="/tmp/iconify_preview_${collection}_${name}.png"
+    sips -s format png "$outfile" --out "$pngfile" >/dev/null 2>&1 || echo "WARNING: sips conversion failed; PNG may be incorrect"
+    echo "Preview PNG: ${pngfile}"
+}
+
+generate_icon() {
+    local icon_id="$1"
+    local asset_name="$2"
+    shift 2
+
+    while [[ $# -gt 0 ]]; do
+        case "$1" in
+            --size) require_value --size "${2-}"; SIZE="$2"; shift 2 ;;
+            --color) require_value --color "${2-}"; COLOR="$2"; shift 2 ;;
+            --output) require_value --output "${2-}"; OUTPUT="$2"; shift 2 ;;
+            *) shift ;;
+        esac
+    done
+
+    local collection="${icon_id%%:*}"
+    local name="${icon_id#*:}"
+    local imageset_dir="${OUTPUT}/${asset_name}.imageset"
+
+    mkdir -p "$imageset_dir"
+
+    echo "Generating ${asset_name} from Iconify '${icon_id}':"
+
+    local scales=("1:${SIZE}" "2:$((SIZE * 2))" "3:$((SIZE * 3))")
+
+    for scale_info in "${scales[@]}"; do
+        local scale="${scale_info%%:*}"
+        local px="${scale_info#*:}"
+        local suffix=""
+        [[ "$scale" != "1" ]] && suffix="@${scale}x"
+
+        local svg_url="${API_BASE}/${collection}/${name}.svg?width=${px}&height=${px}&color=%23${COLOR}"
+        local svg_file="${imageset_dir}/${asset_name}${suffix}.svg"
+        local png_file="${imageset_dir}/${asset_name}${suffix}.png"
+
+        curl "${CURL_OPTS[@]}" "$svg_url" -o "$svg_file" || { echo "ERROR: Failed to download icon '${icon_id}'"; exit 1; }
+        sips -s format png "$svg_file" --out "$png_file" >/dev/null 2>&1 || echo "WARNING: sips conversion may have failed for ${svg_file}"
+        rm "$svg_file"
+
+        echo "  ${asset_name}${suffix}.png (${px}x${px})"
+    done
+
+    # Write Contents.json
+    cat > "${imageset_dir}/Contents.json" <<JSONEOF
+{
+  "images" : [
+    {
+      "filename" : "${asset_name}.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "${asset_name}@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "${asset_name}@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
+JSONEOF
+
+    echo "Output: ${imageset_dir}/"
+}
+
+# Main
+[[ $# -eq 0 ]] && usage
+[[ "$1" == "--help" || "$1" == "-h" ]] && usage
+
+case "$1" in
+    search)
+        shift
+        [[ $# -eq 0 ]] && { echo "Usage: iconify_gen.sh search <query>"; exit 1; }
+        search_icons "$@"
+        ;;
+    preview)
+        shift
+        [[ $# -eq 0 ]] && { echo "Usage: iconify_gen.sh preview <icon-id>"; exit 1; }
+        preview_icon "$1"
+        ;;
+    collections)
+        list_collections
+        ;;
+    *)
+        [[ $# -lt 2 ]] && { echo "Usage: iconify_gen.sh <icon-id> <asset-name> [options]"; exit 1; }
+        generate_icon "$@"
+        ;;
+esac

package/src/skills/make-interfaces-feel-better/SKILL.md

@@ -0,0 +1,151 @@
+---
+name: make-interfaces-feel-better
+description: Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.
+origin: community
+---
+
+# Make Interfaces Feel Better
+
+Use this skill for the small design-engineering details that compound into a
+more polished interface.
+
+Source: salvaged from stale community PR #1659 by `linus707`.
+
+## When to Use
+
+- The user says the UI feels off, flat, generic, cramped, jumpy, or unfinished.
+- You are building controls, cards, lists, dashboards, navigation, forms, or
+  toolbars.
+- A component needs hover, active, focus, enter, exit, loading, or empty states.
+- A frontend review needs specific before/after recommendations.
+
+## Core Principles
+
+### Concentric Radius
+
+For nearby nested rounded surfaces:
+
+```text
+outer radius = inner radius + padding
+```
+
+If padding is large, treat layers as separate surfaces instead of forcing the
+math. The point is optical coherence, not formula worship.
+
+### Optical Alignment
+
+Geometric centering is not always visual centering. Icon buttons, play
+triangles, arrows, stars, and asymmetric icons often need a small offset. Fix the
+SVG when possible; otherwise adjust with a pixel-level margin or padding change.
+
+### Shadows And Borders
+
+Use borders for separation and focus rings. Use layered shadows when a card,
+button, dropdown, or popover needs depth. Shadows should be transparent and
+subtle enough to work across backgrounds.
+
+### Text Wrapping
+
+- Use `text-wrap: balance` on headings and short titles.
+- Use `text-wrap: pretty` on short-to-medium body text, captions, descriptions,
+  and list items.
+- Avoid both on long prose, code, and preformatted content.
+- Use `font-variant-numeric: tabular-nums` for counters, timers, prices, tables,
+  and other updating numbers.
+
+### Font Smoothing
+
+On macOS, apply antialiased font smoothing at the root layout when the project
+does not already do so:
+
+```css
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+```
+
+### Image Outlines
+
+Images often need a subtle inset outline so their edges do not blur into the
+surface.
+
+```css
+img {
+  outline: 1px solid rgba(0, 0, 0, 0.1);
+  outline-offset: -1px;
+}
+
+@media (prefers-color-scheme: dark) {
+  img {
+    outline-color: rgba(255, 255, 255, 0.1);
+  }
+}
+```
+
+Use neutral black or white alpha outlines. Do not tint image outlines with the
+brand palette.
+
+### Motion
+
+Use CSS transitions for interactive state changes because they can retarget
+when the user changes intent mid-motion. Reserve keyframes for staged
+one-shot entrances or loading sequences.
+
+Good motion defaults:
+
+- Enter: combine opacity, small `translateY`, and optionally blur.
+- Exit: shorter and quieter than enter, usually 150ms.
+- Press: `scale(0.96)` for tactile buttons, with a way to disable it when the
+  movement distracts.
+- Icon swaps: cross-fade with opacity, scale, and blur instead of instant
+  visibility toggles.
+
+### Transition Scope
+
+Never use `transition: all`. Specify the changed properties:
+
+```css
+.button {
+  transition-property: transform, background-color, box-shadow;
+  transition-duration: 150ms;
+  transition-timing-function: ease-out;
+}
+```
+
+Use `will-change` only for first-frame stutter on compositor-friendly
+properties such as `transform`, `opacity`, and `filter`. Never use
+`will-change: all`.
+
+### Hit Areas
+
+Interactive controls should have at least a 40x40px hit area, ideally 44x44px
+where the layout allows it. Expand with a pseudo-element when the visible icon
+is smaller, but do not let expanded hit areas overlap.
+
+## Review Output
+
+When reviewing a UI polish pass, report concrete changes in before/after rows:
+
+| Principle | Before | After |
+| --- | --- | --- |
+| Concentric radius | Same radius on parent and child | Parent radius accounts for padding |
+| Tabular numbers | Counter shifts as digits change | Counter uses `tabular-nums` |
+| Transition scope | `transition: all` | Explicit transition properties |
+
+Include file paths and properties when they are not obvious from the snippets.
+Omit principles that you checked but did not change.
+
+## Checklist
+
+- Nested rounded elements are optically coherent.
+- Icons are visually centered.
+- Buttons, cards, and popovers use borders or shadows for the right reason.
+- Headings and short text avoid awkward wrapping.
+- Dynamic numbers use tabular numerals.
+- Images have neutral outlines where needed.
+- Enter and exit animations are split, subtle, and interruptible where
+  appropriate.
+- Buttons have tactile active states without exaggerated motion.
+- `transition: all` and `will-change: all` are absent.
+- Small controls still have usable hit areas.