agentsclimarketplace

Design direction

Skill m-binimran/dev-pack/skills/design-direction

Guardrails, skills, loops, hooks & review agents for database + website builders on Claude Code (Next.js + Supabase).

Install
npx -y skills add m-binimran/dev-pack --skill design-direction

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Choose an intentional, non-template visual direction (style, palette, type, motion) BEFORE writing any UI. Use at the start of a new site/page or when output looks generic. Enforces the anti-template policy.

SKILL.md

1.6 KB, as published. Nobody here has run it

design-direction

The fastest way to ship template-looking UI is to start coding without a direction. Don't.

Do this first

  1. Pick a named direction — editorial/magazine, neo-brutalism, glass-with-real-depth, dark or light luxury, bento, scrollytelling, Swiss/International, retro-futurism. NOT "clean minimal." NOT auto dark mode.
  2. Palette intentionally: a base, 1–2 surfaces, a semantic accent (success/warn/danger), and ONE brand-defining color used with purpose. Define as Tailwind v4 @theme tokens (hand to theme-tokens).
  3. Type pairing: a display/heading face with character + a readable body face. State the pairing and why.
  4. Reference set: name 2–3 real sites/products this should feel like.
  5. Motion intent: how motion clarifies this product (subtle micro vs. cinematic scroll). Hand to animation-implement.

Output

  • A short "direction brief": style name, palette tokens, type pairing, references, motion intent.
  • This brief is the contract the rest of the build is judged against.

Guardrails (anti-template)

  • Every surface must show ≥4 of: scale hierarchy, spacing rhythm, depth/layering, real type, semantic color, designed interaction states, grid-breaking composition, texture, purposeful motion, designed data viz.
  • Final gut check: "would this look believable in a real product screenshot?" If no, iterate before building more.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.