# Studio map: where an agent finds skills, galleries and tools _Machine file, read first by any agent asked to make something that must look or sound good. One row per thing to make. Created 04-10-2026 on Frank's request: "agents I ask to do something must know where to find skills, galleries and tools". Keep it current: a new skill, gallery or tool for one of these things gets its line here in the same turn._ **How to use it.** Find the thing you are asked to make. Read its row in order: the studio page (what good looks like here), the skill to load, the galleries to pick references from, the tools to build with. Asked for options ("propose 3 options", "pick 3 nice ones"): follow `modern-ui`, section "Three options for a product". Always read `taste.md` (Frank's verdicts) and `inspiration/liked/shown-log.md` (never re-show a passed reference). **Where this file comes from.** Since 04-10-2026 it is written from `catalogue/doors.json` by `catalogue/build_doors.py`, which also builds the front door (`index.html`) and one page per row (`make/.html`). A line edited here by hand is taken back into doors.json at the next build. Paths are relative to `~/Claude/9 - System/ui-ux/`; skills live in `~/.claude/skills//`; agents in `~/.claude/agents/`. A tool's measured behaviour on Frank's machines is in `~/Claude/kit.md`, never restated here. ## A website, landing page or project site - **Studio:** `inspiration/liked/` (approved models, each with `model.md`), `README.md` §Two modes (a site is a showpiece). - **Skills and agents:** `modern-ui` (choose a look, three options), agent `art-director` (picks and applies a real model), `taste` (extracts one site's design tokens once picked), `design-bench` (keep visual ideas of a project), `page-review` (check before showing). - **Galleries:** godly.website, land-book.com, saaspo.com, the `inspo` tool (`recommend`, `search_screens`: real production homepages, websites only), full list `inspiration/references.md` and `inspiration/sources.json`. - **3D showpiece sites:** Dioramas (github.com/blendi-remade/dioramas, MIT): 20 complete example sites where one 3D object is the page, with their briefs and a three.js engine; models generated on fal at about $1.20 each (no fal account yet, see `kit.md`). Fits taste verdict 6, pictures moving in space. - **Tools:** `compare/ui.html`. ## A form or app screen (mobile or desktop) - **Studio:** `forms.html`, `inspiration/apps/apps.json` (captured app screens, from 04-10-2026). - **Skills and agents:** `modern-ui` (three options for a product), `screens-first-design` (a product's screens one by one), agent `ui-reviewer` (judge existing screens), `space-registry-ui` (Celia's registry look). - **Galleries:** `inspiration/apps/apps.json` first (14 captured apps and dashboards, 04-10-2026), then public demo dashboards and public mobile web apps; mobbin.com and screensdesign.com hide their screens behind a paid account. Worked example: `ui-review/tableau-municipal-3-options-04-10-2026/`. ## A document (note, analysis, plan, specification, teaching page, manual) - **Studio:** `formats/` (ready formats), `documentation-design.md`, `formats/long-read/`. - **Skills:** `analysis-doc`, `short-spec`, `ui-doc`, `topic-index`, `progress-page`, `user-manual`, `house-page` (rules all documents share), `better-style` (register). - **Writing, on every document before delivery:** `writing-unslop` (review for clarity and AI-sounding prose), `non-ai-style` (register), `better-style` (choose the register first), `~/Claude/9 - System/knowledge/writing-review.md`, the check `python3 ~/.claude/hooks/slop-check.py `, and for steps to follow `python3 ~/.claude/hooks/cookbook-check.py ` (one action per step, 20 words at most, active voice). No outside humanizer: documents never leave for a rewriting service. ## A presentation - **Studio:** `formats/`, `people/` (a speaker on the page). - **Skills:** `html-presentation-speaker` (presentation with a speaker), `modern-ui` (the look). ## A diagram or concept picture - **Studio:** `diagramas/` (two banks: materials and structures), `diagramas/globes/`. - **Skills and agents:** `concept-diagrams`, `diagram-design`, agent `visual-concept-expert`. - **Tools:** `compare/images.html`, `image-models-for-skills-2026-08.md`. ## A video (product film, presentation film, motion) - **Studio:** `product-films.html` (the recipe: reference film, engine, real screens, three storyboards, stills first, director notes), `film.html`, `film-references/`, `motion/`. - **Skills and agents:** `modern-ui` (three options: pick three reference films, three storyboards), `saas-motion-video` (brief, three themes from its gallery, storyboard with a variety audit, then build), `business-motion-film` (motion grammar from 28 launch films, the critic loop where the builder never judges its own render, quality bar, audio rules), the `remotion-*` skills (build and render), `video-use` (cut filmed speech), `family-video` (photos and clips on music). - **Explainer videos in the 3Blue1Brown style:** Manim Community, env `claude-code-video-toolkit/manim-env/`, test project `claude-code-video-toolkit/projects/manim-explainer-test/` (scene, ElevenLabs narration timed per beat, ffmpeg mux). - **Galleries:** saas-motion-kit's 100 visual themes for one product story (tugrawork-creator.github.io/saas-motion-kit, with a 24-transition atlas), whatships.com (about 2,200 launch films), `business-motion-film/references/launch-film-notes.md` (28 films studied, links), Remocn catalogue for ready Remotion pieces (`remocn.dev/llms-components.txt`). - **Narration and music:** words approved by Frank first, in the film's language (ask if not stated); then the voice from `voice/index.html` and `compare/voice.html` (ElevenLabs key in the existing keys file); music and sound by `business-motion-film/references/audio.md`. - **Missing pictures in a film:** ask Codex for them (`use-codex` skill, its image tool), describing angle, background and room left for text. - **Revisions:** a low-resolution preview before the final render; notes by timestamp ("at 00:03, hold the screen longer"). - **Review:** a separate critic agent judges each render (`business-motion-film/references/critic-prompts.md`). - **Tools:** `compare/video.html`; Remotion installed; HyperFrames assessed, not installed. ## A speaker (a person presenting the page) - **Studio:** `people/how-a-speaker-is-made.md` (the order to follow), `people/index.html`, `speakers.html`. - **Skills:** `make-your-speaker`, `photo-avatar-video`, `frank-avatar`, `grok-speaker`, `html-presentation-speaker`, `site-speaker` (legacy player). ## A voice (narration, dictation, voice agent) - **Studio:** `voice/index.html`. - **Skills:** `voice-agent`. - **Tools:** `compare/voice.html`. ## Images - **Studio:** `picture-bank/` (sets of free photographs with licence and credit, for videos and sites: `libraries-of-the-world/`), `inspiration/presenting-images.html`, `diagramas/`. - **Tools:** `compare/images.html`, `image-models-for-skills-2026-08.md`.