Paint a complete visual universe. Brainstorm first, design system second, implement third, audit last. This is NOT a quick beautifier - it's a full design pipeline.

• "Brushing the color palette..."
• "Painting the hero with the unalloyed gold."
• "Setting the spacing tokens."

• "Done. Design system generated. Files: MASTER.md, tokens.css, theme.config.ts. 3 pages painted."
• No mystic prose, no metaphors. Just what changed, files touched, next step.

1. Never skip the brainstorm. Not even if the user says "just make it look good." Especially then. The single documented exception is light scope, below, which shortens the brainstorm to one question. It never removes it.
2. One question at a time during brainstorm. Never bundle. The second question depends on the first answer.
3. Never proceed without both theses validated. Visual + interaction, both explicitly approved.
4. Every design token comes from MASTER.md. No magic numbers, no rogue hex values. On light scope, where no MASTER.md is written, they come from the tokens already in the project - read them first, invent nothing.
5. Every animation respects the interaction thesis. Timing, easing, forbidden patterns — no exceptions.
6. Never install a dependency without asking.
7. Work page by page, validate page by page. Never try to do everything at once.
8. The audit is not optional. Phase 5 always runs, even if the user seems happy.
9. Stack with no detected animation library -> prefer the stack's native APIs before proposing a dependency.
10. Animation library detected (GSAP, Framer Motion, Lottie, Rive, etc.) -> respect the dev's choice. Do not propose a replacement.
11. Show, don't just describe. At the first visual gate, ask how the user wants to see it, then keep that mode for the session. The preview is throwaway - it communicates the theses, it never becomes the implementation.

paint

/genjutsu:cast

/genjutsu:paint

• the target is one component, one effect, or one isolated element
• no visual identity is being established: the project already has colors and type, or there is no project yet, only a sketch
• nothing downstream depends on the result being systematised

"This is a single component, so I am running paint light: one question, no design system file. Say so if you want the full pipeline."

Before I show you this - how do you want to see it?

A. Artifact - a live page: the real easing curve, the real durations, an element actually doing the motion. B. Live preview - a throwaway route in your project, real stack, real tokens. Native: a

@Preview

/

#Preview

scratch file. C. Inline - written out here in the conversation.

$SKILL_BASE

if [ -d /mnt/skills/user ]; then
  GENJUTSU_HOST=claude-ai
elif [ -d /mnt/.claude/skills ] \
  || [ -n "$(find /sessions -maxdepth 6 -type d -path '*/.claude/skills' 2>/dev/null | head -1)" ]; then
  GENJUTSU_HOST=cowork
elif [ -n "${CLAUDE_PLUGIN_ROOT:-}" ] || [ -d "$HOME/.claude/plugins" ]; then
  GENJUTSU_HOST=claude-code
else
  GENJUTSU_HOST=unknown
fi
echo "genjutsu host: $GENJUTSU_HOST"

~/.claude

Artifact

• It is throwaway. It never becomes the implementation. Build the real thing from the validated thesis and the loaded sub-skills, never by porting preview markup. This matters most on Compose / SwiftUI, where the HTML approximates timing and curve only, not rendering - say so on the page.
• Delete the live-preview route after validation, unless the user asks to keep it.
• Never install a dependency to build a preview.
• Never start a dev server without asking.
• Only show values that are in the thesis. A number that is not in the thesis has no business in the preview - otherwise the preview becomes a second thesis, and nobody validated that one.

Walk up from the working directory first: cheapest, and correct whenever

the session root is an ancestor of wherever the pipeline is running. Hard

bounded, and the case guard catches "." and "": an empty or relative PWD

would otherwise never reach "/" and the loop would spin forever.

Then the fixed roots. A skills directory holds _jutsu two levels down, so

that is all they get: no reason to traverse a populated one any deeper.

A session root is the one layout that needs more, for the session id and

its mnt/ wrapper. Still capped, and skipped entirely when absent.

claude.ai - single self-contained genjutsu bundle

claude.ai - each sub-skill is its own uploaded skill (detect the mount, not

one specific sub-skill, so a partial upload still resolves the base).

Claude Code plugin

Fallback if the placeholder was not substituted: newest installed version.

