npm version npm downloads

moodforge

A complete design pipeline for Claude Code.
36 skills. 11 agents. One command.

npx moodforge

--- Turn Claude into a senior UI/UX designer that deeply understands your product, shows you real screens before committing to anything, uses GSAP for production animations, maps every component to shadcn/ui, and tracks state so rejected directions never come back. This package is the installer. It downloads 36 skills onto your machine in three to five seconds. Zero npm dependencies, roughly 14 source files, ~70 KB packed. ## Quick start ```bash npx moodforge ``` One question -- global or project -- then pip the pixel mascot walks across a progress bar while 36 skills install: ``` ██ M O O D F O R G E ██ a curated Claude Code design skill stack ───────────────────────────────────────────────────────────────────── install the design stack, where to? ● global ~/.claude/skills available in every Claude Code session ○ project ./.claude/skills lives next to your repo, easy to commit → global ``` Pick with arrow keys, press Enter, and watch it run: ``` ▄▄▄ ◦ ● ◦ ◔ ◔ ● ◉ ● ▀▄▀ ◦ ● ◦ ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▱▱▱▱▱▱▱▱▱▱▱▱▱▱▱▱▱▱▱▱▱ 58% ✓ 1 preflight skills dir ready ✓ 2 moodforge (local) ~/.claude/skills/moodforge ⠹ 3 pbakaus/impeccable installing 14 of 23 · normalize · 4 emilkowalski/skill · 5 greensock/gsap-skills · 6 shadcn/ui · 7 design-stack-coordinator · 8 plugin checks fetching pbakaus/impeccable · main ``` While a GitHub tarball downloads, pip stops walking, switches to a thinking face, and a small morphing amoeba blob appears next to him -- the terminal equivalent of Claude's fluttering "thinking" indicator. When it finishes: ``` scope global · target ~/.claude/skills · 36 installed ◆ open Claude Code and say "design me an app" ``` Then open Claude Code and say **"design me an app"**. --- ## The pipeline

1	Discovery	Analyze the product. Gather references. Show 3-5 genuinely different design directions with full color schemes, typography, and layout patterns.
2	Screen Preview	Build 1-2 real screens in the chosen direction. "Does this look good to you?" Validate before investing in a brand kit.
3	Brand Kit	Production-grade tokens (`tokens.css`, `tokens.ts`, `tokens.json`), 11-section visual brand book, WCAG-verified, components mapped to shadcn/ui.
4	Animation Review	GSAP-powered motion gallery. Interactive easing curves, button states, drawer slides, toast stacks. "Are these the animations you want?"
5	All Screens	Every screen, one at a time, with real data. Each shown individually for approval before moving to the next.
6	Production	Implementation spec with Motion appendix + GSAP appendix + Component appendix. Hand off to an engineer or `superpowers:executing-plans`.
+	Figma (optional)	Push brand kit + screens to a real Figma file via MCP.

