# Design Direction

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

- **Type:** Skill
- **Install:** `agentstack add skill-m-binimran-dev-pack-design-direction`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [m-binimran](https://agentstack.voostack.com/s/m-binimran)
- **Installs:** 0
- **Category:** [Databases](https://agentstack.voostack.com/c/databases)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [m-binimran](https://github.com/m-binimran)
- **Source:** https://github.com/m-binimran/dev-pack/tree/main/skills/design-direction

## Install

```sh
agentstack add skill-m-binimran-dev-pack-design-direction
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [m-binimran](https://github.com/m-binimran)
- **Source:** [m-binimran/dev-pack](https://github.com/m-binimran/dev-pack)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-m-binimran-dev-pack-design-direction
- Seller: https://agentstack.voostack.com/s/m-binimran
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.