#!/usr/bin/env bash # install.sh — Install the Greyhaven Design System into a consuming project. # # What it does: # 1. Symlinks SKILL.md into .claude/skills/ (for Claude Code) # 2. Symlinks AGENT.md into the project root (for non-Claude AI agents) # 3. Copies Aspekta font files + @font-face CSS into public/fonts/ # 4. Prints CSS import instructions for the consuming project # # Usage: # ./skill/install.sh /path/to/your/project set -euo pipefail SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)" SKILL_FILE="${SCRIPT_DIR}/SKILL.md" AGENT_FILE="${SCRIPT_DIR}/AGENT.md" FONTS_DIR="${REPO_ROOT}/public/fonts" if [ $# -ge 1 ]; then TARGET_PROJECT="$(cd "$1" && pwd)" else echo "Usage: $0 " echo "" echo "Example:" echo " $0 /path/to/my-app" echo " $0 ." exit 1 fi if [ ! -d "$TARGET_PROJECT" ]; then echo "Error: Directory not found: ${TARGET_PROJECT}" exit 1 fi echo "Installing Greyhaven Design System into ${TARGET_PROJECT}" echo "" # ── 1. Claude Skill ──────────────────────────────────────────────────────── if [ -f "$SKILL_FILE" ]; then SKILLS_DIR="${TARGET_PROJECT}/.claude/skills" mkdir -p "$SKILLS_DIR" LINK_PATH="${SKILLS_DIR}/greyhaven-design-system.md" if [ -L "$LINK_PATH" ]; then rm "$LINK_PATH" elif [ -f "$LINK_PATH" ]; then mv "$LINK_PATH" "${LINK_PATH}.bak" fi ln -s "$SKILL_FILE" "$LINK_PATH" echo "[ok] Claude Skill: ${LINK_PATH} -> ${SKILL_FILE}" else echo "[skip] SKILL.md not found — run 'pnpm skill:build' first" fi # ── 2. AGENT.md ──────────────────────────────────────────────────────────── if [ -f "$AGENT_FILE" ]; then AGENT_LINK="${TARGET_PROJECT}/AGENT.md" if [ -L "$AGENT_LINK" ]; then rm "$AGENT_LINK" elif [ -f "$AGENT_LINK" ]; then mv "$AGENT_LINK" "${AGENT_LINK}.bak" fi ln -s "$AGENT_FILE" "$AGENT_LINK" echo "[ok] AGENT.md: ${AGENT_LINK} -> ${AGENT_FILE}" else echo "[skip] AGENT.md not found — run 'pnpm skill:build' first" fi # ── 3. Fonts ─────────────────────────────────────────────────────────────── if [ -d "$FONTS_DIR" ]; then TARGET_FONTS="${TARGET_PROJECT}/public/fonts" mkdir -p "$TARGET_FONTS" # Copy only Aspekta woff2 files and the font-face CSS copied=0 for f in "$FONTS_DIR"/Aspekta-*.woff2; do [ -f "$f" ] || continue cp -n "$f" "$TARGET_FONTS/" 2>/dev/null && copied=$((copied + 1)) || true done # Copy font-face.css if [ -f "$FONTS_DIR/font-face.css" ]; then cp -n "$FONTS_DIR/font-face.css" "$TARGET_FONTS/" 2>/dev/null || true fi echo "[ok] Fonts: ${copied} Aspekta woff2 files copied to ${TARGET_FONTS}/" else echo "[skip] Fonts dir not found at ${FONTS_DIR}" fi # ── Done ─────────────────────────────────────────────────────────────────── echo "" echo "Done! Next steps for your project's CSS entry point:" echo "" echo " /* Add these @font-face declarations to your global CSS */" echo " @font-face { font-family: 'Aspekta'; font-weight: 400; font-display: swap; src: url('/fonts/Aspekta-400.woff2') format('woff2'); }" echo " @font-face { font-family: 'Aspekta'; font-weight: 500; font-display: swap; src: url('/fonts/Aspekta-500.woff2') format('woff2'); }" echo " @font-face { font-family: 'Aspekta'; font-weight: 600; font-display: swap; src: url('/fonts/Aspekta-600.woff2') format('woff2'); }" echo " @font-face { font-family: 'Aspekta'; font-weight: 700; font-display: swap; src: url('/fonts/Aspekta-700.woff2') format('woff2'); }" echo "" echo " /* Or import the full set: */" echo " @import url('/fonts/font-face.css');" echo "" echo " /* Set your font stack: */" echo " --font-sans: 'Aspekta', ui-sans-serif, system-ui, sans-serif;"