Constrain to numeric version dirs so a bare marketplace clone never wins.

Cowork / skills-directory install: session-rooted mount, nothing fixed to

match, so probe for it only once the two fixed layouts have both missed.

• Color direction — dark/light, palette family, accent color
• Typography spirit — serif/sans/mono, weight usage, size contrast
• Spacing philosophy — dense/airy, base unit feel
• Component style — rounded/sharp, bordered/filled, elevated/flat

Example: "Dark neo-brutalist interface with bold monospace type, fluorescent chartreuse accents, generous whitespace, raw-edged components with offset shadows."

• Timing range — fast (100-200ms), medium (200-400ms), or slow (400ms+)
• Hover behavior — what happens on hover
• Scroll behavior — reveals, parallax, or nothing
• Forbidden patterns — what this project will NOT do

Example: "Fast and dry transitions (100-200ms), hover with subtle scale (1.02), scroll-triggered reveals with stagger, no bounce or elastic — all sharp ease-out."

• "This Compose hero will use a SharedTransitionLayout with a spring(stiffness=Spring.StiffnessMedium, dampingRatio=0.85) for a fluid card-to-detail transition."
• "This SwiftUI tab transition will use matchedGeometryEffect with a .smooth spring (response: 0.5, dampingFraction: 0.85) for a tactile, spatial feel."
• "This macOS dashboard will use 100ms opacity hover states (no scale on hover, desktop subtlety) and a Cmd+1-9 keyboard shortcut to navigate panels."
• "This Android header will use an AGSL shader bound to scrollOffset for a dynamic liquid-glass effect (Android 13+, with a static fallback below)."

• Web stack detected: generate Tailwind config / CSS variables (existing format). Tokens in CSS hex,

  cubic-bezier(...)

  easings,

  rem

  spacing. Output paired with

  tailwind.config.js

  extension or

  :root { --token: ... }

  CSS.
• Android Compose stack detected: generate Kotlin design tokens. Output

  Theme.kt

  ,

  Color.kt

  ,

  Type.kt

  ,

  Shapes.kt

  ,

  Motion.kt

  referenced from MASTER.md. Color tokens in

  Color(0xFF...)

  , typography in

  TextStyle

  , shapes in

  RoundedCornerShape

  , motion in

  MotionScheme

  (M3 Expressive when scope is hero / impactful). Spacing in

  dp

  .
• SwiftUI stack detected (iOS / macOS / multi-target): generate Swift extensions. Output

  Color+App.swift

  ,

  Font+App.swift

  ,

  Animation+App.swift

  ,

  Shape+App.swift

  . Color tokens via

  Color("AssetName")

  referencing the asset catalog (or

  Color(red:green:blue:)

  if no catalog), typography via

  Font.system(...)

  or

  .custom(...)

  , animations via

  .spring(...)

  /

  .snappy

  /

  .bouncy

  named presets. Spacing in

  CGFloat

  constants.
• Compose Multiplatform stack detected: generate Kotlin tokens in

  commonMain

  with

  expect/actual

  for fonts and platform-specific colors. Same structure as Android Compose, plus a section in MASTER.md describing per-platform deviations.
• Multi-stack project (e.g., web admin + native mobile app): generate MASTER.md with clearly delimited sections for each stack, and produce code files for each.

• Color palette — Primary, secondary, accent, neutrals, semantic (success/warning/error/info). Light + dark if needed.
• Typography — Font stack, size scale (fluid or fixed), weight usage, line-height rules.
• Spacing — Base unit, scale (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px...).
• Radii — Border radius scale (none, sm, md, lg, full).
• Shadows — Elevation levels (0-4), consistent with visual thesis.
• Base components — Button, input, card, badge, link — styled per the theses.
• Motion tokens — Duration scale (fast/normal/slow), easing names, stagger delay.

• Stitch — Generate mockups/wireframes
• Nano Banana — Generate visual assets (illustrations, icons, backgrounds)
• 21st.dev Magic — Generate UI components from descriptions

load_skill <name>

• load_skill motion-principles

  - the foundation

$SKILL_BASE/mobile-principles/SKILL.md

$SKILL_BASE/desktop-principles/SKILL.md

$SKILL_BASE/design-audit/SKILL.md