Every artifact opens in your browser automatically. Every round is logged. Every rejection is remembered. --- ## What gets installed | Package | Skills | What it does | |:---|:---:|:---| | **moodforge** | 1 | The 7-step pipeline. Senior UI/UX designer voice, state tracking, visual companion. Bundled in this package. | | [**pbakaus/impeccable**](https://github.com/pbakaus/impeccable) | 23 | `bolder` `delight` `audit` `polish` `arrange` `typeset` `colorize` `harden` `clarify` `extract` `optimize` `critique` `onboard` `normalize` `quieter` `distill` `overdrive` `animate` `adapt` `shape` `frontend-design` `impeccable` `teach-impeccable` | | [**emilkowalski/skill**](https://github.com/emilkowalski/skill) | 1 | `emil-design-eng` -- the canonical animation + UI craft playbook | | [**greensock/gsap-skills**](https://github.com/greensock/gsap-skills) | 8 | `gsap-core` `gsap-timeline` `gsap-scrolltrigger` `gsap-plugins` `gsap-performance` `gsap-react` `gsap-frameworks` `gsap-utils` | | [**shadcn/ui**](https://github.com/shadcn/ui) | 1 | Component architecture, registry integration, composable UI primitives | | **design-stack-coordinator** | 1 | Orchestration rules: which skill fires when, loading order, anti-patterns. Written at install time. | After install, the installer scans `~/.claude/plugins/cache` for the Anthropic plugin skills (`frontend-design`, `brainstorming`, `figma-use`, `figma-generate-library`) and reports which are present. If a plugin is missing, it tells you the exact `/plugin install` command to run inside Claude Code. **36 skills installed. One question asked. No flags to remember.** --- ## Example session ``` You: I want to design a mobile app for a coffee subscription service. Claude: [analyzes the product -- subscription model, coffee enthusiasts, recurring purchases, discovery + ritual] Claude: I've analyzed your product. Coffee subscriptions are about ritual and discovery. Open the browser -- 4 directions: A. "Slow Roast" -- warm cream, hand-lettered, slow morning vibe B. "Third Wave" -- clinical white, mono numerals, science-of-coffee C. "Hearth" -- deep ember, serif display, evening wind-down D. "Bean Counter" -- moss green, grid-heavy, subscription tracker UX You: C, but quieter. Claude: [builds 2 key screens -- home feed + roaster detail] Claude: Here's your home screen and roaster detail. Does this look good? You: Yes. Build the brand kit. Claude: [full brand kit with tokens, shadcn/ui components, GSAP motion, WCAG-verified colors, 11-section visual brand book] ``` Per-project state means the next time you say *"let's keep working on the coffee sub app"*, Claude reads the state file and resumes from exactly where you left off. --- ## The rules > These are non-negotiable. Every agent enforces them. | # | Rule | |:---:|:---| | 1 | **Understand the product first.** You are a senior UI/UX designer, not a theme picker. | | 2 | **Never re-propose rejected directions.** Verbatim rejections bind future sessions. | | 3 | **Show screens before committing.** Validate with 1-2 real screens before building a brand kit. | | 4 | **Real data, not placeholders.** Real merchants, real amounts, real timestamps. | | 5 | **Never ship "normal and okay".** Every creation skill is paired with `bolder`, `overdrive`, or `delight`. | | 6 | **Motion follows `emil-design-eng`, powered by GSAP.** Rules from emil, tooling from GSAP. | | 7 | **Show screens one at a time.** Individual approval, not a 20-screen dump. | | 8 | **Always preview on localhost.** Auto-open the browser. Never ask permission. | | 9 | **Read state first, every session.** Resume from where you left off. | --- ## Utility commands ```bash npx moodforge doctor # check stack health, list manifests npx moodforge list # list installed skills with descriptions npx moodforge add # install any other skill repo from GitHub ``` The `add` command supports: | Flag | Default | What it does | |:---|:---|:---| | `--ref ` | `main` | git ref to install from | | `--skill ` | *(all)* | install only one skill from the repo | | `--force` | off | overwrite an existing install | | `--dry-run` | off | preview without writing files | ```bash npx moodforge add anthropics/skills --skill code-review --force ``` --- ## Requirements - **Node >= 18** (uses native `fetch` and `fs.cp`) - **`tar` on PATH** (default on macOS, Linux, modern Windows) Zero npm dependencies. Roughly 14 source files, ~70 KB packed. ---

Architecture

``` installer/ ├── bin/ │ └── design-pipeline.js CLI entry, routes to commands/ ├── lib/ │ ├── commands/ │ │ ├── interactive.js default flow, one question │ │ ├── init.js the install runner, drives PipFrame │ │ ├── doctor.js stack health check │ │ ├── list.js list installed skills │ │ └── add.js ad-hoc skill install from a GitHub repo │ ├── install/ │ │ ├── copy-skill.js copies a skill dir, writes .skill-manifest.json │ │ ├── fetch-tarball.js downloads + extracts a GitHub tarball │ │ ├── find-skills.js walks an extracted tree looking for SKILL.md │ │ └── frontmatter.js parses YAML frontmatter, zero-dep │ ├── util/ │ │ ├── log.js warm amber editorial UI: masthead, PipFrame, │ │ │ pip sprite, glyphs, spinner, finalAction │ │ └── paths.js SKILLS_HOME, PLUGIN_CACHE, source resolution │ ├── interactive.js raw-mode arrow-key TUI: select, checkbox, │ │ confirm, with persistent pip header │ └── coordinator-skill-content.js design-stack-coordinator SKILL.md │ written at install time ├── scripts/ │ └── bundle-skill.js prepublish hook: copies parent skill source │ into installer/skill-source/ for npm pack └── package.json name: moodforge, bin: { moodforge: bin/* } ``` ### Two modes for the skill source The installer needs to find the moodforge skill files (`SKILL.md`, `references/`, `templates/`, `projects/`). It looks in two places: 1. **Dev mode** (running from a clone of the repo): `DESIGN_PIPELINE_SRC` resolves to the parent of `installer/`, which is the repo root. 2. **Published mode** (running via `npx moodforge` after `npm publish`): `DESIGN_PIPELINE_SRC` resolves to `installer/skill-source/`, populated by `scripts/bundle-skill.js` during the `prepublishOnly` hook. Same code, both modes work.

The visual layer

