<div align="center">

# naksha

**Your agency's design brain. Always on, always yours.**

*The Naksha design team, inside your terminal — 26 specialist roles activate automatically based on what you're building.*

<br>

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![Claude Code](https://img.shields.io/badge/Claude_Code-Plugin-blueviolet)](https://claude.ai/claude-code)
[![Cursor](https://img.shields.io/badge/Cursor-Rules-black)]()
[![Windsurf](https://img.shields.io/badge/Windsurf-Rules-0099ff)]()
[![Gemini CLI](https://img.shields.io/badge/Gemini_CLI-GEMINI.md-4285F4)]()
[![Copilot](https://img.shields.io/badge/Copilot-Instructions-24292e)]()
[![Autohand Code CLI](https://img.shields.io/badge/Autohand_Code_CLI-AGENTS.md-0A84FF)](https://github.com/autohandai/code-cli)
[![Roles](https://img.shields.io/badge/Specialist_Roles-26-orange)]()
[![Commands](https://img.shields.io/badge/Slash_Commands-63-green)]()
[![Design Knowledge](https://img.shields.io/badge/Design_Knowledge-15000%2B_lines-E8633A)]()

[Quick Start](#-quick-start) · [Commands](#-commands) · [The Team](#-the-team) · [How It Works](#-how-it-works) · [Changelog](CHANGELOG.md)

</div>

---

## 🚀 Quick Start

### Claude Code (full plugin — 63 commands, agents, hooks)

```bash
git clone https://github.com/Adityaraj0421/naksha-studio.git
cd naksha-studio && bash install.sh
```

Then restart Claude Code and try:
```
/design Build a landing page for a SaaS analytics product
```

> **✨ New in v5.1 — `/design-reel`:** record the design team working and render a share-able video of it (9:16 + 16:9). `/design-reel Design a pricing page for a SaaS analytics product` → a post-ready clip of your screen being designed, live. [Learn more ↓](#design-reel-task--watch-the-team-new-in-v51)

> **Updates:** Just `git pull` inside the repo — no reinstall needed. The plugin is a live symlink to your local clone.

### Cursor

Copy `.cursor/rules/naksha.mdc` to your project's `.cursor/rules/` directory. The design team activates automatically for CSS, HTML, TSX, SVG, and token files.

### Windsurf

Copy `.windsurfrules` to your project root. Windsurf reads it automatically at session start.

### Gemini CLI

Copy `GEMINI.md` to your project root. Gemini CLI reads it at session start.

### VS Code Copilot

Copy `.github/copilot-instructions.md` to your project's `.github/` directory. Copilot Chat and inline completions will apply the design team's rules.

### Autohand Code CLI

Copy `AGENTS.md` to your project root and copy `skills/design/` to `.autohand/skills/naksha-design/`. Autohand Code CLI will read the project instructions and load the Naksha design skill from its project-level skills directory.

---

## 👥 The Team

<table>
<tr>
<td align="center" width="14%">

**Design Manager**

Orchestrates

</td>
<td align="center" width="14%">

**Creative Director**

Vision

</td>
<td align="center" width="14%">

**Product Designer**

Strategy

</td>
<td align="center" width="14%">

**UX Designer**

Flows

</td>
<td align="center" width="14%">

**UI Designer**

Visual

</td>
<td align="center" width="14%">

**UX Researcher**

Insights

</td>
<td align="center" width="14%">

**Content Designer**

Copy

</td>
</tr>
<tr>
<td align="center">

**Design System Lead**

Tokens

</td>
<td align="center">

**Motion Designer**

Animation

</td>
<td align="center">

**Social Media Designer**

Social Visuals

</td>
<td align="center">

**Social Media Strategist**

Campaigns

</td>
<td align="center">

**Social Media Copywriter**

Captions

</td>
<td align="center">

**Growth/Analytics Specialist**

Metrics

</td>
<td align="center">

**Email Designer**

HTML Email

</td>
</tr>
<tr>
<td align="center">

**Email Copywriter**

Subject Lines

</td>
<td align="center">

**Data Viz Designer**

Charts

</td>
<td align="center">

**Dashboard Architect**

Layouts

</td>
<td align="center">

**Presentation Designer**

Decks

</td>
<td align="center">

**Brand Strategist**

Positioning

</td>
<td align="center">

**Illustration Director**

Icons & Art

</td>
<td align="center">

**Video/Content Producer**

Scripts

</td>
</tr>
<tr>
<td align="center">

**AI Image Director**

Image Gen

</td>
<td align="center">

**AI Video Director**

Video Gen

</td>
<td align="center">

**AI Audio & Voice Producer**

Voiceover & Music

</td>
<td align="center">

**AI Prompt Engineer**

Prompt Systems

</td>
<td align="center" colspan="3">

</td>
</tr>
<tr>
<td align="center">

**Print Designer**

Print & PDF

</td>
</tr>
<tr>
<td align="center" colspan="7">

_The skill loads only the references your task actually needs_

</td>
</tr>
</table>

---

## 🎯 Commands

| Command | What It Does |
|---------|-------------|
| `/design <task>` | Full design workflow with team assembly |
| `/design-review <file or screenshot>` | Quality audit — accepts HTML, Figma URLs, or screenshots for visual AI critique (6 design principles scored 0–10) |
| `/design-system` | Generate, extract, or audit design tokens |
| `/figma <URL>` | Convert Figma designs to production code |
| `/figma-create <task>` | Build pages, wireframes, components in Figma |
| `/ux-audit <brief>` | Audit Figma file against a design brief |
| `/design-handoff` | Developer handoff docs (tokens, specs, APIs) |
| `/figma-responsive` | Generate mobile/tablet variants from desktop |
| `/figma-sync` | Detect design–code drift |
| `/design-present` | Interactive HTML presentation from Figma |
| `/brand-kit <color>` | Complete brand kit from 1–2 colors |
| `/component-docs` | Storybook-style docs from Figma components |
| `/figma-prototype` | Prototype connections between frames |
| `/site-to-figma <URL>` | Capture website → editable Figma design |
| `/ab-variants` | A/B test design variants |
| `/design-sprint` | Guided 5-phase design sprint |
| `/social-content <task>` | Social media visuals (posts, stories, reels, carousels) |
| `/social-campaign <brief>` | Campaign planning with strategy, calendar, and captions |
| `/social-analytics <type>` | Social analytics dashboards and performance reports |
| `/design-framework <fw> [file]` | Convert HTML designs to React, Vue, Svelte, Next.js, or Astro |
| `/email-template <type> for <brand>` | Production HTML email template (responsive, dark mode, cross-client) |
| `/email-campaign <type> for <product>` | Complete multi-email campaign sequence with copy and HTML templates |
| `/email-audit` | Full-spectrum email audit — technical rendering issues + copy/strategy critique (two-phase) |
| `/design-template <category>` | Production web template from gallery (landing-page, dashboard, pricing, auth, blog, ecommerce, portfolio, docs, saas, onboarding) |
| `/chart-design <description>` | Accessible chart or data visualization — selects chart type, applies colorblind-safe palette, outputs HTML/CSS/JS |
| `/dashboard-layout <description>` | Complete dashboard — KPI cards, chart areas, filter bar, data table, sidebar, responsive |
| `/data-viz-audit` | Audit chart type, palette, annotations, anti-patterns. Conditional Phase 2: dashboard fit |
| `/design-tutorial [track]` | Interactive guided tour — tracks: quick-start, ui, figma, social, email, data-viz, full |
| `/figma-component-library <description>` | Complete Figma component library — atoms, molecules, organisms with variants, auto layout, component properties |
| `/motion-design <component or page>` | Design micro-interactions, transitions, and animation systems — duration/easing scale, reduced motion fallbacks |
| `/presentation-design <deck type>` | Design a complete presentation deck — pitch deck, product demo, or internal — with slide system and visual hierarchy |
| `/brand-strategy <brand name>` | Define or audit a brand — positioning, visual identity, voice and tone, brand architecture |
| `/illustration-system <scope>` | Design an illustration style guide, icon system, or SVG asset set |
| `/video-script <video type>` | Write a video script, storyboard, or content series plan for demos, explainers, social video, or ads |
| `/gen-image <subject> for <brand>` | Generate a brand-aligned AI image — tool selection (MJ/DALL-E/Ideogram/Firefly/SD), full 6-element prompt, 2 variations, seed strategy |
| `/gen-video <scene> for <platform>` | Generate a shot-by-shot AI video prompt pack — tool selection (Runway/Kling/Sora/Pika/Luma), consistency strategy, platform spec |
| `/gen-audio <voice or music> for <platform>` | Generate an AI audio brief — voiceover (ElevenLabs/Murf) or music/jingle (Suno), timing cues, FTC/EU AI Act compliance |
| `/gen-moodboard <concept> for <brand>` | Generate 3 AI moodboard directions — brand personality extraction, visual style, 4–6 prompts per direction |
| `/prompt-refine <existing prompt>` | Diagnose and optimise any AI gen prompt — annotated critique, optimised version, cross-tool variant |
| `/print-layout <brief>` | Print-ready layout — business cards, certificates, brochures, posters with CMYK, bleed, and crop marks |
| `/print-audit <file>` | Pre-flight audit for print: bleed, CMYK, resolution, font embedding, PDF/X compliance |
| `/pdf-report <brief>` | Multi-page PDF report or document — cover, table of contents, body sections, charts, structured for print or digital |
| `/lint-design <figma_url>` | Design linter — orphan colors, non-token spacing, missing auto-layout, contrast violations, scored by severity |
| `/accessibility-audit` | WCAG 2.1 AA audit — contrast, ARIA, keyboard nav, semantic HTML — with specific code fixes |
| `/design-qa <file or URL>` | Visual QA at 3 breakpoints — token compliance, interaction states, responsive behavior |
| `/design-critique <file>` | Heuristic review — Nielsen's 10 heuristics, visual audit, interaction states; add `--screenshot <path>` for vision-mode critique |

**v4.0.0 — Memory, Pipelines, Vision & Frontier Wings**

| `/naksha-init` | Interactive project setup wizard — writes `.naksha/project.json` (brand, framework, tokens) and creates a design decision log |
| `/naksha-status` | Display current project context and recent design decisions from memory |
| `/pipeline run <name>` | Execute a multi-step design pipeline — `launch-prep`, `brand-audit`, `component-build`, `social-launch` |
| `/design-compare <url1> <url2>` | Side-by-side visual analysis of two URLs — layout, typography, color, UX patterns, "Steal This" recommendations |
| `/competitive-audit <url>` | Extract a competitor's color palette, type system, layout grid, and UX patterns with quality ratings |
| `/design-chatbot <type> [platform]` | Complete chatbot/assistant UI spec — persona, dialog flows, message bubbles, quick replies, error states, accessibility |
| `/design-voice-ui <product> [platform] [screen]` | Voice interface spec — wake word flows, confirmation patterns, hybrid screen layout, SSML, earcon design |
| `/design-spatial <type> [platform]` | Spatial computing spec for visionOS/WebXR — depth hierarchy, window types, ornaments, spatial typography |
| `/design-ar-overlay <use-case> [platform]` | AR overlay spec — anchor strategy, world tracking UI, instruction cards, scan states, occlusion handling |
| `/design-gdpr <type> [jurisdiction]` | GDPR/CCPA consent flows — cookie banner variants, privacy control center, data deletion request flow |
| `/design-compliance --regulation <hipaa\|pci\|ada>` | Compliance design audit or generation — HIPAA PHI handling, PCI payment form isolation, ADA/Section 508 |

**v4.6.0 — CI/CD & Health**

| `/naksha-doctor [--fix]` | Plugin health check — validates command count, references, version consistency, allowed-tools; probes Playwright + Figma MCP availability; `--fix` remediates issues automatically |

**v4.7.0 — Design Intelligence**

| `/design-score <file or URL>` | Quantitative 0–100 design score across 4 dimensions: Accessibility (WCAG), Usability (Nielsen), Visual Quality, Token Compliance — ASCII bar chart, A–F grade |

**v5.0.0 — Project Memory & Design Agent**

| `/naksha-browse <url>` | Browser-vision design research — captures a live URL, extracts layout patterns, typography, color, and UX patterns, stores findings in `.naksha/project.json` for automatic context injection into future design commands |
| `/naksha-remember <constraint>` | Persist a design constraint or component pattern to project memory — classified as `constraint` or `component_pattern` and written to `.naksha/project.json`; context flows automatically into `/design`, `/brand-kit`, `/design-system`, and 3 other commands |

<details>
<summary><b>📖 Command details & examples</b></summary>

<br>

### `/design <task>` — Full Design Workflow

Assembles the right specialists and runs the complete workflow:

```
/design Create a 3-tier pricing page with monthly/annual toggle
/design Redesign the onboarding flow for better conversion
/design Build a real-time analytics dashboard
```

### `/design-reel <task>` — Watch the Team _(new in v5.1)_

Runs `/design`, then renders the result as a share-able video of the design team working — vertical (9:16) + landscape (16:9), captioned, with each specialist's contribution narrated over the page they built:

```
/design-reel Design a pricing page for a SaaS analytics product
/design-reel Redesign the settings page --url http://localhost:3000/settings
```

Outputs `reel-9x16.mp4` + `reel-16x9.mp4`, ready to post. `--url` captures a live page for a real before/after wipe; without it, the reel shows the freshly built page. Requires a one-time Node render toolchain (`packages/naksha-reel`, installs on first use) — run `/naksha-doctor` to check, or see [docs/reel-setup.md](docs/reel-setup.md). The clip is a produced re-enactment, end-carded as such.

### `/design-review <file>` — Quality Audit

Runs a structured 5-point audit on existing designs:

```
/design-review ./src/pages/checkout.html
```

Checks: Accessibility (WCAG AA) · Usability Heuristics · Visual Consistency · Content Quality · Motion Design

### `/design-system` — Token Generation

Generate, extract, or audit design tokens:

```
/design-system Generate tokens from brand color #2563eb
/design-system Extract tokens from this Figma file
/design-system Audit existing code for hardcoded values
```

### `/figma <URL>` — Figma to Code

Convert Figma designs to production-ready code:

```
/figma https://figma.com/design/abc123/MyApp?node-id=1-2
```

### `/figma-create <task>` — Create Designs in Figma

Build pages, wireframes, components, and design systems directly inside Figma via the Desktop Bridge:

```
/figma-create Build a 3-screen wireframe for a saved content feature
/figma-create Set up a design system with color tokens and type scale
/figma-create Create a component set for Button with 4 variants
```

Requires the [Figma Desktop Bridge](https://www.figma.com/community/plugin/figma-desktop-bridge) plugin running in Figma Desktop.

### `/ux-audit <brief>` — Audit Against a Design Brief

Audit a Figma file for compliance against a design brief — checks page structure, frame naming, sizes, styles, components, and content:

```
/ux-audit Check the Miles UX Design Challenge submission against the brief
/ux-audit Verify all required screens are present at 1440×900
```

### `/design-handoff` — Developer Handoff Docs

Generate a complete developer handoff document from a Figma file — token maps, spacing specs, component APIs, and production-ready code snippets:

```
/design-handoff Generate handoff for the current Figma file
/design-handoff Export tokens as CSS variables and Tailwind config
```

Outputs: Markdown docs, CSS custom properties, Tailwind config, TypeScript types.

### `/figma-responsive <frame>` — Responsive Variants

Generate mobile (375×812) and tablet (768×1024) variants from a desktop Figma frame:

```
/figma-responsive S3-A / Saved Redesigned
/figma-responsive Create mobile and tablet versions of the dashboard
```

Clones the source frame, adapts layout (grid reflow, sidebar collapse, nav simplification), and validates each breakpoint with screenshots.

### `/figma-sync` — Design-Code Sync

Detect drift between Figma designs and code implementation — compare color tokens, typography, spacing, and components:

```
/figma-sync Check if Figma tokens match our Tailwind config
/figma-sync Compare design system styles against CSS custom properties
```

Outputs a sync report with drift score, per-token comparison tables, and optional patches for both Figma and code.

### `/design-present <type>` — Design Presentation

Generate an interactive HTML presentation from Figma screens:

```
/design-present Create a walkthrough presentation of the dashboard screens
/design-present Build a pitch deck from the product mockups
/design-present Generate a case study presentation
```

Features: keyboard navigation, progress bar, annotations, zoom, dark/light mode, fullscreen.

### `/brand-kit <color> [mood]` — Brand Kit Generation

Generate a complete brand kit from 1-2 colors and a mood:

```
/brand-kit #6366f1 premium
/brand-kit Generate a warm brand from #f59e0b
```

Outputs: 10-shade color palettes, secondary/accent colors, type scale, spacing scale, CSS custom properties, Tailwind config, JSON tokens, Figma styles, and a visual HTML reference page.

### `/component-docs` — Component Documentation

Auto-generate Storybook-style documentation from Figma component sets:

```
/component-docs Document all components in the current Figma file
/component-docs Generate docs for the Button component set
```

Outputs: prop tables, variant grids, usage guidelines, code examples (HTML/React), rendered screenshots.

### `/figma-prototype` — Prototype Connections

Create interactive prototype connections between Figma frames:

```
/figma-prototype Connect all screens in the onboarding flow
/figma-prototype Auto-detect buttons and link them to target screens
```

Supports transition presets: slide, dissolve, move-in. Auto-detects interactive elements (buttons, links, nav items, cards).

### `/site-to-figma <URL>` — Website to Figma

Capture a live website and recreate it as an editable Figma design:

```
/site-to-figma https://example.com
/site-to-figma Capture the hero section of stripe.com
```

Extracts color palette, typography, section structure via Playwright, then rebuilds as auto-layout Figma frames with Paint/Text Styles.

### `/ab-variants <frame> [dimension]` — A/B Test Variants

Generate A/B test design variants from an existing Figma screen:

```
/ab-variants Hero Section layout
/ab-variants Pricing Page cta
/ab-variants Landing Page all
```

Creates control + test variants with layout, CTA, copy, or color changes. Includes testing recommendations (sample size, duration, success metrics).

### `/design-sprint <problem>` — Design Sprint

Guided 5-phase design sprint methodology:

```
/design-sprint Improve signup conversion for our SaaS product
/design-sprint Redesign the checkout experience to reduce abandonment
```

Phases: Understand (problem mapping) → Diverge (8 solution ideas) → Decide (weighted matrix) → Prototype (build testable solution) → Validate (test script + success metrics).

### `/design-framework <framework> [file]` — Framework Conversion

Convert HTML/CSS design output to idiomatic component code:

```
/design-framework react-tailwind ./output/landing-page.html
/design-framework vue ./output/dashboard.html
/design-framework nextjs ./src/app/page.html
/design-framework svelte ./output/component.html
/design-framework astro ./output/hero.html
```

Or trigger inline from `/design`:
```
/design Build a pricing page --framework react-tailwind
/design Create an analytics dashboard --framework nextjs
```

Outputs: TypeScript components with proper interfaces, framework-specific patterns (Server/Client components for Next.js, islands for Astro, runes for Svelte 5), design token mapping to Tailwind config or CSS variables, setup instructions.

Supported frameworks: `react-tailwind` · `vue` (Vue 3 + UnoCSS) · `svelte` (Svelte 5) · `nextjs` (App Router) · `astro`

### `/social-content <task>` — Social Media Visuals

Create platform-optimized social media visuals at exact dimensions with safe zones:

```
/social-content Instagram carousel for a product launch — 5 slides
/social-content TikTok story announcing a new feature
/social-content LinkedIn post about our Series A funding
```

### `/social-campaign <brief>` — Campaign Planning

Plan a social media campaign with strategy, content calendar, caption drafts, and KPI targets:

```
/social-campaign Awareness campaign for fitness app targeting Gen Z on Instagram and TikTok
/social-campaign Product launch for SaaS tool — LinkedIn + Twitter — 2 weeks
/social-campaign Engagement campaign for local restaurant on Instagram
```

Outputs: campaign strategy, 2-week content calendar, first-week caption drafts with hooks and CTAs, KPI targets. Visual assets created separately via `/social-content`.

### `/social-analytics <type>` — Social Analytics

Build analytics dashboards, performance reports, or A/B test frameworks:

```
/social-analytics dashboard for Instagram + TikTok — last 30 days
/social-analytics weekly report for LinkedIn company page
/social-analytics ab-test Compare carousel vs. single-image posts on Instagram
```

### `/email-template <type> for <brand>` — HTML Email Template

Generate a production-ready HTML email template with inline styles, table layout, and bulletproof buttons:

```
/email-template welcome for Acme SaaS — new user signup
/email-template promotional for ShopCo — Black Friday 30% off sale
/email-template transactional for OrderCo — order confirmation with item table
/email-template newsletter for TechBlog — weekly curated articles
```

Outputs: Full HTML with VML buttons (Outlook), mobile-responsive `@media` rules, dark mode, preheader, ESP template variables reference, and QA checklist.

### `/design-template <category>` — Template Gallery

Start from a production-ready template for any page type:

```
/design-template landing-page #6366f1
/design-template dashboard --style dark-tech
/design-template pricing --style bold
/design-template saas #2563eb --dark
/design-template portfolio --style minimal
/design-template ecommerce #f59e0b
```

10 categories: `landing-page` · `dashboard` · `pricing` · `auth` · `blog` · `ecommerce` · `portfolio` · `docs` · `saas` · `onboarding`

Outputs: Full responsive HTML/CSS with CSS custom properties for rebrand, semantic markup, vanilla JS interactions, dark mode, and mobile layout.

### `/email-campaign <type> for <product>` — Email Campaign Sequence

Plan and generate a complete multi-email campaign with copy and HTML templates:

```
/email-campaign welcome-series for Figma-clone SaaS — new signups
/email-campaign product-launch for Naksha v3 — existing users
/email-campaign re-engagement for fitness app — 60-day inactive users
/email-campaign onboarding for project management tool — trial users
```

Outputs: Campaign brief, sequence map with timing, copy for all emails (subject lines, preview text, body, CTAs), full HTML for each email, ESP automation setup notes, A/B test plan.

### `/chart-design <description>` — Chart & Data Visualization

Design any chart with the right chart type, accessible color palette, annotations, and production-ready HTML/CSS/JS:

```
/chart-design monthly revenue trend for 2025
/chart-design part-to-whole breakdown of user acquisition channels
/chart-design scatter plot: ad spend vs conversion rate
/chart-design --library d3 geographic user distribution by US state
```

Applies colorblind-safe palettes (sequential/diverging/categorical), adds contextual annotations, includes ARIA accessibility (role="img", title, desc), responsive tick density, and Chart.js data table fallback. Supports `--library` flag for D3, Recharts, Visx, or vanilla SVG.

### `/dashboard-layout <description>` — Dashboard Layout

Build a complete, production-ready dashboard layout:

```
/dashboard-layout SaaS analytics dashboard with MRR, churn, active users
/dashboard-layout e-commerce admin: orders, revenue, inventory, customer table
/dashboard-layout monitoring dashboard for API performance metrics --style dark-tech
/dashboard-layout --type executive weekly business review for C-suite
```

Outputs full HTML/CSS with sidebar navigation, 4-column KPI card row, primary + secondary chart areas (with `/chart-design` integration hooks), filter bar with date range selectors, sortable data table with pagination, responsive breakpoints (desktop/tablet/mobile), dark mode, and vanilla JS interactions.

### `/design-tutorial [track]` — Interactive Tutorial

New to Naksha? Run a guided tour with real exercises:

```
/design-tutorial                    # shows welcome screen + track selection
/design-tutorial quick-start        # 5 min: run 3 commands, see what each produces
/design-tutorial ui                 # 15 min: build component → extract tokens → handoff
/design-tutorial figma              # 15 min: create in Figma → responsive → prototype
/design-tutorial social             # 15 min: post design → campaign → analytics
/design-tutorial email              # 15 min: welcome template → onboarding sequence
/design-tutorial data-viz           # 15 min: chart design → full dashboard
/design-tutorial full               # 30 min: complete tour of all 9 wings
```

Each track produces real output — you're not just reading docs, you're running commands. The quick-start track covers the three most common commands (`/design`, `/design-review`, `/design-framework`) in under 5 minutes.

### `/figma-component-library <description>` — Figma Component Library Generator

Generate a complete component library in Figma — atoms → molecules → organisms — from a brand description or design token config:

```
/figma-component-library SaaS product with blue primary, minimal style
/figma-component-library e-commerce: product cards, cart, checkout forms
/figma-component-library --scope atoms   # generate only atom-level components
/figma-component-library --config design-tokens.json --framework
```

Generates the full atomic design hierarchy:
- **Atoms** (18 components): Button, Badge, Input, Checkbox, Toggle, Avatar, Spinner, Tooltip, and more — each with all variants and states
- **Molecules** (16 components): Card, Form Field, Alert, Modal, Tabs, Dropdown, Stat Card, Empty State, and more
- **Organisms** (10 components): Nav Bar, Sidebar, Data Table, Hero, Form Section, Pricing Card, and more

All components use auto layout, component properties, and a consistent token foundation. Add `--framework` for companion TypeScript interface specs.

</details>

---

## 🔗 Workflows

Commands chain together. Each command suggests relevant next steps:

| Workflow | Pipeline |
|----------|----------|
| Design from scratch | `/design` → `/design-review` → `/design-system` → `/figma-create` |
| Figma-native | `/figma-create` → `/ux-audit` → `/figma-prototype` → `/figma-responsive` |
| Design-to-code | `/figma` → `/design-review` → `/figma-sync` |
| Brand setup | `/brand-kit` → `/figma-create` → `/design-handoff` |
| Stakeholder review | `/figma-create` → `/design-present` → `/ab-variants` |
| Full product sprint | `/design-sprint` → `/figma-create` → `/figma-prototype` → `/design-present` |
| Social media launch | `/social-campaign` → `/social-content` → `/social-analytics` |
| Social content creation | `/brand-kit` → `/social-content` → `/ab-variants` |
| Design-to-React | `/design` → `/design-framework react-tailwind` → `/design-review` |
| Design-to-Next.js | `/design` → `/design-framework nextjs` → `/figma-sync` |
| Email launch sequence | `/brand-kit` → `/email-template` → `/email-campaign` |
| Email + social campaign | `/email-campaign` → `/social-campaign` → `/social-analytics` |
| Template to production | `/design-template` → `/design-framework react-tailwind` → `/design-system` |
| Template to Figma | `/design-template` → `/figma-create` → `/component-docs` |
| Data viz pipeline | `/dashboard-layout` → `/chart-design` → `/design-framework` |
| Full analytics build | `/brand-kit` → `/dashboard-layout` → `/chart-design` → `/design-handoff` |
| First-time user | `/design-tutorial quick-start` → `/design-tutorial <track>` → `/design <task>` |
| Full design system | `/brand-kit` → `/figma-component-library` → `/design-handoff` → `/design-framework` |
| Brand launch | `/brand-strategy` → `/brand-kit` → `/illustration-system` → `/social-content` |
| Pitch deck | `/brand-strategy` → `/presentation-design` → `/design-present` |
| Motion system | `/design-system` → `/motion-design` → `/design-review` |
| Video + social | `/video-script` → `/social-content` → `/social-campaign` |
| Full identity system | `/brand-strategy` → `/brand-kit` → `/illustration-system` → `/figma-component-library` |
| Project setup | `/naksha-init` → `/brand-kit` → `/design-system` → `/design` |
| Pre-launch pipeline | `/pipeline run launch-prep` |
| Competitor research | `/competitive-audit` → `/design-compare` → `/design` |
| Chatbot + voice | `/design-chatbot` → `/design-voice-ui` → `/design-system` |
| Spatial app | `/design-spatial` → `/design-ar-overlay` → `/design-system` |
| GDPR + compliance | `/design-gdpr` → `/design-compliance --regulation ada` |
| Design quality gate | `/design` → `/design-score` → `/design-review` |
| Plugin health check | `/naksha-doctor` → `/naksha-doctor --fix` |

---

## 🚦 CI/CD Design Checks

Add automatic design quality checks to every PR. The included GitHub Action runs when HTML/CSS files change, posts a score card as a PR comment, and fails CI if quality drops below the threshold.

**Setup:** Copy the workflow to your repo:
```bash
cp .github/workflows/design-check.yml /your-repo/.github/workflows/
cp scripts/design-lint.js /your-repo/scripts/
```

**PR comment example:**
```
✅ Design Quality Check — Score: 94/100

| Severity | File | Check | Issue |
|----------|------|-------|-------|
| 🟡 Warning | src/dashboard.html | CSS token compliance | 7 hardcoded hex colors found |
```

**Local run:**
```bash
node scripts/design-lint.js src/**/*.html src/**/*.css
```

**Configure** via `.design-lint.json` in your repo root (copy from `.design-lint.json.example`):
```json
{ "failThreshold": 80, "ignorePatterns": ["dist/**"] }
```

**Score formula:** `100 − (errors × 10) − (warnings × 3)`

---

## 🧠 Project Memory (v5)

Naksha can remember your project's design constraints across sessions. Run `/naksha-init` once to create a `.naksha/project.json` file with your brand colors, font, voice, and framework. Commands like `/design`, `/brand-kit`, `/design-system`, `/design-score`, and `/accessibility-audit` read this file automatically — no copy-pasting context every time.

**Three ways to build memory:**

| Command | What It Does |
|---------|-------------|
| `/naksha-init` | Interactive wizard — sets brand color, font, voice, framework, token format |
| `/naksha-browse <url>` | Capture live site patterns (layout, type, color, UX) and store as `browser_findings` |
| `/naksha-remember <constraint>` | Persist constraints (`grid is 8px`, `no dark mode`, `WCAG AA required`) or component patterns |

Memory is stored in `.naksha/project.json`. Commit it to share context with your team, or add `.naksha/` to `.gitignore` to keep it local. The Stop hook automatically applies any memory-write blocks emitted during a session — so constraints written mid-conversation are persisted without manual saves.

Run `/naksha-status` to see the current context, and `/naksha-doctor` to validate the full plugin health.

---

## ⚙️ How It Works

When you run a command, the Design Manager reads your request and assembles the right specialist roles from `skills/design/references/`. Each role contributes its knowledge — UI Designer for color and typography, Motion Designer for animation, Design System Lead for tokens, and so on. The assembled team runs the full workflow: research, strategy, creative, build, and delivery.

**Adaptive loading:** A simple button redesign loads 1–2 references. A full product feature loads 4–7 references with the complete workflow.

---

## 🤖 Agents

| Agent | What It Does | Runs In |
|-------|-------------|---------|
| **accessibility-auditor** | Comprehensive WCAG AA compliance audit with specific code fixes | Background |
| **design-qa** | Visual QA at 3 breakpoints, token compliance scoring, interaction state check | Background |
| **figma-creator** | Creates pages, frames, components, and styles directly in Figma via Desktop Bridge | Foreground |
| **design-critique** | Automated UX heuristic review — Nielsen's 10 heuristics, visual audit, interaction states + 4-dimension scoring | Foreground |
| **design-lint** | Scans Figma files for orphan colors, non-standard spacing, low contrast, missing auto-layout (haiku model) | Foreground |
| **design-token-extractor** | Extracts design tokens from CSS/Figma files — color, typography, spacing, shadows (haiku model) | Background |
| **design-score** | Quantitative design scorer — derives Accessibility, Usability, Visual Quality, Token Compliance dimensions | Foreground |

Background agents run in parallel with your main work. Foreground agents run interactively.

---

## 🔍 Auto-Detection

The plugin automatically detects your project context at session start:

| Detects | How |
|---------|-----|
| CSS Framework | Tailwind, PostCSS, Bootstrap |
| JS Framework | React, Vue, Svelte, Next.js, Nuxt, Angular, Astro, Remix, SolidJS |
| TypeScript | `tsconfig.json` |
| Build Tool | Vite, Webpack, Turborepo |
| CSS-in-JS | styled-components, Emotion, vanilla-extract |
| Component Library | Radix UI, Chakra, MUI, Mantine, shadcn/ui |
| Design Tokens | `.tokens.json`, `tokens.css`, Style Dictionary |
| Figma | `.figmarc`, Code Connect files |
| Deployment | `firebase.json` |
| Documentation | `.storybook/` directory |

Recommendations adapt to match your stack — no manual configuration needed.

---

## ⚙️ Configuration

Create `skills/design/settings.local.md` (gitignored) to set defaults:

```yaml
brand_color: "#6366f1"
accent_color: "#f59e0b"
brand_name: "MyProduct"
brand_mood: "professional"

css_framework: "tailwind"
default_font: "Inter"
icon_library: "lucide"

include_dark_mode: true
min_contrast_ratio: 4.5
spacing_base: 8

deploy_target: "firebase"
```

Settings marked `"auto"` or left empty defer to auto-detection. The Design Manager reads these at the start of every task.

---

## 📁 What's Inside

```
naksha/
├── .claude-plugin/plugin.json          # Plugin manifest (v5.0.0)
├── skills/design/
│   ├── SKILL.md                        # Design Manager orchestration
│   ├── settings.local.md              # User-configurable preferences
│   └── references/                     # 32 specialist role knowledge bases
│       ├── product-designer.md         # End-to-end UX, feature scoping
│       ├── ux-designer.md              # Flows, wireframes, IA
│       ├── ui-designer.md              # Color, typography, layout, components
│       ├── ux-researcher.md            # Heuristics, accessibility, edge cases
│       ├── content-designer.md         # Microcopy, errors, tone of voice
│       ├── design-system-lead.md       # 3-tier tokens, theming, dark mode, Figma styles
│       ├── motion-designer.md          # Timing, easing, micro-interactions, FLIP
│       ├── figma-workflow.md           # Figma MCP tools, design-to-code + creation
│       ├── figma-creation.md           # Figma API patterns via Desktop Bridge
│       ├── deployment.md              # Preview server, Firebase Hosting
│       ├── social-media-designer.md    # Platform specs, safe zones, visual systems
│       ├── social-media-strategist.md  # Campaign planning, content calendar, KPIs
│       ├── social-media-copywriter.md  # Captions, hooks, hashtag strategy
│       ├── growth-analytics-specialist.md # Metrics, dashboards, A/B testing
│       ├── email-designer.md           # HTML email, responsive, dark mode, ESPs
│       ├── email-copywriter.md         # Subject lines, sequences, deliverability
│       ├── data-viz-designer.md        # Chart type selection, colorblind-safe palettes
│       ├── dashboard-architect.md      # KPI layouts, filter systems, data tables
│       ├── framework-specialist.md     # React/Vue/Svelte/Next.js/Astro patterns
│       ├── template-gallery.md         # 10 production web templates
│       ├── presentation-designer.md    # Slide systems, pitch decks, data storytelling
│       ├── brand-strategist.md         # Positioning, visual identity, brand architecture
│       ├── illustration-director.md    # Icon systems, SVG standards, style taxonomy
│       ├── video-content-producer.md   # Scripts, storyboards, short-form pacing
│       ├── conversational-designer.md  # Chatbot UI, VUI, dialog flows, persona systems
│       ├── spatial-designer.md         # visionOS HIG, WebXR, depth layers, gaze/gesture
│       └── compliance-designer.md      # GDPR/CCPA consent UX, HIPAA, PCI, ADA compliance
├── commands/                           # 63 slash commands
├── agents/                             # 7 specialist agents
├── hooks/hooks.json                    # SessionStart + PreToolUse + Stop hooks
├── scripts/
│   ├── detect-design-context.sh        # Project stack detection
│   └── run-evals.sh                    # Eval structure validator
├── evals/
│   ├── evals.json                      # 161 eval cases (prompt + assertion specs)
│   └── fixtures/                       # 63 output fixtures for behavioral smoke tests
├── assets/                             # Social preview + demo images
├── CHANGELOG.md                       # Version history
└── CONTRIBUTING.md                    # Contributor guide
```

<details>
<summary><b>Design knowledge breakdown (15,000+ raw lines)</b></summary>

| File | Lines | Covers |
|------|-------|--------|
| **figma-creation.md** | **693** | **Figma Desktop Bridge API, async patterns, auto-layout, component sets, paint/text styles, variables, wireframe patterns, annotations, screenshot validation** |
| design-system-lead.md | 427 | 3-tier tokens, theming, dark mode, Figma paint/text style creation, component sets |
| motion-designer.md | 360 | Timing, easing functions, transitions, micro-interactions, reduced motion |
| **design-lint.md** | **335** | **6 lint rule categories, orphan colors, contrast, non-standard spacing, auto-layout quality, component hygiene, scored reports** |
| **design-sprint.md** | **327** | **5-phase sprint: Understand, Diverge, Decide, Prototype, Validate — problem framing, ideation, decision matrix, test plans** |
| **site-to-figma.md** | **310** | **Website capture via Playwright, style extraction, Figma recreation as auto-layout frames with Paint/Text Styles** |
| **brand-kit.md** | **301** | **HSL shade generation, secondary color derivation, type scale, spacing scale, CSS/Tailwind/JSON/Figma outputs** |
| **figma-responsive.md** | **298** | **Responsive variant generation, layout analysis, breakpoint adaptation, grid reflow, sidebar collapse** |
| **design-handoff.md** | **278** | **Developer handoff docs, token maps, spacing specs, component APIs, CSS/Tailwind/TypeScript exports** |
| SKILL.md | 300 | Design Manager orchestration, team assembly, workflow phases, output formats |
| **design-critique.md** | **263** | **UX heuristic review, Nielsen's 10 heuristics, visual audit, interaction states, critique reporting** |
| **component-docs.md** | **262** | **Auto-generated Storybook-style docs, prop tables, variant grids, usage guidelines, code examples** |
| **figma-prototype.md** | **258** | **Prototype connections, interactive element detection, transition presets, flow specification** |
| **figma-sync.md** | **252** | **Design-code drift detection, token comparison, typography/spacing sync, patch generation** |
| **ab-variants.md** | **248** | **A/B test variant generation, layout/CTA/copy/color changes, testing recommendations** |
| figma-workflow.md | 246 | Figma MCP tools, design-to-code, Figma-native creation workflow |
| ui-designer.md | 243 | Color theory, type scale, grid, components, responsive patterns |
| ux-designer.md | 239 | User flows, IA, wireframing, interaction design, usability |
| **design-present.md** | **233** | **Interactive HTML presentations, keyboard nav, annotations, walkthrough/pitch/case-study types** |
| content-designer.md | 229 | Microcopy, error formulas, empty states, tone, number formatting |
| ux-audit.md | 219 | Figma file compliance auditing, brief parsing, structural/style/component checks |
| ux-researcher.md | 207 | Nielsen's heuristics, WCAG AA checklist, mental models, edge cases |
| deployment.md | 198 | Preview server, Firebase Hosting, image/CSS/font optimization |
| figma-create.md | 150 | Create designs in Figma command — pages, wireframes, components, design systems |
| figma-creator.md | 142 | Figma creation specialist agent — layout building, component creation, validation |
| design.md (command) | 107 | Full design workflow — team assembly, creative direction, implementation, quality review |
| figma.md (command) | 108 | Figma-to-code workflow — analysis, layout mapping, comparison, refinement |
| design-review.md (cmd) | 89 | 5-point quality audit — accessibility, usability, visual, content, motion |
| design-system.md (cmd) | 84 | Token generation, extraction, auditing — CSS variables, Tailwind, JSON |
| product-designer.md | 140 | Feature scoping, user outcomes, business alignment, design patterns |
| design-qa.md | 127 | Visual QA at 3 breakpoints, token compliance, interaction states |
| accessibility-auditor.md | 105 | WCAG AA compliance, color contrast, semantic HTML, keyboard nav |

</details>

---

## 🛠 Tech Stack Defaults

| Category | Default | Why |
|----------|---------|-----|
| Styling | Tailwind CSS | Utility-first, rapid iteration |
| Icons | Lucide | Clean, consistent, tree-shakeable |
| Fonts | Inter | Optimized for UI, great readability |
| Charts | Chart.js / SVG | Lightweight, no heavy deps |
| Animations | CSS transitions | No JS libraries for simple motion |
| Preview | Claude Preview MCP | Live results in your editor |
| Deployment | Firebase Hosting | One-command deploy |

All defaults adapt when the plugin detects your project uses a different stack.

---

### Quality check

Run all quality gates locally:

```bash
bash scripts/quality-check.sh
```

Checks: metadata consistency (`meta/stats.json` vs filesystem vs README badges), behavioral smoke evals (pre-captured command output fixtures), legacy branding guard.

---

## 📦 Installation

```bash
git clone https://github.com/Adityaraj0421/naksha-studio.git
cd naksha-studio && bash install.sh
```

Restart Claude Code to load the plugin. To update: `git pull` (no reinstall needed).

---

## Requirements

- [Claude Code](https://claude.ai/claude-code) CLI
- **Optional MCP servers** for Figma + Preview capabilities — see [MCP Setup Guide](MCP-SETUP.md)

---

<div align="center">

**Built with Claude Code**

[Report Issues](https://github.com/Adityaraj0421/naksha-studio/issues) · [Changelog](CHANGELOG.md) · [MIT License](LICENSE)

</div>
Design Manager Orchestrates	Creative Director Vision	Product Designer Strategy	UX Designer Flows	UI Designer Visual	UX Researcher Insights	Content Designer Copy
Design System Lead Tokens	Motion Designer Animation	Social Media Designer Social Visuals	Social Media Strategist Campaigns	Social Media Copywriter Captions	Growth/Analytics Specialist Metrics	Email Designer HTML Email
Email Copywriter Subject Lines	Data Viz Designer Charts	Dashboard Architect Layouts	Presentation Designer Decks	Brand Strategist Positioning	Illustration Director Icons & Art	Video/Content Producer Scripts
AI Image Director Image Gen	AI Video Director Video Gen	AI Audio & Voice Producer Voiceover & Music	AI Prompt Engineer Prompt Systems
Print Designer Print & PDF
_The skill loads only the references your task actually needs_