ss-update
I recommend we proceed with [1,2]. Review [3] yourself first? ``` ### Step 4: Execute Updates If user agrees, for each file: 1. Copy from `/tmp/styleseed` to project 2. Handle merge intelligently: - Always overwrite CLAUDE.md (Golden Rules are canonical) - Always overwrite DESIGN-LANGUAGE.md (learning resource, non-breaking) - Always overwrite skills in `.claude/skills/` - Never overwrite `theme.css` or user components 3. Migrate legacy files: rename old `ui-*` and `ux-*` skills to `ss-*` 4. Clean up old files if user wants ### Step 5: Verify & Report ```bash # Test the build npm run build # or your build command # Show what changed git status git diff --name-only ``` Tell user: "Your project is now on StyleSeed [version]. Commit these changes." The ss-update skill detects outdated StyleSeed framework files in a project and safely updates them to the latest version. Use it when your design
git clone --depth 1 https://github.com/bitjaru/styleseed /tmp/ss-update && cp -r /tmp/ss-update/engine/.claude/skills/ss-update ~/.claude/skills/ss-updateSKILL.md
# StyleSeed Update Assistant ## When NOT to use - For first-time setup → use `/ss-setup` - For just one new component or skin — copy that file manually - For projects that have heavily diverged from upstream — manual diff review first - For updating user code/components — this updates engine files only, not your custom UI Automatically detect and update StyleSeed files in the current project. ## Reassure the user first Updating is **safe and reversible**. Updates are additive — new rules, components, skins, and skills get added; your `theme.css`, your components, and your app code are never overwritten, and design rules only ever get added (never changed in a breaking way). A big version jump looks like a lot changed, but it's almost all additions. **Do NOT warn the user that the build will break** unless you actually find a changed component/import API. Tell them: commit first, copy the new rules + skills, run a build, and `git reset --hard` if anything is off — they can't permanently break their project. ## Instructions ### Step 1: Detect Current Setup Scan the project to find where StyleSeed files are: ```bash # Find DESIGN-LANGUAGE.md find . -name "DESIGN-LANGUAGE.md" -not -path "*/node_modules/*" # Find CLAUDE.md find . -name "CLAUDE.md" -not -path "*/node_modules/*" # Find skills (ss-* is current; ui-*/ux-* are legacy names to migrate from) find . -path "*/.claude/skills/ss-*" -o -path "*/.claude/skills/ui-*" -o -path "*/.claude/skills/ux-*" | head -20 # Find theme.css find . -name "theme.css" -not -path "*/node_modules/*" # Find .cursorrules find . -name ".cursorrules" ``` Report what was found and where. ### Step 2: Check StyleSeed Version Clone or pull latest styleseed: ```bash if [ -d "/tmp/styleseed" ]; then cd /tmp/styleseed && git pull else git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed fi ``` Compare versions: - Check if DESIGN-LANGUAGE.md has the Table of Contents (new version does) - Check if Golden Rules exist in CLAUDE.md - Count skills (latest = 12) - Check if .cursorrules exists ### Step 3: Report & Ask Show the user what needs updating: ``` StyleSeed Update Report: Current state: - DESIGN-LANGUAGE.md: [location] — [old/current version indicator] - Skills: [count] found (latest: 12) - Golden Rules: [yes/no] - .cursorrules: [yes/no] Recommended updates: 1. ✅ [safe] Update skills (X → 12) 2. ✅ [safe] Add .cursorrules 3. ⚠️ [review] Update DESIGN-LANGUAGE.md ([old line count] → [new line count]) 4. ⚠️ [merge] Add Golden Rules to CLAUDE.md (won't overwrite existing content) Shall I proceed? (I'll ask before each ⚠️ item) ``` ### Step 4: Execute Updates For each update, in order: **Always safe (do without asking):** - Copy skills: `cp -r /tmp/styleseed/engine/.claude/skills/ .claude/skills/` - Copy .cursorrules (if not exists): `cp /tmp/styleseed/engine/.cursorrules .cursorrules` **Ask before doing:** For DESIGN-LANGUAGE.md: - Show diff summary: how many new rules, what sections added - Ask: "Update DESIGN-LANGUAGE.md? (Y/N)" - If yes: copy to the detected location For CLAUDE.md (Golden Rules): - Check if Golden Rules section already exists - If not: ask "Add Golden Rules section to your CLAUDE.md? This adds 10 lines at the top. Your existing content stays untouched." - If yes: insert Golden Rules after the first heading **Never touch:** - theme.css — say "Your theme.css (skin) is untouched." - components/ — say "Your components are untouched. Run `/ss-lint` to check compliance." ### Step 5: Summary ``` Update complete! ✅ Skills: 12 (added X new) ✅ .cursorrules: added ✅ DESIGN-LANGUAGE.md: updated to latest ✅ Golden Rules: added to CLAUDE.md Not touched: - theme.css (your skin) - components/ (your code) Next: run /ss-lint on your pages to check for rule violations. ``` ## Important - NEVER overwrite theme.css - NEVER overwrite a project-specific CLAUDE.md — only MERGE the Golden Rules section - NEVER overwrite components without explicit user approval - Always show what will change before changing it - If unsure, ask the user
Audit a component or page for accessibility issues and fix them
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
Generate a new UI component following the StyleSeed design conventions
Generate UX microcopy (button labels, error messages, empty states, toasts) following a casual-but-polite voice and tone
Add appropriate user feedback states (loading, success, error, empty) to a component or page
Design user flows and navigation structure following proven UX patterns
Quick automated lint — detects common design system violations in seconds
Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe words into framer-motion code from one source of truth.