`lib/util/log.js` is intentionally over-designed. It uses: - **One warm amber accent.** No cyan-purple AI slop. - **ANSI BOLD for the wordmark.** Never hard-coded ink color, so it reads correctly on both light and dark terminals. - **A pixel mascot named pip** (`▄▄▄ / ◉ ◉ / ▀▄▀`) with a full expression set: - **idle** -- standing still, eyes open - **walk1-4** -- a proper 4-frame walk cycle the sprite cycles through while pip crosses the progress bar - **thinking** (`◔ ◔`) -- worn while waiting on a network fetch - **happy** (`◕ ◕` / `▀▀▀`) -- final frame when the install finishes - **sad** (`✕ ✕` / `╶┬╴`) -- shown on abort / failure - **Amoeba blob companion.** During long network waits (the GitHub tarball fetches for `pbakaus/impeccable`, `emilkowalski/skill`, `greensock/gsap-skills`, `shadcn/ui`), a small 3×5 blob appears to pip's right and morphs through a 4-frame cycle (`· · ·` → `◦ ● ◦` → `● ◉ ●` → `◦ ● ◦`) on a ~180 ms tick. The UI never looks frozen even when the network is. - **Strict glyph roles:** `·` info, `◆` peak-end CTA, `›` info bullet, `!` warn, `✓` done, `✗` fail, `-` skip, `▰▱` bar. - **Exponential decel motion:** ease-out-quart on pip's walk, the masthead character reveal, and the finish animation. - **Bulletproof in-place redraw.** Every frame rewrite does `cursorUp(height) + \x1b[J` (erase from cursor to end of screen) before rewriting. Belt-and-braces against the classic TUI drift bug where a line soft-wraps and the next redraw leaves orphan sprite rows stranded above the frame. Every frame line is also ANSI-aware truncated to `COLUMNS - 1` so wrapping is physically impossible. All animations honor `NO_COLOR`, `CI`, non-TTY, and `TERM=dumb` with quiet, correct fallbacks.

Manual install fallback

If `npx` is not available: ```bash git clone https://github.com/om13rajpal/moodforge cd moodforge node installer/bin/design-pipeline.js ``` Or install everything by hand: ```bash git clone https://github.com/pbakaus/impeccable cp -r impeccable/.claude/skills/* ~/.claude/skills/ git clone https://github.com/emilkowalski/skill cp -r skill/skills/* ~/.claude/skills/ npx skills add https://github.com/greensock/gsap-skills -y npx skills add shadcn/ui -y git clone https://github.com/om13rajpal/moodforge cp -r moodforge ~/.claude/skills/moodforge ``` Then write `~/.claude/skills/design-stack-coordinator/SKILL.md` using the content from `lib/coordinator-skill-content.js`.

Publishing (for maintainers)

```bash cd installer npm version patch # or minor / major npm publish --otp=XXXXXX # 2FA required ``` The `prepublishOnly` hook automatically runs `scripts/bundle-skill.js`, which copies `SKILL.md`, `references/`, `templates/`, `projects/`, and `README.md` from the parent directory into `installer/skill-source/` so the published tarball is self-contained.

--- ## Changelog ### 0.4.0 - **New:** GSAP integration via `greensock/gsap-skills` (8 skills). GSAP handles complex motion choreography (staggered reveals, scroll-driven animations, timeline scrubbing) while `emil-design-eng` governs the rules. Steps 2, 3, 3.5, 4, and 6 load GSAP skills. - **New:** shadcn/ui integration via `shadcn/ui` (1 skill). Brand-kit components map to shadcn primitives (Button, Dialog, Sheet, Toast, Tabs, Input) with CSS variable overrides. Steps 3, 4, and 6 load shadcn. - **New:** Step 4 (Animation Review) is a dedicated GSAP-powered approval gate before screen generation. - **New:** Handoff spec (Step 6) now includes GSAP appendix and Component appendix alongside the Motion appendix. - Skill count: 26 → 36. Install table, coordinator, and all agent definitions updated. ### 0.3.0 - 11-agent moodforge hive-mind with strict `state.json` discipline. The orchestrator dispatches specialist workers (theme-explorer, brand-architect, motion-director, screen-designer, handoff-engineer, figma-pusher, state-keeper, preview-server, inspiration-scout) and holds the state file as the single source of truth. ### 0.1.3 - **Fix:** eliminated a drift bug where a soft-wrapped status line could leave an orphan `▄▄▄` sprite row stranded above the install frame with a large blank gap below it. `PipFrame.draw()` now unconditionally erases from cursor to end of screen on every redraw, and every frame line is truncated to the terminal width before writing. - **New:** 4-frame walk cycle for pip (up from a 2-frame leg toggle). The whole sprite now bobs as he crosses the progress bar. - **New:** amoeba blob companion next to pip during GitHub tarball fetches, morphing through a 4-frame breathing loop so the UI has a living "thinking" indicator during network waits. - **New:** thinking face (`◔ ◔`) and blink pose added to pip's expression set. - Breathing interval slowed from 320 ms hard toggle to a 180 ms organic pulse. - `dismissPipHeader()` and `walkPipHeader()` also adopted the `cursor-up + erase-down` pattern for drift-free header transitions. ### 0.1.2 - Initial public release of the moodforge installer. --- ## Links - **npm:** https://www.npmjs.com/package/moodforge - **GitHub:** https://github.com/om13rajpal/moodforge - **Full SKILL.md:** https://github.com/om13rajpal/moodforge/blob/main/SKILL.md ---

MIT -- take it, use it, remix it.

Built on pbakaus/impeccable -- emilkowalski/skill -- greensock/gsap-skills -- shadcn/ui