$SKILL_BASE/ui-ux-pro-max/SKILL.md

$SKILL_BASE/gsap/SKILL.md

$SKILL_BASE/framer-motion/SKILL.md

$SKILL_BASE/css-native/SKILL.md

$SKILL_BASE/threejs-r3f/SKILL.md

$SKILL_BASE/canvas-generative/SKILL.md

$SKILL_BASE/compose-motion/SKILL.md

$SKILL_BASE/compose-graphics/SKILL.md

$SKILL_BASE/compose-motion/SKILL.md

$SKILL_BASE/compose-multiplatform/SKILL.md

$SKILL_BASE/swiftui-motion/SKILL.md

$SKILL_BASE/compose-graphics/SKILL.md

$SKILL_BASE/swiftui-motion/SKILL.md

$SKILL_BASE/swiftui-graphics/SKILL.md

compose-graphics

swiftui-graphics

• shader

  ,

  Metal

  ,

  AGSL

  ,

  RuntimeShader

  ,

  MSL

• liquid-glass

  ,

  glassEffect

  ,

  morphing transition

• M3 Expressive

  ,

  MotionScheme

  ,

  expressive motion

• colorEffect

  ,

  distortionEffect

  ,

  layerEffect

• Canvas

  (with generative / particle / flow field context)

• holographic

  ,

  CRT

  ,

  displacement

  ,

  ripple

• Work page by page or component by component — never try to do everything at once.
• Every color, font, spacing, shadow, radius MUST come from MASTER.md tokens. No magic numbers.
• Every animation MUST respect the interaction thesis (timing, easing, forbidden patterns).
• Apply the 5-state rule for interactive elements: default, hover, focus, active, disabled.
• Ask the user for validation after each major page/section before moving to the next.

_jutsu/design-audit

cat "$SKILL_BASE/design-audit/SKILL.md"

• Reduced motion respected (CSS

  prefers-reduced-motion

  , SwiftUI

  accessibilityReduceMotion

  , or Compose helper using

  ValueAnimator.areAnimatorsEnabled()

  /

  Settings.Global.ANIMATOR_DURATION_SCALE

  ).
• Exit animations present (no abrupt vanishings).
• No layout-property animations (animate transform / opacity / graphicsLayer instead).
• Focus visible on interactive elements.
• Interactive elements have all relevant states (default, hover/press, focus, active, disabled).
• Colors and spacing consistent with MASTER.md tokens - no rogue hex values.

• Conditional renders with AnimatePresence (or framework equivalent).
• Contrast ratio >= 4.5:1 for all text.
• No forced reflow,

  will-change

  used sparingly.
• 60fps target verified via Chrome DevTools Performance panel.
• No clickable divs without role/button.

• aria-hidden

  on purely decorative animations.
• Responsive on 4 breakpoints: 375px (mobile) / 768px (tablet) / 1024px (small desktop) / 1440px (large desktop).

• Recomposition counts verified (Layout Inspector /

  Modifier.recomposeHighlighter

  ).
• No animations on

  width

  /

  height

  (use

  Modifier.graphicsLayer { translationX/Y, scaleX/Y }

  ).

• Modifier.semantics

  set on custom interactive components.
• Frame timing OK on a mid-range device (Pixel 4a baseline) via Macrobenchmark.

• No

  body

  recomputed on irrelevant state changes (use

  @StateObject

  ,

  @ObservableObject

  correctly).
• Hitches Instrument shows no dropped frames during animation.

• .accessibilityLabel

  /

  .accessibilityHint

  on all interactive views.
• Tested with Reduce Motion ON and Dynamic Type at 200%.

• Hover states present on every interactive element.
• Keyboard shortcuts (

  Cmd+N

  ,

  Cmd+W

  ,

  Cmd+F

  , etc.) bound to primary actions.
• Multi-window state shared coherently if applicable.
• Focus rings visible on keyboard navigation (no

  outline: none

  without alternative).

1. Still run the full BRAINSTORM (Phase 1)
2. Acknowledge existing design, but the thesis overrides it
3. In Phase 4, replace existing design tokens/styles with the new design system
4. Preserve functionality and layout structure — only replace the visual layer

/genjutsu:paint

/genjutsu:cast