sachacoldiq/coldiq-s-gtm-skills/design-director

Claude Code and agent skill by sachacoldiq/coldiq-s-gtm-skills

Trust tier 2
  • community
LLM review pending
Source check pending

Checking that the SKILL.md file is still in the repository.

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".

Install

npx vskill@latest install sachacoldiq/coldiq-s-gtm-skills/design-director

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-pack house system governs; this skill steps aside.

The decision — which mode?

Ask one question: does a visual direction already exist for this surface?

SituationMode
Existing page/app with an established look; user wants a component, chart, animation, micro-interaction added or upgradedA — 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 restyleB (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)

  1. 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.
  2. Components — invoke design-stack for every block you'd otherwise hand-write. Restyle each installed component with the chosen direction's tokens; keep animation constants intact.
  3. 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.

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
270
Repository forks
85
7-day trend score
28

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/sachacoldiq/coldiq-s-gtm-skills/design-director/badge)](https://verified-skill.com/skills/sachacoldiq/coldiq-s-gtm-skills/design-director)

Something wrong with this skill or its page? Tell us.