design system token v0.5.1
This commit is contained in:
Juan
119
skill/install.sh
119
skill/install.sh
@@ -1,11 +1,14 @@
|
||||
#!/usr/bin/env bash
|
||||
# install.sh — Install the Greyhaven Design System into a consuming project.
|
||||
#
|
||||
# Copies (does NOT symlink) files so the consuming project owns its copies.
|
||||
# Re-run this script to pull updated versions after design system changes.
|
||||
#
|
||||
# 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
|
||||
# 1. Copies SKILL.md into .claude/skills/ (for Claude Code)
|
||||
# 2. Copies AGENTS.md into the project root (standard convention)
|
||||
# 3. Copies Aspekta font files + font-face.css into public/fonts/
|
||||
# 4. Prints CSS import + MCP setup instructions
|
||||
#
|
||||
# Usage:
|
||||
# ./skill/install.sh /path/to/your/project
|
||||
@@ -15,7 +18,7 @@ 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"
|
||||
AGENTS_FILE="${SCRIPT_DIR}/AGENTS.md"
|
||||
FONTS_DIR="${REPO_ROOT}/public/fonts"
|
||||
|
||||
if [ $# -ge 1 ]; then
|
||||
@@ -34,41 +37,43 @@ if [ ! -d "$TARGET_PROJECT" ]; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Helper: backup existing file/symlink and copy new one
|
||||
copy_with_backup() {
|
||||
local src="$1"
|
||||
local dst="$2"
|
||||
|
||||
if [ -L "$dst" ]; then
|
||||
# Remove any existing symlink (leftover from old installs)
|
||||
rm "$dst"
|
||||
elif [ -f "$dst" ]; then
|
||||
mv "$dst" "${dst}.bak"
|
||||
echo " (backed up existing file to $(basename "${dst}.bak"))"
|
||||
fi
|
||||
|
||||
cp "$src" "$dst"
|
||||
}
|
||||
|
||||
echo "Installing Greyhaven Design System into ${TARGET_PROJECT}"
|
||||
echo ""
|
||||
|
||||
# ── 1. Claude Skill ────────────────────────────────────────────────────────
|
||||
# ── 1. SKILL.md ────────────────────────────────────────────────────────────
|
||||
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}"
|
||||
DST="${SKILLS_DIR}/greyhaven-design-system.md"
|
||||
copy_with_backup "$SKILL_FILE" "$DST"
|
||||
echo "[ok] SKILL.md: ${DST}"
|
||||
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}"
|
||||
# ── 2. AGENTS.md ───────────────────────────────────────────────────────────
|
||||
if [ -f "$AGENTS_FILE" ]; then
|
||||
DST="${TARGET_PROJECT}/AGENTS.md"
|
||||
copy_with_backup "$AGENTS_FILE" "$DST"
|
||||
echo "[ok] AGENTS.md: ${DST}"
|
||||
else
|
||||
echo "[skip] AGENT.md not found — run 'pnpm skill:build' first"
|
||||
echo "[skip] AGENTS.md not found — run 'pnpm skill:build' first"
|
||||
fi
|
||||
|
||||
# ── 3. Fonts ───────────────────────────────────────────────────────────────
|
||||
@@ -76,16 +81,15 @@ 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
|
||||
cp "$f" "$TARGET_FONTS/"
|
||||
copied=$((copied + 1))
|
||||
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
|
||||
cp "$FONTS_DIR/font-face.css" "$TARGET_FONTS/"
|
||||
fi
|
||||
|
||||
echo "[ok] Fonts: ${copied} Aspekta woff2 files copied to ${TARGET_FONTS}/"
|
||||
@@ -93,18 +97,37 @@ 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;"
|
||||
# ── Next steps ─────────────────────────────────────────────────────────────
|
||||
cat <<'EOF'
|
||||
|
||||
Done!
|
||||
|
||||
─── Next steps ────────────────────────────────────────────────────────────
|
||||
|
||||
1. Add Aspekta @font-face to your global CSS:
|
||||
|
||||
@font-face { font-family: 'Aspekta'; font-weight: 400; font-display: swap; src: url('/fonts/Aspekta-400.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'Aspekta'; font-weight: 500; font-display: swap; src: url('/fonts/Aspekta-500.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'Aspekta'; font-weight: 600; font-display: swap; src: url('/fonts/Aspekta-600.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'Aspekta'; font-weight: 700; font-display: swap; src: url('/fonts/Aspekta-700.woff2') format('woff2'); }
|
||||
|
||||
(Or import the full set: @import url('/fonts/font-face.css');)
|
||||
|
||||
And set the font stack:
|
||||
--font-sans: 'Aspekta', ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
2. (Optional) Register the Greyhaven MCP server. Create .mcp.json in your
|
||||
project root:
|
||||
|
||||
{
|
||||
"mcpServers": {
|
||||
"greyhaven": {
|
||||
"command": "npx",
|
||||
"args": ["tsx", "<ABSOLUTE_PATH_TO_GREYHAVEN_REPO>/mcp/server.ts"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
3. Re-run this script after design system updates to refresh your copies.
|
||||
|
||||
EOF
|
||||
|
||||
Reference in New Issue
Block a user