git:20261018.54cc797 to git:20261018.5291ecd

1 added, 0 removed. Audit A to A.

---

description: Naksha design team — activates for all design, UI/UX, visual, and content tasks

globs: ["**/*.css", "**/*.scss", "**/*.html", "**/*.tsx", "**/*.jsx", "**/*.vue", "**/*.svelte", "**/*.svg", "**/design-tokens*", "**/tokens*", "**/*.figma"]

alwaysApply: false

---

# Naksha Design Team

You have access to a virtual design team with 30 specialist roles and 16,000+ lines of design knowledge. When the user asks you to design, build, style, or create any visual work, activate the appropriate specialists below.

## Roles

| Role | Expertise |

|------|-----------|

| **Design Manager** | Analyzes the task, assembles the right specialists, orchestrates the workflow, ensures delivery |

| **Creative Director** | Visual and conceptual vision, mood, tone, creative direction, brand adherence |

| **Product Designer** | UX strategy, feature scoping, user flows, JTBD framework |

| **UX Designer** | Wireframes, IA, navigation, journey maps, usability heuristics |

| **UI Designer** | Visual design, color systems, typography, layout, components |

| **UX Researcher** | Heuristic evaluation, accessibility, edge cases, cognitive load |

| **Content Designer** | Microcopy, error messages, onboarding copy, tone of voice |

| **Design System Lead** | Design tokens, theming, dark mode, component APIs, Figma styles |

| **Motion Designer** | Micro-interactions, transitions, CSS animations, duration/easing systems, FLIP |

| **Illustration Director** | Icon systems, SVG standards, spot illustrations, style taxonomy |

| **Presentation Designer** | Slide systems, pitch decks, assertion-evidence pattern, 10-slide framework |

| **Brand Strategist** | Positioning, visual identity, brand architecture, voice/tone spectrum |

| **Print Designer** | Print-ready layouts, @page and @media print, bleed and safe zones, CMYK, print typography |

| **Video/Content Producer** | Scripts, storyboards, hook formulas, short-form pacing, repurposing |

| **Social Media Designer** | Platform specs, safe zones, carousel layouts, visual systems |

| **Social Media Strategist** | Campaign planning, content calendars, KPI targets, funnel strategy |

| **Social Media Copywriter** | Captions, hooks, hashtag strategy, platform-specific tone |

| **Growth/Analytics Specialist** | Analytics dashboards, A/B test design, metrics frameworks |

| **Email Designer** | Responsive HTML email, dark mode, cross-client, ESP compatibility |

| **Email Copywriter** | Subject lines, preview text, drip sequences, deliverability |

| **Data Viz Designer** | Chart type selection, colorblind-safe palettes, annotation patterns |

| **Dashboard Architect** | KPI layouts, filter systems, data table design, information hierarchy |

| **Framework Specialist** | Idiomatic React/Tailwind, Vue, Svelte 5, Next.js App Router, and Astro component code |

| **AI Image Director** | Image-gen tool selection, prompt architecture, brand consistency across assets, iteration loops |

| **AI Video Director** | Video-gen tool selection, shot-by-shot prompt packs, multi-shot consistency, transitions |

| **AI Audio & Voice Producer** | Voiceover and music direction, voice and music briefs, video sync, licensing |

| **AI Prompt Engineer** | Modular prompt systems, brand prompt libraries, cross-tool translation, seed management |

| **Conversational Designer** | Chatbot UI, dialog flow design, VUI principles, persona systems, multi-modal (voice+screen) |

| **Spatial Designer** | visionOS/Vision Pro HIG, WebXR, depth layers, gaze/gesture input, spatial typography, AR anchoring |

| **Compliance Designer** | GDPR/CCPA consent UX, HIPAA healthcare UI, PCI payment forms, ADA/Section 508 compliance |

## Design Principles

**Color**: Always generate a full 10-shade palette (50–950) from brand colors. Use HSL-based shade generation. Include semantic colors (success, warning, error, info) and neutral tints.

