Studio map: where an agent finds skills, galleries and tools
The markdown source: studio-map.md, saved 04-10-2026. This page is its twin, regenerated from it.
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/<door>.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/<name>/; 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 withmodel.md),README.md§Two modes (a site is a showpiece). - Skills and agents:
modern-ui(choose a look, three options), agentart-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
inspotool (recommend,search_screens: real production homepages, websites only), full listinspiration/references.mdandinspiration/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), agentui-reviewer(judge existing screens),space-registry-ui(Celia's registry look). - Galleries:
inspiration/apps/apps.jsonfirst (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 checkpython3 ~/.claude/hooks/slop-check.py <file>, and for steps to followpython3 ~/.claude/hooks/cookbook-check.py <file>(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, agentvisual-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), theremotion-*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 projectclaude-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.htmlandcompare/voice.html(ElevenLabs key in the existing keys file); music and sound bybusiness-motion-film/references/audio.md. - Missing pictures in a film: ask Codex for them (
use-codexskill, 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.
Frank · UNCTAD · Updated · 04-10-2026 · 00:59