design system token v0.7
This commit is contained in:
Juan
110
skill/AGENTS.brand.md
Normal file
110
skill/AGENTS.brand.md
Normal file
@@ -0,0 +1,110 @@
|
||||
# Project Instructions
|
||||
|
||||
> **Auto-generated** by the Greyhaven Design System.
|
||||
> Re-generate: `pnpm skill:build` in the design system repo.
|
||||
>
|
||||
> Copy this file to your project root as `AGENTS.md` (standard), `CLAUDE.md`,
|
||||
> `.cursorrules`, or `.github/copilot-instructions.md` depending on your AI tool.
|
||||
|
||||
This project uses the **Greyhaven Design System**.
|
||||
|
||||
## Rules
|
||||
|
||||
- **ALWAYS use TypeScript** (`.tsx` / `.ts`). NEVER generate plain JavaScript (`.jsx` / `.js`).
|
||||
- Use the `greyhaven` SKILL.md for full design system context (tokens, components, composition rules). It should be installed at `.claude/skills/greyhaven-design-system.md` or accessible to your AI tool.
|
||||
- If the `greyhaven` MCP server is available, use its tools:
|
||||
- `list_components()` to find the right component for a UI need
|
||||
- `get_component(name)` to get exact props, variants, and usage examples
|
||||
- `validate_colors(code)` to check code for off-brand colors
|
||||
- `suggest_component(description)` to get recommendations
|
||||
- Import components from `components/ui/` (or `@/components/ui/` with path alias)
|
||||
- Never use raw hex colors -- use semantic Tailwind classes (`bg-primary`, `text-foreground`, `border-border`, etc.)
|
||||
- Use `font-sans` (Aspekta) for UI elements: buttons, nav, labels, forms
|
||||
- Use `font-serif` (Source Serif) for content: headings, body text
|
||||
- Trust the design system's default component variants for accent -- they apply orange at the right scale. Don't apply `bg-primary` to large surfaces, containers, or section backgrounds
|
||||
- All components are framework-agnostic React (no Next.js, no framework-specific imports)
|
||||
- Dark mode is toggled via the `.dark` class -- use semantic tokens that adapt automatically
|
||||
|
||||
## Component Summary
|
||||
|
||||
38 components across 8 categories: primitives (11), layout (4), overlay (5), navigation (3), data (4), feedback (4), form (1), composition (6).
|
||||
|
||||
For full component specs, props, and examples, refer to the SKILL.md file or use the MCP `get_component(name)` tool.
|
||||
|
||||
## Key Patterns
|
||||
|
||||
- **CVA variants**: Components use `class-variance-authority` for variant props
|
||||
- **Slot composition**: Components use `data-slot="name"` attributes
|
||||
- **Class merging**: Always use `cn()` from `@/lib/utils` (clsx + tailwind-merge)
|
||||
- **Focus rings**: `focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`
|
||||
- **Disabled**: `disabled:pointer-events-none disabled:opacity-50`
|
||||
- **Card spacing**: `gap-6` between cards, `p-6` internal padding
|
||||
- **Section rhythm**: `py-16` between major sections
|
||||
- **Form layout**: Vertical stack with `gap-4`, labels above inputs
|
||||
|
||||
## Font Setup
|
||||
|
||||
If fonts aren't loaded yet, add to your global CSS:
|
||||
```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'); }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Brand Voice and Messaging
|
||||
|
||||
This project generates user-facing content (marketing copy, CTAs, landing pages, product explanations, emails) and MUST follow the Greyhaven brand voice.
|
||||
|
||||
### Brand Rules
|
||||
|
||||
- **Before writing any user-facing copy**, read the brand skill:
|
||||
- Claude Code / compatible tools: `.claude/skills/greyhaven-brand.md` (full voice/tone/messaging reference)
|
||||
- Or via MCP: call `get_brand_rules()` (or a specific section: `positioning`, `axes`, `tone`, `writing-rules`, `reasoning-patterns`, `cta`, `logo`, `self-check`)
|
||||
- **Before shipping any user-facing copy**, validate it:
|
||||
- Via MCP: call `validate_copy(text)` to lint for hype words, vague superlatives, urgency framing, and exclamation marks
|
||||
- Or manually run the 8-item self-check list from the brand skill
|
||||
|
||||
### Core Voice (memorize)
|
||||
|
||||
- **Direct. Plain-spoken technical.** Write like an engineer who explains systems cleanly, without mystique or theatrics.
|
||||
- **No** hype adjectives (`revolutionary`, `cutting-edge`, `seamless`, `game-changing`, `powerful`).
|
||||
- **No** evangelism verbs (`unleash`, `transform`, `empower`, `supercharge`, `unlock`).
|
||||
- **No** sales language, urgency framing, exclamation marks.
|
||||
- **No** jargon for its own sake. Prefer plain words: "where the data goes" over "data paths"; "things the system relies on" over "dependencies".
|
||||
- **Yes** specifics, causal reasoning, concrete outcomes.
|
||||
|
||||
### The Three Brand Axes
|
||||
|
||||
Copy must land on the correct side of each:
|
||||
1. **Containment** — systems run inside the perimeter, nothing leaks (not cloud/SaaS narratives)
|
||||
2. **Human-centered** — built around how people actually work (not around model capabilities)
|
||||
3. **Engineered** — from real deployments and constraints (not vision-first, theatrical, speculative)
|
||||
|
||||
### Reasoning Patterns to Use
|
||||
|
||||
Structure explanations as:
|
||||
- **Cause → Effect**
|
||||
- **Constraint → Outcome**
|
||||
- **Observation → Explanation**
|
||||
- **Finite Scope → Concrete Result**
|
||||
|
||||
### CTA Guidance
|
||||
|
||||
- **Good**: "Map your first process", "See how it runs in your environment", "Review the architecture", "Get a working prototype in 48 hours"
|
||||
- **Avoid**: "Unleash the power of AI", "Transform your business", "Don't miss out!", "Get started today!"
|
||||
|
||||
### Logo Usage
|
||||
|
||||
Logos live in `public/logos/` after install. See the brand skill for the full rules (clearspace, minimum sizes, what to avoid).
|
||||
|
||||
- **Full logo** (symbol + wordmark): `gh-logo-positive-full-black.svg` (light bg), `gh-logo-white.svg` (dark bg), `gh-logo-offblack.svg` (warm-neutral)
|
||||
- **Symbol only**: `gh-symbol-full-black.svg`, `gh-symbol-full-white.svg` — only when Greyhaven recognition is already established
|
||||
- **Product lockups**: `greyproxy-positive.svg`, `greywall-positive.svg`
|
||||
- **Never**: change opacity, apply new colors, stretch, rotate, apply gradients/shadows, alter the symbol-to-wordmark ratio
|
||||
|
||||
### One-Line Test
|
||||
|
||||
Before writing a sentence, ask: *Would an engineer who understands the system read this and feel it's accurate, direct, and free of hype?* If not, rewrite.
|
||||
273
skill/BRAND.md
Normal file
273
skill/BRAND.md
Normal file
@@ -0,0 +1,273 @@
|
||||
# Greyhaven Brand Voice & Messaging -- Claude Skill
|
||||
|
||||
> **Source of truth**: `vibedocs/greyhaven-brand-system.md` (Brand Guidelines v1.1)
|
||||
>
|
||||
> This skill applies when generating ANY user-facing content for Greyhaven:
|
||||
> marketing copy, landing pages, CTAs, product descriptions, documentation,
|
||||
> email, README intros, explanations of how the product works, or any prose
|
||||
> that will be read by a human. It does NOT apply to internal code comments,
|
||||
> commit messages, or technical logs.
|
||||
|
||||
---
|
||||
|
||||
## 1. The One-Line Test
|
||||
|
||||
Before writing any sentence, ask:
|
||||
|
||||
> Would an engineer who understands the system read this and feel it's accurate, direct, and free of hype?
|
||||
|
||||
If no, rewrite. That single test catches 90% of brand drift.
|
||||
|
||||
---
|
||||
|
||||
## 2. Core Positioning (memorize)
|
||||
|
||||
**Greyhaven builds custom, contained AI systems that run entirely inside the client's environment, shaped by real operational constraints and deployed under the client's control.**
|
||||
|
||||
**Short form**: *Local-first AI systems shaped by real work. Built where work happens. Contained end to end.*
|
||||
|
||||
Powered by Monadical's internal, open-source stack, hardened over eight years.
|
||||
|
||||
---
|
||||
|
||||
## 3. The Three Brand Axes
|
||||
|
||||
Every sentence, heading, or visual choice should land on the correct side of these three axes. When in doubt, use them to explain *why* something is wrong without relying on taste.
|
||||
|
||||
| Axis | Greyhaven is on this side | NOT this side |
|
||||
|------|---------------------------|---------------|
|
||||
| **Containment** | Systems run inside the perimeter. Nothing leaks. | Cloud/SaaS narratives. "Connected everywhere." |
|
||||
| **Human-centered** | Built around how people actually work. | Built around model capabilities or vendor features. |
|
||||
| **Engineered** | From real deployments, constraints, operator reality. | Vision-first, theatrical, speculative, futuristic. |
|
||||
|
||||
If copy drifts toward **exposure, performance, or model-led thinking → it doesn't fit**.
|
||||
|
||||
---
|
||||
|
||||
## 4. Tone of Voice
|
||||
|
||||
**Direct. Plain-spoken technical. Explains difficult things in simple terms.**
|
||||
|
||||
Greyhaven speaks like an engineer who understands how systems work and can describe them cleanly -- without mystique or theatrics.
|
||||
|
||||
- **No** jargon for its own sake
|
||||
- **No** oversimplification
|
||||
- **No** sales language
|
||||
- **No** hype adjectives ("revolutionary", "cutting-edge", "seamless", "powerful", "game-changing")
|
||||
- **No** evangelism ("unleash", "empower", "transform")
|
||||
- **No** emotional leverage or fear-mongering
|
||||
- **Yes** calm, precise, explanatory
|
||||
- **Yes** mechanical facts
|
||||
- **Yes** specifics over superlatives
|
||||
- **Yes** authority through clarity, not volume
|
||||
|
||||
---
|
||||
|
||||
## 5. Writing Rules
|
||||
|
||||
### 5.1 Explain clearly. Don't perform.
|
||||
|
||||
The goal is clarity, not persuasion. Readers have different levels of technical know-how. Describe what happens inside the environment, how data flows, which dependencies matter, what boundaries exist. If something is complex, break it down without dumbing it down.
|
||||
|
||||
### 5.2 Plain-language engineering
|
||||
|
||||
Use everyday words for technical realities. If a simpler word communicates the same thing, use it.
|
||||
|
||||
| Instead of | Prefer |
|
||||
|-----------|--------|
|
||||
| "data paths" | "where the data goes" |
|
||||
| "surfaces" | "places where exposure/risk can happen" |
|
||||
| "dependencies" | "things the system relies on" |
|
||||
| "isolation" | "kept separate from the outside" |
|
||||
| "logs" | "records of what happened" |
|
||||
| "handoffs" | "when one person/system passes something to another" |
|
||||
| "leverage" | "use" |
|
||||
| "leverage AI to..." | "the system uses AI to..." |
|
||||
| "synergy" | (don't use) |
|
||||
| "cutting-edge solution" | (don't use) |
|
||||
| "transform your workflow" | describe what the system does instead |
|
||||
|
||||
Don't assume the reader knows technical shorthand. The reader should leave with a clearer mental model, not an impressed feeling.
|
||||
|
||||
### 5.3 Human-first in how we describe work
|
||||
|
||||
Start from what operators actually do -- steps, judgment calls, knowledge. Explain operator behaviors the same way you explain systems: concretely and without dramatization.
|
||||
|
||||
### 5.4 Security, stated without drama
|
||||
|
||||
Mechanical facts, not alarmism.
|
||||
|
||||
- **Good**: "Running inside the perimeter restores finite boundaries."
|
||||
- **Bad**: "Protect your data from devastating breaches!"
|
||||
|
||||
State causal reasoning. No emotional leverage.
|
||||
|
||||
### 5.5 Quiet confidence
|
||||
|
||||
State specifics. No hype adjectives. No evangelism. Authority comes from clarity, not volume.
|
||||
|
||||
- **Good**: "A working, testable prototype delivered in 24-48 hours."
|
||||
- **Bad**: "Lightning-fast, industry-leading AI delivery!"
|
||||
|
||||
---
|
||||
|
||||
## 6. Patterns for Reasoning
|
||||
|
||||
Use these four patterns to structure explanations. They express engineering logic: minimal wording, direct causality, observable/verifiable outcomes.
|
||||
|
||||
### Cause → Effect
|
||||
> "When work relies on external AI services, every step -- inputs, outputs, logs, metadata -- becomes part of someone else's infrastructure."
|
||||
|
||||
### Constraint → Outcome
|
||||
> "No external APIs and no data leaving the environment. The system remains contained, and the client keeps full operational and security control."
|
||||
|
||||
### Observation → Explanation
|
||||
> "We sit with the operators, map the steps, and build a system that mirrors what actually happens."
|
||||
|
||||
### Finite Scope → Concrete Result
|
||||
> "One process at a time. A working, testable prototype delivered in 24-48 hours."
|
||||
|
||||
---
|
||||
|
||||
## 7. CTA Guidance
|
||||
|
||||
Greyhaven CTAs should be concrete and engineering-flavored, not aspirational or urgent.
|
||||
|
||||
**Good CTA patterns**:
|
||||
- "See how it runs in your environment"
|
||||
- "Map your first process"
|
||||
- "Review the architecture"
|
||||
- "Read how it's deployed"
|
||||
- "Get a working prototype in 48 hours"
|
||||
|
||||
**Avoid**:
|
||||
- "Unlock the power of AI"
|
||||
- "Transform your business today"
|
||||
- "Don't miss out!"
|
||||
- "Revolutionary AI solutions await"
|
||||
- Urgency/scarcity framing ("limited time", "hurry", "act now")
|
||||
- Hype verbs ("unleash", "supercharge", "revolutionize")
|
||||
|
||||
---
|
||||
|
||||
## 8. Driving Ideas (use these to self-check)
|
||||
|
||||
A sentence, heading, or design choice should feel like one of these:
|
||||
|
||||
> **(System-)aware · Applied · Adaptable · Unblocking · Safe-to-experiment · Contained · Durable · Iterative**
|
||||
|
||||
If it doesn't land on any of them, or lands somewhere else (flashy, theatrical, aspirational), rewrite.
|
||||
|
||||
---
|
||||
|
||||
## 9. Typography Approach (for written-content UI)
|
||||
|
||||
Hierarchy is built through **tonal shifts**, not decorative treatments.
|
||||
|
||||
- Primary points stay **dark and controlled** (foreground text)
|
||||
- Supporting detail **moves lighter** (muted-foreground)
|
||||
- The orange accent is **reserved** for parts that require immediate attention -- never decorative
|
||||
|
||||
Do NOT establish hierarchy through:
|
||||
- Multiple contrasting typefaces
|
||||
- Decorative styles (italics for emphasis, ALL CAPS for drama, oversized type for style)
|
||||
- Color variety
|
||||
|
||||
DO establish hierarchy through:
|
||||
- Weight differences within the same family (serif for content, sans for UI)
|
||||
- Shade shifts between foreground, muted-foreground, and the orange accent
|
||||
- Spatial rhythm (section padding, line-height)
|
||||
|
||||
This keeps the system quiet, structured, and readable.
|
||||
|
||||
---
|
||||
|
||||
## 10. Logo Usage
|
||||
|
||||
### Available files (in `public/logos/` after install)
|
||||
|
||||
| File | Use when |
|
||||
|------|----------|
|
||||
| `gh-logo-positive-full-black.svg` | Full logo (symbol + wordmark) on light backgrounds |
|
||||
| `gh-logo-white.svg` | Full logo on dark backgrounds |
|
||||
| `gh-logo-offblack.svg` | Full logo in off-black (#161614) for warm-neutral contexts |
|
||||
| `gh-symbol-full-black.svg` | Symbol only, light bg (use when name recognition is already established) |
|
||||
| `gh-symbol-full-white.svg` | Symbol only, dark bg |
|
||||
| `greyproxy-positive.svg` | Greyproxy product logo (Greyhaven symbol + product wordmark) |
|
||||
| `greywall-positive.svg` | Greywall product logo (Greyhaven symbol + product wordmark) |
|
||||
|
||||
### Rules
|
||||
|
||||
- **Structure**: The logo is **Symbol + Wordmark**. Keep them locked together in most contexts. Use the Symbol alone only when Greyhaven name recognition is already assured.
|
||||
- **Clearspace**: Minimum 1× (one grid module of the symbol) on all sides. Nothing -- text, images, other graphics -- enters this zone.
|
||||
- **Minimum sizes**:
|
||||
- Wordmark lockup: 20mm print / 120px digital
|
||||
- Standalone symbol: 8mm print / 14px digital (22px preferred)
|
||||
|
||||
### What to avoid (all of these are brand violations)
|
||||
|
||||
- Do NOT change opacity
|
||||
- Do NOT apply new colors (black, white, off-black only -- per file)
|
||||
- Do NOT stretch or alter proportions
|
||||
- Do NOT apply gradients, shadows, glows, or other embellishments
|
||||
- Do NOT rotate
|
||||
- Do NOT change the lockup or alter symbol/wordmark relative scale
|
||||
|
||||
### Product logos
|
||||
|
||||
New Greyhaven products/demos reuse the Greyhaven symbol with the product wordmark in the same lockup pattern (see `greyproxy-positive.svg`, `greywall-positive.svg`). Typography for new wordmarks: Circular Medium. Do NOT invent a new symbol unless the product genuinely needs its own sub-identity.
|
||||
|
||||
---
|
||||
|
||||
## 11. Self-check Before Shipping Any Copy
|
||||
|
||||
Run the output through these checks:
|
||||
|
||||
1. ☐ Does it pass **The One-Line Test** (accurate, direct, no hype)?
|
||||
2. ☐ Does it land on the correct side of all **three brand axes** (containment, human-centered, engineered)?
|
||||
3. ☐ Did I use any **banned words** (unleash, transform, revolutionary, seamless, game-changing, cutting-edge, leverage, synergy, unlock)?
|
||||
4. ☐ Is every claim **specific and verifiable**, or am I using vague superlatives?
|
||||
5. ☐ Does the copy **explain how the thing works**, or just tell the reader how to feel about it?
|
||||
6. ☐ Does it match a **reasoning pattern** (cause→effect, constraint→outcome, observation→explanation, finite scope→concrete result)?
|
||||
7. ☐ Does it fit one of the **driving ideas** (system-aware, applied, adaptable, unblocking, safe-to-experiment, contained, durable, iterative)?
|
||||
8. ☐ Is the orange accent used only where immediate attention is warranted, not as decoration?
|
||||
|
||||
If any box is unchecked, rewrite.
|
||||
|
||||
---
|
||||
|
||||
## 12. Quick Examples
|
||||
|
||||
### Bad vs. Good: Hero headline
|
||||
|
||||
| Bad | Good |
|
||||
|-----|------|
|
||||
| "Unleash the power of AI in your organization" | "AI systems that run inside your environment" |
|
||||
| "Revolutionary cloud-native AI platform" | "Custom AI, contained end to end" |
|
||||
| "Transform your workflows with next-gen AI" | "Map one process. Deploy a working prototype in 48 hours." |
|
||||
|
||||
### Bad vs. Good: Feature description
|
||||
|
||||
**Bad**:
|
||||
> Our cutting-edge AI seamlessly integrates with your existing infrastructure to unlock unprecedented productivity gains.
|
||||
|
||||
**Good**:
|
||||
> The system runs on the machines you already have. Data, models, and execution stay inside your perimeter. Nothing is sent to external APIs.
|
||||
|
||||
### Bad vs. Good: CTA
|
||||
|
||||
| Bad | Good |
|
||||
|-----|------|
|
||||
| "Get started today!" | "Map your first process" |
|
||||
| "Try it free -- limited time!" | "Review the architecture" |
|
||||
| "Unlock AI superpowers" | "See a 48-hour prototype" |
|
||||
|
||||
---
|
||||
|
||||
## 13. When You're Unsure
|
||||
|
||||
Default to:
|
||||
1. **Fewer words**. Greyhaven copy is shorter than you expect.
|
||||
2. **More specifics**. Numbers, concrete nouns, named constraints.
|
||||
3. **Less enthusiasm**. No exclamation marks. No superlatives. No urgency.
|
||||
4. **Describe the system, not the feeling**.
|
||||
123
skill/install.sh
123
skill/install.sh
@@ -4,14 +4,19 @@
|
||||
# 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:
|
||||
# What it does (by default):
|
||||
# 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
|
||||
#
|
||||
# With --brand-skill:
|
||||
# 5. Copies BRAND.md into .claude/skills/ (voice, tone, messaging rules)
|
||||
# 6. Copies Greyhaven logo SVGs into public/logos/
|
||||
#
|
||||
# Usage:
|
||||
# ./skill/install.sh /path/to/your/project
|
||||
# ./skill/install.sh /path/to/your/project --brand-skill
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
@@ -19,16 +24,49 @@ SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
|
||||
SKILL_FILE="${SCRIPT_DIR}/SKILL.md"
|
||||
AGENTS_FILE="${SCRIPT_DIR}/AGENTS.md"
|
||||
AGENTS_BRAND_FILE="${SCRIPT_DIR}/AGENTS.brand.md"
|
||||
BRAND_FILE="${SCRIPT_DIR}/BRAND.md"
|
||||
FONTS_DIR="${REPO_ROOT}/public/fonts"
|
||||
PUBLIC_DIR="${REPO_ROOT}/public"
|
||||
|
||||
if [ $# -ge 1 ]; then
|
||||
TARGET_PROJECT="$(cd "$1" && pwd)"
|
||||
else
|
||||
echo "Usage: $0 <target-project-directory>"
|
||||
echo ""
|
||||
echo "Example:"
|
||||
echo " $0 /path/to/my-app"
|
||||
echo " $0 ."
|
||||
# Parse arguments
|
||||
TARGET_PROJECT=""
|
||||
INSTALL_BRAND=false
|
||||
|
||||
while [ $# -gt 0 ]; do
|
||||
case "$1" in
|
||||
--brand-skill)
|
||||
INSTALL_BRAND=true
|
||||
shift
|
||||
;;
|
||||
-h|--help)
|
||||
echo "Usage: $0 <target-project-directory> [--brand-skill]"
|
||||
echo ""
|
||||
echo "Options:"
|
||||
echo " --brand-skill Also install BRAND.md (voice/tone/messaging) and logo SVGs"
|
||||
echo ""
|
||||
echo "Examples:"
|
||||
echo " $0 /path/to/my-app"
|
||||
echo " $0 /path/to/my-app --brand-skill"
|
||||
echo " $0 . --brand-skill"
|
||||
exit 0
|
||||
;;
|
||||
*)
|
||||
if [ -z "$TARGET_PROJECT" ]; then
|
||||
TARGET_PROJECT="$1"
|
||||
else
|
||||
echo "Error: Unexpected argument: $1"
|
||||
echo "Run '$0 --help' for usage."
|
||||
exit 1
|
||||
fi
|
||||
shift
|
||||
;;
|
||||
esac
|
||||
done
|
||||
|
||||
if [ -z "$TARGET_PROJECT" ]; then
|
||||
echo "Usage: $0 <target-project-directory> [--brand-skill]"
|
||||
echo "Run '$0 --help' for details."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
@@ -37,13 +75,14 @@ if [ ! -d "$TARGET_PROJECT" ]; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
TARGET_PROJECT="$(cd "$TARGET_PROJECT" && pwd)"
|
||||
|
||||
# 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"
|
||||
@@ -54,6 +93,9 @@ copy_with_backup() {
|
||||
}
|
||||
|
||||
echo "Installing Greyhaven Design System into ${TARGET_PROJECT}"
|
||||
if [ "$INSTALL_BRAND" = true ]; then
|
||||
echo " (with --brand-skill: BRAND.md + logos)"
|
||||
fi
|
||||
echo ""
|
||||
|
||||
# ── 1. SKILL.md ────────────────────────────────────────────────────────────
|
||||
@@ -68,12 +110,22 @@ else
|
||||
fi
|
||||
|
||||
# ── 2. AGENTS.md ───────────────────────────────────────────────────────────
|
||||
if [ -f "$AGENTS_FILE" ]; then
|
||||
DST="${TARGET_PROJECT}/AGENTS.md"
|
||||
copy_with_backup "$AGENTS_FILE" "$DST"
|
||||
echo "[ok] AGENTS.md: ${DST}"
|
||||
# Pick the brand-augmented variant if --brand-skill is passed, so agents
|
||||
# working in the consuming project know how to use the brand skill + MCP tools.
|
||||
if [ "$INSTALL_BRAND" = true ] && [ -f "$AGENTS_BRAND_FILE" ]; then
|
||||
AGENTS_SRC="$AGENTS_BRAND_FILE"
|
||||
AGENTS_LABEL="AGENTS.md (with brand voice addendum)"
|
||||
else
|
||||
echo "[skip] AGENTS.md not found — run 'pnpm skill:build' first"
|
||||
AGENTS_SRC="$AGENTS_FILE"
|
||||
AGENTS_LABEL="AGENTS.md"
|
||||
fi
|
||||
|
||||
if [ -f "$AGENTS_SRC" ]; then
|
||||
DST="${TARGET_PROJECT}/AGENTS.md"
|
||||
copy_with_backup "$AGENTS_SRC" "$DST"
|
||||
echo "[ok] ${AGENTS_LABEL}: ${DST}"
|
||||
else
|
||||
echo "[skip] AGENTS source not found — run 'pnpm skill:build' first"
|
||||
fi
|
||||
|
||||
# ── 3. Fonts ───────────────────────────────────────────────────────────────
|
||||
@@ -97,6 +149,47 @@ else
|
||||
echo "[skip] Fonts dir not found at ${FONTS_DIR}"
|
||||
fi
|
||||
|
||||
# ── 4. Brand skill (opt-in via --brand-skill) ──────────────────────────────
|
||||
if [ "$INSTALL_BRAND" = true ]; then
|
||||
# 4a. BRAND.md into .claude/skills/
|
||||
if [ -f "$BRAND_FILE" ]; then
|
||||
SKILLS_DIR="${TARGET_PROJECT}/.claude/skills"
|
||||
mkdir -p "$SKILLS_DIR"
|
||||
DST="${SKILLS_DIR}/greyhaven-brand.md"
|
||||
copy_with_backup "$BRAND_FILE" "$DST"
|
||||
echo "[ok] BRAND.md: ${DST}"
|
||||
else
|
||||
echo "[skip] BRAND.md not found at ${BRAND_FILE}"
|
||||
fi
|
||||
|
||||
# 4b. Logo SVGs into public/logos/
|
||||
TARGET_LOGOS="${TARGET_PROJECT}/public/logos"
|
||||
mkdir -p "$TARGET_LOGOS"
|
||||
|
||||
logo_files=(
|
||||
"gh - logo - positive - full black.svg"
|
||||
"gh - logo - white.svg"
|
||||
"gh - logo - offblack.svg"
|
||||
"gh - symbol - full black.svg"
|
||||
"gh - symbol - full white.svg"
|
||||
"greyproxy - positive.svg"
|
||||
"greywall - positive.svg"
|
||||
)
|
||||
|
||||
# Rename files on copy to remove spaces — better for web paths
|
||||
copied=0
|
||||
for f in "${logo_files[@]}"; do
|
||||
src="${PUBLIC_DIR}/${f}"
|
||||
if [ -f "$src" ]; then
|
||||
# "gh - logo - positive - full black.svg" → "gh-logo-positive-full-black.svg"
|
||||
clean_name=$(echo "$f" | sed 's/ - /-/g; s/ /-/g')
|
||||
cp "$src" "${TARGET_LOGOS}/${clean_name}"
|
||||
copied=$((copied + 1))
|
||||
fi
|
||||
done
|
||||
echo "[ok] Logos: ${copied} SVGs copied to ${TARGET_LOGOS}/ (renamed: spaces → dashes)"
|
||||
fi
|
||||
|
||||
# ── Next steps ─────────────────────────────────────────────────────────────
|
||||
cat <<'EOF'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user