**Typography**: 8 type sizes (text-xs through text-5xl). Pair heading + body fonts. Maintain 4.5:1 contrast ratio minimum for WCAG AA.

**Spacing**: 8px base grid. Use consistent spacing scale (4, 8, 12, 16, 24, 32, 48, 64px).

**Components**: Always design all interactive states (default, hover, active, disabled, loading, error). Use CSS custom properties for all tokens — never hardcode hex values in component styles.

**Dark mode**: Include `[data-theme="dark"]` or `@media (prefers-color-scheme: dark)` overrides for every color token.

**Accessibility**: WCAG AA minimum. All interactive elements need visible focus styles. Images need alt text. Form fields need labels.

**Motion**: Use `prefers-reduced-motion` media query for all animations. Default durations: micro 100–150ms, standard 200–300ms, complex 400–500ms.

## Token Architecture

Use 3-tier tokens:

```css

/* Tier 1: Raw values */

--color-blue-500: #3b82f6;

/* Tier 2: Semantic aliases */

--color-interactive: var(--color-blue-500);

/* Tier 3: Component tokens */

--button-bg: var(--color-interactive);

```

## Output Formats

For CSS: Use custom properties with `:root {}` block + `[data-theme="dark"] {}` override.

For React/Next.js: TypeScript components with proper interfaces, `cn()` utility for conditional classes.

For Tailwind: Extend theme in `tailwind.config.js`, use CSS variables for dynamic values.

## Design System Reference

Load `skills/design/references/` files for deep expertise:

- `ui-designer.md` — visual design principles

- `design-system-lead.md` — token architecture patterns

- `motion-designer.md` — animation system

- `figma-workflow.md` — Figma integration patterns

## Project Memory Commands (v5)

Naksha keeps persistent project context in `.naksha/project.json`. These commands build and query it:

- **`/naksha-browse <url>`** — capture design patterns from a URL (your running UI in inspect mode, or an external site in research mode) and save them to project memory. Requires the Playwright MCP; skips gracefully without it.

- **`/naksha-remember <decision>`** — save a design constraint or component pattern in plain English:

- `/naksha-remember grid is 8px; no dark mode; WCAG AA required`

- `/naksha-remember primary button: 40px height, full-radius pill, primary-500 fill`

- **`/naksha-status`** — view all saved context: brand settings, constraints, component patterns, and browser research.

- **`/naksha-init`** — set up or update project context; re-running on a v4 project upgrades it to the v5 schema.

`/design`, `/design-review`, `/design-score`, `/design-system`, and `/brand-kit` read project memory automatically, so saved constraints and patterns apply without repeating them.

**Taste memory (v5.3)** — naksha learns which design directions you like:

- **`/design-variants <task> [--count 2-5]`** — build 2–5 clearly different directions for the same brief (default 3), side by side in `naksha-variants/index.html`. When you have a taste profile, most directions lean into it and one "Wildcard" deliberately doesn't.

- **`/naksha-taste approve|reject <direction> [because …]`** — record your verdicts; with no arguments, show your taste profile. `/design` and `/design-variants` then default to the traits you approve and avoid the ones you reject. Taste is a preference: your request, constraints, and brand always win. Older signals fade (half weight after 90 days, ignored after 180).

+ - **`/naksha-vote helpful|needs-work <subject> [because …]`** (v6) — vote on a variant, design, review finding or command run. Votes stay in `.naksha/votes.jsonl` and are never sent anywhere; `/naksha-vote consolidate` turns them into taste observations with counts and evidence, and `/naksha-vote calibrate` shows where eval judges passed work you said needs work. Share only with `/naksha-vote export --redact`.

**Also:** `/design-reel` records the design team working and renders a shareable 9:16 + 16:9 video reel. It needs Node and `packages/naksha-reel`; where that toolchain is absent, the command is documentation only.