Help us improve
Share bugs, ideas, or general feedback.
From personal-corp-skills
Orchestrates iterative visual style searches with branch prompts, decision graphs, feedback loops, and HTML preview maps for media production.
How this skill is triggered — by the user, by Claude, or both
Slash command
/personal-corp-skills:art-directorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill when the work is an art-direction search for a media production workspace.
Share bugs, ideas, or general feedback.
Use this skill when the work is an art-direction search for a media production workspace.
The skill coordinates this loop:
brief -> references -> generation branches -> HTML preview -> feedback -> next branches -> selected direction
For single-image production, use the host repo's image-generation or media-run instructions. For comic pages, albums, storyboards, or platform-specific assets, use the host repo's format-specific playbook when one exists.
For a project under art-direction/<project>/, each serious search pass should leave:
art-direction/<project>/
prompts/vNN/YYYY-MM-DD-vNN-<slug>-prompts.md
process/vNN/YYYY-MM-DD-vNN-<slug>-log.md
styles/YYYY-MM-DD-<style-system>.md
assets/vNN-<slug>/
<variant-id>.png
vNN-<slug>.html
For a first run in an empty workspace, create the minimal folders before writing prompts:
mkdir -p art-direction/<project>/{prompts/v01,process/v01,styles,assets/v01-style-search}
cp skills/art-director/assets/style-search-map-template.html art-direction/<project>/v01-style-search.html
If the skill was installed without assets/style-search-map-template.html, create the same folders and write a simple local HTML preview from the cluster schema in this file.
If the run continues an existing direction, increment vNN and make every new node point back to its parent decision.
The visual map must be an iteration-cluster direction graph:
idea
-> iteration cluster
-> option leaf nodes
-> selected option node
-> carry forward / drop
-> next iteration cluster
-> option leaf nodes
-> selected option node
-> output
Keep the important path explicit: iteration checkpoint -> option nodes -> selected option node -> next iteration checkpoint. Unselected options stay as leaf nodes with their status.
index.html, latest vNN-*.html, process/v*/, prompts/v*/, styles/, and relevant research/.prompts/vNN/. Each prompt needs iteration id, option id, role, difference axis, prompt, negative prompt, and reject criteria.vNN-<slug>.html.process/vNN/...log.md.feedback -> interpretation -> new branch -> asset -> decision.Every style-search HTML page starts with a direction graph that answers:
Use skills/art-director/assets/style-search-map-template.html as the starter preview when the host repo has no renderer yet. If a reusable host-repo renderer exists, record its path in the run log and use it as the local reference. A typical reusable setup is:
art-direction/<project>/vNN-dagre-full.html;art-direction/<project>/vNN-style-search-pages.js;art-direction/<project>/vNN-style-search-page.css;@dagrejs/dagre@1.1.8, when external network use is allowed by the host repo.Serve preview pages through a local server:
python3 -m http.server 8080
Then open http://127.0.0.1:8080/.... If the preview depends on a CDN and the network is blocked, report the blocker and keep the run in blocked or needs-local-runtime status. Store third-party library source only when the host repo policy explicitly allows vendored dependencies.
Recommended solution: dagre computes the graph layout; the page renders the graph as static HTML/SVG with a detail panel.
Responsibilities:
Use manual SVG layout only as a fallback or baseline. Use Mermaid for docs and quick sketches only when dense style-search history is not required.
Required graph semantics:
V8-C, so later readers can map preview cards back to the run log.Cluster schema:
{
"id": "v8",
"title": "V8 - Selected direction expansion",
"brief": "Expand user-liked directions from V7.",
"looked_at": "V8-A, V8-B, V8-C, V8-D",
"selected": "v8-c",
"parent": "v7",
"carry_forward": "V8-C: sharp typography, high-contrast palette, warning label rhythm.",
"drop": "Soft abstract metaphors as the main cover style.",
"feedback": {
"target": "v8-c",
"safe_summary": "Reviewer wants the sharp typography direction pushed further.",
"interpretation": "Intensify type scale and warning-label rhythm in V9."
},
"options": [
{"id": "v8-a", "title": "V8-A - Soft sculpture system", "status": "shown"},
{"id": "v8-c", "title": "V8-C - Brutal manifesto", "status": "selected"}
],
"preview": "assets/v8-selected-directions/c-brutal-typography.png",
"next": "v9",
"terminal_status": "needs-feedback"
}
Required cluster fields:
idtitlebrieflooked_atoptionsselectedparent when the cluster continues or forks a prior clustercarry_forwarddropfeedback when reviewer feedback existspreview when a representative image existsnext unless the cluster is terminalRequired option statuses:
selectedrejectedshownoutputTerminal status values:
selected-finalneeds-feedbackblockedneeds-local-runtimeresetAvoid duplicating the same graph nodes immediately below as cards or a second table. Add a legend, selected detail, or next-iteration block only when it answers a different question.
When feedback arrives after a preview:
process/vNN/...log.md.feedback, carry_forward, and drop fields.Comment log format:
## Feedback - YYYY-MM-DD HH:MM
Target node: `v12-03-operating-cards`
Safe summary:
> ...
Interpretation:
- Keep:
- Drop:
- Next branch:
A good branch set varies real design architecture:
Weak branch sets vary only color, mood words, or superficial adjectives.
Diversity gate:
Record selection as an operational decision:
If the reviewer rejects the whole pass, make a new root child named reset and record the failure mode before generating again.
Run the narrow checks that match the pass:
test -f art-direction/<project>/vNN-<slug>.html
rg -n "dagre|style-tree-data|cluster|graph|node-details" art-direction/<project>/vNN-<slug>.html
test -f art-direction/<project>/process/vNN/YYYY-MM-DD-vNN-<slug>-log.md
test -f art-direction/<project>/prompts/vNN/YYYY-MM-DD-vNN-<slug>-prompts.md
rg -n "feedback|carry_forward|drop|selected|terminal_status" art-direction/<project>/vNN-<slug>.html
git diff --check
If the preview uses an external CDN, also check the pinned runtime:
curl -I -L --max-time 10 https://cdn.jsdelivr.net/npm/@dagrejs/dagre@1.1.8/dist/dagre.min.js
For local visual review:
python3 -m http.server 8080
Then open http://127.0.0.1:8080/... and verify:
npx claudepluginhub serejaris/personal-corp-skills --plugin personal-corp-skillsGenerates live HTML/CSS visual direction proposals on scaffolded project dev server for side-by-side comparison and iterative refinement to select final UI design.
Generates complete visual design systems including style guides and AI assets through phased workflow: discovery, synthesis, documentation, asset generation, assembly. Activates on design system, style guide, or color palette mentions.
Defines a visual direction with style pillars, shape language, color intent, and readability rules for consistent art execution across teams.