Cold-IQInstall Design Director
Pick your agent. Every command is ready to paste.
npx skills add Cold-IQ/ColdIQ-s-GTM-Skills --skill design-directorThe open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.
01
Install it
Run the command above, or upload the folder in Claude.
02
Ask naturally
Describe the task. Your agent loads design-director when the request matches its description.
03
Name it if needed
If it does not trigger, say “use the design-director skill”. In Codex, type $design-director.
The skill itself
SKILL.md
Design Director — supervises design-packages + design-stack
What this supervises
design-packages/(same folder) — 44 complete art directions: tokens, type, CSS system, preview. Answers "what should this look like?"design-stack/(same folder) — 16 external component galleries with verified registry endpoints. Answers "where do I get the building blocks?"- Out of scope: ColdIQ-branded work → the
design-packhouse system governs; this skill steps aside.
The decision — which mode?
Ask one question: does a visual direction already exist for this surface?
| Situation | Mode |
|---|---|
| Existing page/app with an established look; user wants a component, chart, animation, micro-interaction added or upgraded | A — Components only |
| New page/site/dashboard from scratch; no tokens, no direction; or user asks "make a design", "choose a style" | B — Full workflow |
| Existing surface but user says it looks bad / wants a rebrand or restyle | B (direction first — components aren't the problem) |
| User explicitly names a direction ("use forge", "dark terminal vibe") | B, skipping the browse step |
When genuinely ambiguous, ask the user: "keep the current look and add pieces, or pick a real art direction first?" — one question, not a menu.
Mode A — Components only
Invoke design-stack and follow its workflow (shortlist galleries by specialty → registry index → inspect → install/copy → adapt tokens → verify build). Adapt colors to the EXISTING surface's tokens; never import a foreign palette along with a component.
Mode B — Full workflow (direction, then components)
- Direction — invoke
design-packages: browse INDEX.md, shortlist 2–3 contrasting candidates, read their DESIGN.md, choose with a stated rationale (audience, tone, brand adjacency). Port the chosen tokens (colors, type, radii, surfaces) into the project. - Components — invoke
design-stackfor every block you'd otherwise hand-write. Restyle each installed component with the chosen direction's tokens; keep animation constants intact. - Verify — build passes AND a screenshot matches the direction (fixed-viewport capture; fullPage resizes restart reveal animations).
Order is non-negotiable: direction before components. Components installed first anchor the page to their default palette and get restyled twice.
Integration rules (learned the hard way)
- Chart libraries often read theme vars (
--chart-*) from:root/.dark, not from a local wrapper — apply direction tokens globally or check where the lib resolves them. - Component-specific color APIs (e.g. Bklit heatmap
levelColors) beat CSS overrides — look for the prop before fighting the cascade. - One direction per surface. Never blend two packages; never keep a component's home palette.
- Licensed deps inside a registry item (e.g.
@central-icons-react) → swap for a free equivalent (lucide) rather than abandoning the component.
Red flags
- Writing a premium component by hand → should be Mode A.
- Installing components before any token exists in the project → you skipped Mode B step 1.
- A page mixing indigo defaults with the chosen direction's accent → tokens were not ported globally.
Tips for Design Director
- • Start a fresh session after installing so your agent picks up the new skill.
- • It is part of a pack with 40 skills. Install only the ones you need with --skill to keep triggers precise.
- • If two skills overlap, mention the one you want by name.
Questions about Design Director
What does the Design Director skill do?
Use when designing anything OUTSIDE the ColdIQ brand — client demos, lead magnets, side projects, experiments, post visuals — and the work involves visual/UI decisions. Routes between grabbing components or animations only vs running the full art-direction + components workflow. Triggers: "fais un design hors ColdIQ", "nouvelle page/app/dashboard" without an established look, "ajoute un composant/une animation", "quel style utiliser", "design ce demo".
How do I install Design Director?
Run "npx skills add Cold-IQ/ColdIQ-s-GTM-Skills --skill design-director" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.
Does Design Director work in Cursor and Codex?
Yes. Design Director uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.
Is Design Director free?
Design Director is open source on GitHub. It is free to install; check the license before commercial use.
Who made Design Director?
Design Director is published by Cold-IQ in the Cold-IQ/ColdIQ-s-GTM-Skills repository, together with 39 other skills.
