{
  "markdown": "<div align=\"center\">\n\n# naksha\n\n**Your agency's design brain. Always on, always yours.**\n\n*The Naksha design team, inside your terminal — 26 specialist roles activate automatically based on what you're building.*\n\n<br>\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![Claude Code](https://img.shields.io/badge/Claude_Code-Plugin-blueviolet)](https://claude.ai/claude-code)\n[![Cursor](https://img.shields.io/badge/Cursor-Rules-black)]()\n[![Windsurf](https://img.shields.io/badge/Windsurf-Rules-0099ff)]()\n[![Gemini CLI](https://img.shields.io/badge/Gemini_CLI-GEMINI.md-4285F4)]()\n[![Copilot](https://img.shields.io/badge/Copilot-Instructions-24292e)]()\n[![Autohand Code CLI](https://img.shields.io/badge/Autohand_Code_CLI-AGENTS.md-0A84FF)](https://github.com/autohandai/code-cli)\n[![Roles](https://img.shields.io/badge/Specialist_Roles-26-orange)]()\n[![Commands](https://img.shields.io/badge/Slash_Commands-63-green)]()\n[![Design Knowledge](https://img.shields.io/badge/Design_Knowledge-15000%2B_lines-E8633A)]()\n\n[Quick Start](#-quick-start) · [Commands](#-commands) · [The Team](#-the-team) · [How It Works](#-how-it-works) · [Changelog](CHANGELOG.md)\n\n</div>\n\n---\n\n## 🚀 Quick Start\n\n### Claude Code (full plugin — 63 commands, agents, hooks)\n\n```bash\ngit clone https://github.com/Adityaraj0421/naksha-studio.git\ncd naksha-studio && bash install.sh\n```\n\nThen restart Claude Code and try:\n```\n/design Build a landing page for a SaaS analytics product\n```\n\n> **✨ 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)\n\n> **Updates:** Just `git pull` inside the repo — no reinstall needed. The plugin is a live symlink to your local clone.\n\n### Cursor\n\nCopy `.cursor/rules/naksha.mdc` to your project's `.cursor/rules/` directory. The design team activates automatically for CSS, HTML, TSX, SVG, and token files.\n\n### Windsurf\n\nCopy `.windsurfrules` to your project root. Windsurf reads it automatically at session start.\n\n### Gemini CLI\n\nCopy `GEMINI.md` to your project root. Gemini CLI reads it at session start.\n\n### VS Code Copilot\n\nCopy `.github/copilot-instructions.md` to your project's `.github/` directory. Copilot Chat and inline completions will apply the design team's rules.\n\n### Autohand Code CLI\n\nCopy `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.\n\n---\n\n## 👥 The Team\n\n<table>\n<tr>\n<td align=\"center\" width=\"14%\">\n\n**Design Manager**\n\nOrchestrates\n\n</td>\n<td align=\"center\" width=\"14%\">\n\n**Creative Director**\n\nVision\n\n</td>\n<td align=\"center\" width=\"14%\">\n\n**Product Designer**\n\nStrategy\n\n</td>\n<td align=\"center\" width=\"14%\">\n\n**UX Designer**\n\nFlows\n\n</td>\n<td align=\"center\" width=\"14%\">\n\n**UI Designer**\n\nVisual\n\n</td>\n<td align=\"center\" width=\"14%\">\n\n**UX Researcher**\n\nInsights\n\n</td>\n<td align=\"center\" width=\"14%\">\n\n**Content Designer**\n\nCopy\n\n</td>\n</tr>\n<tr>\n<td align=\"center\">\n\n**Design System Lead**\n\nTokens\n\n</td>\n<td align=\"center\">\n\n**Motion Designer**\n\nAnimation\n\n</td>\n<td align=\"center\">\n\n**Social Media Designer**\n\nSocial Visuals\n\n</td>\n<td align=\"center\">\n\n**Social Media Strategist**\n\nCampaigns\n\n</td>\n<td align=\"center\">\n\n**Social Media Copywriter**\n\nCaptions\n\n</td>\n<td align=\"center\">\n\n**Growth/Analytics Specialist**\n\nMetrics\n\n</td>\n<td align=\"center\">\n\n**Email Designer**\n\nHTML Email\n\n</td>\n</tr>\n<tr>\n<td align=\"center\">\n\n**Email Copywriter**\n\nSubject Lines\n\n</td>\n<td align=\"center\">\n\n**Data Viz Designer**\n\nCharts\n\n</td>\n<td align=\"center\">\n\n**Dashboard Architect**\n\nLayouts\n\n</td>\n<td align=\"center\">\n\n**Presentation Designer**\n\nDecks\n\n</td>\n<td align=\"center\">\n\n**Brand Strategist**\n\nPositioning\n\n</td>\n<td align=\"center\">\n\n**Illustration Director**\n\nIcons & Art\n\n</td>\n<td align=\"center\">\n\n**Video/Content Producer**\n\nScripts\n\n</td>\n</tr>\n<tr>\n<td align=\"center\">\n\n**AI Image Director**\n\nImage Gen\n\n</td>\n<td align=\"center\">\n\n**AI Video Director**\n\nVideo Gen\n\n</td>\n<td align=\"center\">\n\n**AI Audio & Voice Producer**\n\nVoiceover & Music\n\n</td>\n<td align=\"center\">\n\n**AI Prompt Engineer**\n\nPrompt Systems\n\n</td>\n<td align=\"center\" colspan=\"3\">\n\n</td>\n</tr>\n<tr>\n<td align=\"center\">\n\n**Print Designer**\n\nPrint & PDF\n\n</td>\n</tr>\n<tr>\n<td align=\"center\" colspan=\"7\">\n\n_The skill loads only the references your task actually needs_\n\n</td>\n</tr>\n</table>\n\n---\n\n## 🎯 Commands\n\n| Command | What It Does |\n|---------|-------------|\n| `/design <task>` | Full design workflow with team assembly |\n| `/design-review <file or screenshot>` | Quality audit — accepts HTML, Figma URLs, or screenshots for visual AI critique (6 design principles scored 0–10) |\n| `/design-system` | Generate, extract, or audit design tokens |\n| `/figma <URL>` | Convert Figma designs to production code |\n| `/figma-create <task>` | Build pages, wireframes, components in Figma |\n| `/ux-audit <brief>` | Audit Figma file against a design brief |\n| `/design-handoff` | Developer handoff docs (tokens, specs, APIs) |\n| `/figma-responsive` | Generate mobile/tablet variants from desktop |\n| `/figma-sync` | Detect design–code drift |\n| `/design-present` | Interactive HTML presentation from Figma |\n| `/brand-kit <color>` | Complete brand kit from 1–2 colors |\n| `/component-docs` | Storybook-style docs from Figma components |\n| `/figma-prototype` | Prototype connections between frames |\n| `/site-to-figma <URL>` | Capture website → editable Figma design |\n| `/ab-variants` | A/B test design variants |\n| `/design-sprint` | Guided 5-phase design sprint |\n| `/social-content <task>` | Social media visuals (posts, stories, reels, carousels) |\n| `/social-campaign <brief>` | Campaign planning with strategy, calendar, and captions |\n| `/social-analytics <type>` | Social analytics dashboards and performance reports |\n| `/design-framework <fw> [file]` | Convert HTML designs to React, Vue, Svelte, Next.js, or Astro |\n| `/email-template <type> for <brand>` | Production HTML email template (responsive, dark mode, cross-client) |\n| `/email-campaign <type> for <product>` | Complete multi-email campaign sequence with copy and HTML templates |\n| `/email-audit` | Full-spectrum email audit — technical rendering issues + copy/strategy critique (two-phase) |\n| `/design-template <category>` | Production web template from gallery (landing-page, dashboard, pricing, auth, blog, ecommerce, portfolio, docs, saas, onboarding) |\n| `/chart-design <description>` | Accessible chart or data visualization — selects chart type, applies colorblind-safe palette, outputs HTML/CSS/JS |\n| `/dashboard-layout <description>` | Complete dashboard — KPI cards, chart areas, filter bar, data table, sidebar, responsive |\n| `/data-viz-audit` | Audit chart type, palette, annotations, anti-patterns. Conditional Phase 2: dashboard fit |\n| `/design-tutorial [track]` | Interactive guided tour — tracks: quick-start, ui, figma, social, email, data-viz, full |\n| `/figma-component-library <description>` | Complete Figma component library — atoms, molecules, organisms with variants, auto layout, component properties |\n| `/motion-design <component or page>` | Design micro-interactions, transitions, and animation systems — duration/easing scale, reduced motion fallbacks |\n| `/presentation-design <deck type>` | Design a complete presentation deck — pitch deck, product demo, or internal — with slide system and visual hierarchy |\n| `/brand-strategy <brand name>` | Define or audit a brand — positioning, visual identity, voice and tone, brand architecture |\n| `/illustration-system <scope>` | Design an illustration style guide, icon system, or SVG asset set |\n| `/video-script <video type>` | Write a video script, storyboard, or content series plan for demos, explainers, social video, or ads |\n| `/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 |\n| `/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 |\n| `/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 |\n| `/gen-moodboard <concept> for <brand>` | Generate 3 AI moodboard directions — brand personality extraction, visual style, 4–6 prompts per direction |\n| `/prompt-refine <existing prompt>` | Diagnose and optimise any AI gen prompt — annotated critique, optimised version, cross-tool variant |\n| `/print-layout <brief>` | Print-ready layout — business cards, certificates, brochures, posters with CMYK, bleed, and crop marks |\n| `/print-audit <file>` | Pre-flight audit for print: bleed, CMYK, resolution, font embedding, PDF/X compliance |\n| `/pdf-report <brief>` | Multi-page PDF report or document — cover, table of contents, body sections, charts, structured for print or digital |\n| `/lint-design <figma_url>` | Design linter — orphan colors, non-token spacing, missing auto-layout, contrast violations, scored by severity |\n| `/accessibility-audit` | WCAG 2.1 AA audit — contrast, ARIA, keyboard nav, semantic HTML — with specific code fixes |\n| `/design-qa <file or URL>` | Visual QA at 3 breakpoints — token compliance, interaction states, responsive behavior |\n| `/design-critique <file>` | Heuristic review — Nielsen's 10 heuristics, visual audit, interaction states; add `--screenshot <path>` for vision-mode critique |\n\n**v4.0.0 — Memory, Pipelines, Vision & Frontier Wings**\n\n| `/naksha-init` | Interactive project setup wizard — writes `.naksha/project.json` (brand, framework, tokens) and creates a design decision log |\n| `/naksha-status` | Display current project context and recent design decisions from memory |\n| `/pipeline run <name>` | Execute a multi-step design pipeline — `launch-prep`, `brand-audit`, `component-build`, `social-launch` |\n| `/design-compare <url1> <url2>` | Side-by-side visual analysis of two URLs — layout, typography, color, UX patterns, \"Steal This\" recommendations |\n| `/competitive-audit <url>` | Extract a competitor's color palette, type system, layout grid, and UX patterns with quality ratings |\n| `/design-chatbot <type> [platform]` | Complete chatbot/assistant UI spec — persona, dialog flows, message bubbles, quick replies, error states, accessibility |\n| `/design-voice-ui <product> [platform] [screen]` | Voice interface spec — wake word flows, confirmation patterns, hybrid screen layout, SSML, earcon design |\n| `/design-spatial <type> [platform]` | Spatial computing spec for visionOS/WebXR — depth hierarchy, window types, ornaments, spatial typography |\n| `/design-ar-overlay <use-case> [platform]` | AR overlay spec — anchor strategy, world tracking UI, instruction cards, scan states, occlusion handling |\n| `/design-gdpr <type> [jurisdiction]` | GDPR/CCPA consent flows — cookie banner variants, privacy control center, data deletion request flow |\n| `/design-compliance --regulation <hipaa\\|pci\\|ada>` | Compliance design audit or generation — HIPAA PHI handling, PCI payment form isolation, ADA/Section 508 |\n\n**v4.6.0 — CI/CD & Health**\n\n| `/naksha-doctor [--fix]` | Plugin health check — validates command count, references, version consistency, allowed-tools; probes Playwright + Figma MCP availability; `--fix` remediates issues automatically |\n\n**v4.7.0 — Design Intelligence**\n\n| `/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 |\n\n**v5.0.0 — Project Memory & Design Agent**\n\n| `/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 |\n| `/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 |\n\n<details>\n<summary><b>📖 Command details & examples</b></summary>\n\n<br>\n\n### `/design <task>` — Full Design Workflow\n\nAssembles the right specialists and runs the complete workflow:\n\n```\n/design Create a 3-tier pricing page with monthly/annual toggle\n/design Redesign the onboarding flow for better conversion\n/design Build a real-time analytics dashboard\n```\n\n### `/design-reel <task>` — Watch the Team _(new in v5.1)_\n\nRuns `/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:\n\n```\n/design-reel Design a pricing page for a SaaS analytics product\n/design-reel Redesign the settings page --url http://localhost:3000/settings\n```\n\nOutputs `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.\n\n### `/design-review <file>` — Quality Audit\n\nRuns a structured 5-point audit on existing designs:\n\n```\n/design-review ./src/pages/checkout.html\n```\n\nChecks: Accessibility (WCAG AA) · Usability Heuristics · Visual Consistency · Content Quality · Motion Design\n\n### `/design-system` — Token Generation\n\nGenerate, extract, or audit design tokens:\n\n```\n/design-system Generate tokens from brand color #2563eb\n/design-system Extract tokens from this Figma file\n/design-system Audit existing code for hardcoded values\n```\n\n### `/figma <URL>` — Figma to Code\n\nConvert Figma designs to production-ready code:\n\n```\n/figma https://figma.com/design/abc123/MyApp?node-id=1-2\n```\n\n### `/figma-create <task>` — Create Designs in Figma\n\nBuild pages, wireframes, components, and design systems directly inside Figma via the Desktop Bridge:\n\n```\n/figma-create Build a 3-screen wireframe for a saved content feature\n/figma-create Set up a design system with color tokens and type scale\n/figma-create Create a component set for Button with 4 variants\n```\n\nRequires the [Figma Desktop Bridge](https://www.figma.com/community/plugin/figma-desktop-bridge) plugin running in Figma Desktop.\n\n### `/ux-audit <brief>` — Audit Against a Design Brief\n\nAudit a Figma file for compliance against a design brief — checks page structure, frame naming, sizes, styles, components, and content:\n\n```\n/ux-audit Check the Miles UX Design Challenge submission against the brief\n/ux-audit Verify all required screens are present at 1440×900\n```\n\n### `/design-handoff` — Developer Handoff Docs\n\nGenerate a complete developer handoff document from a Figma file — token maps, spacing specs, component APIs, and production-ready code snippets:\n\n```\n/design-handoff Generate handoff for the current Figma file\n/design-handoff Export tokens as CSS variables and Tailwind config\n```\n\nOutputs: Markdown docs, CSS custom properties, Tailwind config, TypeScript types.\n\n### `/figma-responsive <frame>` — Responsive Variants\n\nGenerate mobile (375×812) and tablet (768×1024) variants from a desktop Figma frame:\n\n```\n/figma-responsive S3-A / Saved Redesigned\n/figma-responsive Create mobile and tablet versions of the dashboard\n```\n\nClones the source frame, adapts layout (grid reflow, sidebar collapse, nav simplification), and validates each breakpoint with screenshots.\n\n### `/figma-sync` — Design-Code Sync\n\nDetect drift between Figma designs and code implementation — compare color tokens, typography, spacing, and components:\n\n```\n/figma-sync Check if Figma tokens match our Tailwind config\n/figma-sync Compare design system styles against CSS custom properties\n```\n\nOutputs a sync report with drift score, per-token comparison tables, and optional patches for both Figma and code.\n\n### `/design-present <type>` — Design Presentation\n\nGenerate an interactive HTML presentation from Figma screens:\n\n```\n/design-present Create a walkthrough presentation of the dashboard screens\n/design-present Build a pitch deck from the product mockups\n/design-present Generate a case study presentation\n```\n\nFeatures: keyboard navigation, progress bar, annotations, zoom, dark/light mode, fullscreen.\n\n### `/brand-kit <color> [mood]` — Brand Kit Generation\n\nGenerate a complete brand kit from 1-2 colors and a mood:\n\n```\n/brand-kit #6366f1 premium\n/brand-kit Generate a warm brand from #f59e0b\n```\n\nOutputs: 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.\n\n### `/component-docs` — Component Documentation\n\nAuto-generate Storybook-style documentation from Figma component sets:\n\n```\n/component-docs Document all components in the current Figma file\n/component-docs Generate docs for the Button component set\n```\n\nOutputs: prop tables, variant grids, usage guidelines, code examples (HTML/React), rendered screenshots.\n\n### `/figma-prototype` — Prototype Connections\n\nCreate interactive prototype connections between Figma frames:\n\n```\n/figma-prototype Connect all screens in the onboarding flow\n/figma-prototype Auto-detect buttons and link them to target screens\n```\n\nSupports transition presets: slide, dissolve, move-in. Auto-detects interactive elements (buttons, links, nav items, cards).\n\n### `/site-to-figma <URL>` — Website to Figma\n\nCapture a live website and recreate it as an editable Figma design:\n\n```\n/site-to-figma https://example.com\n/site-to-figma Capture the hero section of stripe.com\n```\n\nExtracts color palette, typography, section structure via Playwright, then rebuilds as auto-layout Figma frames with Paint/Text Styles.\n\n### `/ab-variants <frame> [dimension]` — A/B Test Variants\n\nGenerate A/B test design variants from an existing Figma screen:\n\n```\n/ab-variants Hero Section layout\n/ab-variants Pricing Page cta\n/ab-variants Landing Page all\n```\n\nCreates control + test variants with layout, CTA, copy, or color changes. Includes testing recommendations (sample size, duration, success metrics).\n\n### `/design-sprint <problem>` — Design Sprint\n\nGuided 5-phase design sprint methodology:\n\n```\n/design-sprint Improve signup conversion for our SaaS product\n/design-sprint Redesign the checkout experience to reduce abandonment\n```\n\nPhases: Understand (problem mapping) → Diverge (8 solution ideas) → Decide (weighted matrix) → Prototype (build testable solution) → Validate (test script + success metrics).\n\n### `/design-framework <framework> [file]` — Framework Conversion\n\nConvert HTML/CSS design output to idiomatic component code:\n\n```\n/design-framework react-tailwind ./output/landing-page.html\n/design-framework vue ./output/dashboard.html\n/design-framework nextjs ./src/app/page.html\n/design-framework svelte ./output/component.html\n/design-framework astro ./output/hero.html\n```\n\nOr trigger inline from `/design`:\n```\n/design Build a pricing page --framework react-tailwind\n/design Create an analytics dashboard --framework nextjs\n```\n\nOutputs: 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.\n\nSupported frameworks: `react-tailwind` · `vue` (Vue 3 + UnoCSS) · `svelte` (Svelte 5) · `nextjs` (App Router) · `astro`\n\n### `/social-content <task>` — Social Media Visuals\n\nCreate platform-optimized social media visuals at exact dimensions with safe zones:\n\n```\n/social-content Instagram carousel for a product launch — 5 slides\n/social-content TikTok story announcing a new feature\n/social-content LinkedIn post about our Series A funding\n```\n\n### `/social-campaign <brief>` — Campaign Planning\n\nPlan a social media campaign with strategy, content calendar, caption drafts, and KPI targets:\n\n```\n/social-campaign Awareness campaign for fitness app targeting Gen Z on Instagram and TikTok\n/social-campaign Product launch for SaaS tool — LinkedIn + Twitter — 2 weeks\n/social-campaign Engagement campaign for local restaurant on Instagram\n```\n\nOutputs: campaign strategy, 2-week content calendar, first-week caption drafts with hooks and CTAs, KPI targets. Visual assets created separately via `/social-content`.\n\n### `/social-analytics <type>` — Social Analytics\n\nBuild analytics dashboards, performance reports, or A/B test frameworks:\n\n```\n/social-analytics dashboard for Instagram + TikTok — last 30 days\n/social-analytics weekly report for LinkedIn company page\n/social-analytics ab-test Compare carousel vs. single-image posts on Instagram\n```\n\n### `/email-template <type> for <brand>` — HTML Email Template\n\nGenerate a production-ready HTML email template with inline styles, table layout, and bulletproof buttons:\n\n```\n/email-template welcome for Acme SaaS — new user signup\n/email-template promotional for ShopCo — Black Friday 30% off sale\n/email-template transactional for OrderCo — order confirmation with item table\n/email-template newsletter for TechBlog — weekly curated articles\n```\n\nOutputs: Full HTML with VML buttons (Outlook), mobile-responsive `@media` rules, dark mode, preheader, ESP template variables reference, and QA checklist.\n\n### `/design-template <category>` — Template Gallery\n\nStart from a production-ready template for any page type:\n\n```\n/design-template landing-page #6366f1\n/design-template dashboard --style dark-tech\n/design-template pricing --style bold\n/design-template saas #2563eb --dark\n/design-template portfolio --style minimal\n/design-template ecommerce #f59e0b\n```\n\n10 categories: `landing-page` · `dashboard` · `pricing` · `auth` · `blog` · `ecommerce` · `portfolio` · `docs` · `saas` · `onboarding`\n\nOutputs: Full responsive HTML/CSS with CSS custom properties for rebrand, semantic markup, vanilla JS interactions, dark mode, and mobile layout.\n\n### `/email-campaign <type> for <product>` — Email Campaign Sequence\n\nPlan and generate a complete multi-email campaign with copy and HTML templates:\n\n```\n/email-campaign welcome-series for Figma-clone SaaS — new signups\n/email-campaign product-launch for Naksha v3 — existing users\n/email-campaign re-engagement for fitness app — 60-day inactive users\n/email-campaign onboarding for project management tool — trial users\n```\n\nOutputs: 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.\n\n### `/chart-design <description>` — Chart & Data Visualization\n\nDesign any chart with the right chart type, accessible color palette, annotations, and production-ready HTML/CSS/JS:\n\n```\n/chart-design monthly revenue trend for 2025\n/chart-design part-to-whole breakdown of user acquisition channels\n/chart-design scatter plot: ad spend vs conversion rate\n/chart-design --library d3 geographic user distribution by US state\n```\n\nApplies 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.\n\n### `/dashboard-layout <description>` — Dashboard Layout\n\nBuild a complete, production-ready dashboard layout:\n\n```\n/dashboard-layout SaaS analytics dashboard with MRR, churn, active users\n/dashboard-layout e-commerce admin: orders, revenue, inventory, customer table\n/dashboard-layout monitoring dashboard for API performance metrics --style dark-tech\n/dashboard-layout --type executive weekly business review for C-suite\n```\n\nOutputs 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.\n\n### `/design-tutorial [track]` — Interactive Tutorial\n\nNew to Naksha? Run a guided tour with real exercises:\n\n```\n/design-tutorial                    # shows welcome screen + track selection\n/design-tutorial quick-start        # 5 min: run 3 commands, see what each produces\n/design-tutorial ui                 # 15 min: build component → extract tokens → handoff\n/design-tutorial figma              # 15 min: create in Figma → responsive → prototype\n/design-tutorial social             # 15 min: post design → campaign → analytics\n/design-tutorial email              # 15 min: welcome template → onboarding sequence\n/design-tutorial data-viz           # 15 min: chart design → full dashboard\n/design-tutorial full               # 30 min: complete tour of all 9 wings\n```\n\nEach 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.\n\n### `/figma-component-library <description>` — Figma Component Library Generator\n\nGenerate a complete component library in Figma — atoms → molecules → organisms — from a brand description or design token config:\n\n```\n/figma-component-library SaaS product with blue primary, minimal style\n/figma-component-library e-commerce: product cards, cart, checkout forms\n/figma-component-library --scope atoms   # generate only atom-level components\n/figma-component-library --config design-tokens.json --framework\n```\n\nGenerates the full atomic design hierarchy:\n- **Atoms** (18 components): Button, Badge, Input, Checkbox, Toggle, Avatar, Spinner, Tooltip, and more — each with all variants and states\n- **Molecules** (16 components): Card, Form Field, Alert, Modal, Tabs, Dropdown, Stat Card, Empty State, and more\n- **Organisms** (10 components): Nav Bar, Sidebar, Data Table, Hero, Form Section, Pricing Card, and more\n\nAll components use auto layout, component properties, and a consistent token foundation. Add `--framework` for companion TypeScript interface specs.\n\n</details>\n\n---\n\n## 🔗 Workflows\n\nCommands chain together. Each command suggests relevant next steps:\n\n| Workflow | Pipeline |\n|----------|----------|\n| Design from scratch | `/design` → `/design-review` → `/design-system` → `/figma-create` |\n| Figma-native | `/figma-create` → `/ux-audit` → `/figma-prototype` → `/figma-responsive` |\n| Design-to-code | `/figma` → `/design-review` → `/figma-sync` |\n| Brand setup | `/brand-kit` → `/figma-create` → `/design-handoff` |\n| Stakeholder review | `/figma-create` → `/design-present` → `/ab-variants` |\n| Full product sprint | `/design-sprint` → `/figma-create` → `/figma-prototype` → `/design-present` |\n| Social media launch | `/social-campaign` → `/social-content` → `/social-analytics` |\n| Social content creation | `/brand-kit` → `/social-content` → `/ab-variants` |\n| Design-to-React | `/design` → `/design-framework react-tailwind` → `/design-review` |\n| Design-to-Next.js | `/design` → `/design-framework nextjs` → `/figma-sync` |\n| Email launch sequence | `/brand-kit` → `/email-template` → `/email-campaign` |\n| Email + social campaign | `/email-campaign` → `/social-campaign` → `/social-analytics` |\n| Template to production | `/design-template` → `/design-framework react-tailwind` → `/design-system` |\n| Template to Figma | `/design-template` → `/figma-create` → `/component-docs` |\n| Data viz pipeline | `/dashboard-layout` → `/chart-design` → `/design-framework` |\n| Full analytics build | `/brand-kit` → `/dashboard-layout` → `/chart-design` → `/design-handoff` |\n| First-time user | `/design-tutorial quick-start` → `/design-tutorial <track>` → `/design <task>` |\n| Full design system | `/brand-kit` → `/figma-component-library` → `/design-handoff` → `/design-framework` |\n| Brand launch | `/brand-strategy` → `/brand-kit` → `/illustration-system` → `/social-content` |\n| Pitch deck | `/brand-strategy` → `/presentation-design` → `/design-present` |\n| Motion system | `/design-system` → `/motion-design` → `/design-review` |\n| Video + social | `/video-script` → `/social-content` → `/social-campaign` |\n| Full identity system | `/brand-strategy` → `/brand-kit` → `/illustration-system` → `/figma-component-library` |\n| Project setup | `/naksha-init` → `/brand-kit` → `/design-system` → `/design` |\n| Pre-launch pipeline | `/pipeline run launch-prep` |\n| Competitor research | `/competitive-audit` → `/design-compare` → `/design` |\n| Chatbot + voice | `/design-chatbot` → `/design-voice-ui` → `/design-system` |\n| Spatial app | `/design-spatial` → `/design-ar-overlay` → `/design-system` |\n| GDPR + compliance | `/design-gdpr` → `/design-compliance --regulation ada` |\n| Design quality gate | `/design` → `/design-score` → `/design-review` |\n| Plugin health check | `/naksha-doctor` → `/naksha-doctor --fix` |\n\n---\n\n## 🚦 CI/CD Design Checks\n\nAdd 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.\n\n**Setup:** Copy the workflow to your repo:\n```bash\ncp .github/workflows/design-check.yml /your-repo/.github/workflows/\ncp scripts/design-lint.js /your-repo/scripts/\n```\n\n**PR comment example:**\n```\n✅ Design Quality Check — Score: 94/100\n\n| Severity | File | Check | Issue |\n|----------|------|-------|-------|\n| 🟡 Warning | src/dashboard.html | CSS token compliance | 7 hardcoded hex colors found |\n```\n\n**Local run:**\n```bash\nnode scripts/design-lint.js src/**/*.html src/**/*.css\n```\n\n**Configure** via `.design-lint.json` in your repo root (copy from `.design-lint.json.example`):\n```json\n{ \"failThreshold\": 80, \"ignorePatterns\": [\"dist/**\"] }\n```\n\n**Score formula:** `100 − (errors × 10) − (warnings × 3)`\n\n---\n\n## 🧠 Project Memory (v5)\n\nNaksha 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.\n\n**Three ways to build memory:**\n\n| Command | What It Does |\n|---------|-------------|\n| `/naksha-init` | Interactive wizard — sets brand color, font, voice, framework, token format |\n| `/naksha-browse <url>` | Capture live site patterns (layout, type, color, UX) and store as `browser_findings` |\n| `/naksha-remember <constraint>` | Persist constraints (`grid is 8px`, `no dark mode`, `WCAG AA required`) or component patterns |\n\nMemory 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.\n\nRun `/naksha-status` to see the current context, and `/naksha-doctor` to validate the full plugin health.\n\n---\n\n## ⚙️ How It Works\n\nWhen 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.\n\n**Adaptive loading:** A simple button redesign loads 1–2 references. A full product feature loads 4–7 references with the complete workflow.\n\n---\n\n## 🤖 Agents\n\n| Agent | What It Does | Runs In |\n|-------|-------------|---------|\n| **accessibility-auditor** | Comprehensive WCAG AA compliance audit with specific code fixes | Background |\n| **design-qa** | Visual QA at 3 breakpoints, token compliance scoring, interaction state check | Background |\n| **figma-creator** | Creates pages, frames, components, and styles directly in Figma via Desktop Bridge | Foreground |\n| **design-critique** | Automated UX heuristic review — Nielsen's 10 heuristics, visual audit, interaction states + 4-dimension scoring | Foreground |\n| **design-lint** | Scans Figma files for orphan colors, non-standard spacing, low contrast, missing auto-layout (haiku model) | Foreground |\n| **design-token-extractor** | Extracts design tokens from CSS/Figma files — color, typography, spacing, shadows (haiku model) | Background |\n| **design-score** | Quantitative design scorer — derives Accessibility, Usability, Visual Quality, Token Compliance dimensions | Foreground |\n\nBackground agents run in parallel with your main work. Foreground agents run interactively.\n\n---\n\n## 🔍 Auto-Detection\n\nThe plugin automatically detects your project context at session start:\n\n| Detects | How |\n|---------|-----|\n| CSS Framework | Tailwind, PostCSS, Bootstrap |\n| JS Framework | React, Vue, Svelte, Next.js, Nuxt, Angular, Astro, Remix, SolidJS |\n| TypeScript | `tsconfig.json` |\n| Build Tool | Vite, Webpack, Turborepo |\n| CSS-in-JS | styled-components, Emotion, vanilla-extract |\n| Component Library | Radix UI, Chakra, MUI, Mantine, shadcn/ui |\n| Design Tokens | `.tokens.json`, `tokens.css`, Style Dictionary |\n| Figma | `.figmarc`, Code Connect files |\n| Deployment | `firebase.json` |\n| Documentation | `.storybook/` directory |\n\nRecommendations adapt to match your stack — no manual configuration needed.\n\n---\n\n## ⚙️ Configuration\n\nCreate `skills/design/settings.local.md` (gitignored) to set defaults:\n\n```yaml\nbrand_color: \"#6366f1\"\naccent_color: \"#f59e0b\"\nbrand_name: \"MyProduct\"\nbrand_mood: \"professional\"\n\ncss_framework: \"tailwind\"\ndefault_font: \"Inter\"\nicon_library: \"lucide\"\n\ninclude_dark_mode: true\nmin_contrast_ratio: 4.5\nspacing_base: 8\n\ndeploy_target: \"firebase\"\n```\n\nSettings marked `\"auto\"` or left empty defer to auto-detection. The Design Manager reads these at the start of every task.\n\n---\n\n## 📁 What's Inside\n\n```\nnaksha/\n├── .claude-plugin/plugin.json          # Plugin manifest (v5.0.0)\n├── skills/design/\n│   ├── SKILL.md                        # Design Manager orchestration\n│   ├── settings.local.md              # User-configurable preferences\n│   └── references/                     # 32 specialist role knowledge bases\n│       ├── product-designer.md         # End-to-end UX, feature scoping\n│       ├── ux-designer.md              # Flows, wireframes, IA\n│       ├── ui-designer.md              # Color, typography, layout, components\n│       ├── ux-researcher.md            # Heuristics, accessibility, edge cases\n│       ├── content-designer.md         # Microcopy, errors, tone of voice\n│       ├── design-system-lead.md       # 3-tier tokens, theming, dark mode, Figma styles\n│       ├── motion-designer.md          # Timing, easing, micro-interactions, FLIP\n│       ├── figma-workflow.md           # Figma MCP tools, design-to-code + creation\n│       ├── figma-creation.md           # Figma API patterns via Desktop Bridge\n│       ├── deployment.md              # Preview server, Firebase Hosting\n│       ├── social-media-designer.md    # Platform specs, safe zones, visual systems\n│       ├── social-media-strategist.md  # Campaign planning, content calendar, KPIs\n│       ├── social-media-copywriter.md  # Captions, hooks, hashtag strategy\n│       ├── growth-analytics-specialist.md # Metrics, dashboards, A/B testing\n│       ├── email-designer.md           # HTML email, responsive, dark mode, ESPs\n│       ├── email-copywriter.md         # Subject lines, sequences, deliverability\n│       ├── data-viz-designer.md        # Chart type selection, colorblind-safe palettes\n│       ├── dashboard-architect.md      # KPI layouts, filter systems, data tables\n│       ├── framework-specialist.md     # React/Vue/Svelte/Next.js/Astro patterns\n│       ├── template-gallery.md         # 10 production web templates\n│       ├── presentation-designer.md    # Slide systems, pitch decks, data storytelling\n│       ├── brand-strategist.md         # Positioning, visual identity, brand architecture\n│       ├── illustration-director.md    # Icon systems, SVG standards, style taxonomy\n│       ├── video-content-producer.md   # Scripts, storyboards, short-form pacing\n│       ├── conversational-designer.md  # Chatbot UI, VUI, dialog flows, persona systems\n│       ├── spatial-designer.md         # visionOS HIG, WebXR, depth layers, gaze/gesture\n│       └── compliance-designer.md      # GDPR/CCPA consent UX, HIPAA, PCI, ADA compliance\n├── commands/                           # 63 slash commands\n├── agents/                             # 7 specialist agents\n├── hooks/hooks.json                    # SessionStart + PreToolUse + Stop hooks\n├── scripts/\n│   ├── detect-design-context.sh        # Project stack detection\n│   └── run-evals.sh                    # Eval structure validator\n├── evals/\n│   ├── evals.json                      # 161 eval cases (prompt + assertion specs)\n│   └── fixtures/                       # 63 output fixtures for behavioral smoke tests\n├── assets/                             # Social preview + demo images\n├── CHANGELOG.md                       # Version history\n└── CONTRIBUTING.md                    # Contributor guide\n```\n\n<details>\n<summary><b>Design knowledge breakdown (15,000+ raw lines)</b></summary>\n\n| File | Lines | Covers |\n|------|-------|--------|\n| **figma-creation.md** | **693** | **Figma Desktop Bridge API, async patterns, auto-layout, component sets, paint/text styles, variables, wireframe patterns, annotations, screenshot validation** |\n| design-system-lead.md | 427 | 3-tier tokens, theming, dark mode, Figma paint/text style creation, component sets |\n| motion-designer.md | 360 | Timing, easing functions, transitions, micro-interactions, reduced motion |\n| **design-lint.md** | **335** | **6 lint rule categories, orphan colors, contrast, non-standard spacing, auto-layout quality, component hygiene, scored reports** |\n| **design-sprint.md** | **327** | **5-phase sprint: Understand, Diverge, Decide, Prototype, Validate — problem framing, ideation, decision matrix, test plans** |\n| **site-to-figma.md** | **310** | **Website capture via Playwright, style extraction, Figma recreation as auto-layout frames with Paint/Text Styles** |\n| **brand-kit.md** | **301** | **HSL shade generation, secondary color derivation, type scale, spacing scale, CSS/Tailwind/JSON/Figma outputs** |\n| **figma-responsive.md** | **298** | **Responsive variant generation, layout analysis, breakpoint adaptation, grid reflow, sidebar collapse** |\n| **design-handoff.md** | **278** | **Developer handoff docs, token maps, spacing specs, component APIs, CSS/Tailwind/TypeScript exports** |\n| SKILL.md | 300 | Design Manager orchestration, team assembly, workflow phases, output formats |\n| **design-critique.md** | **263** | **UX heuristic review, Nielsen's 10 heuristics, visual audit, interaction states, critique reporting** |\n| **component-docs.md** | **262** | **Auto-generated Storybook-style docs, prop tables, variant grids, usage guidelines, code examples** |\n| **figma-prototype.md** | **258** | **Prototype connections, interactive element detection, transition presets, flow specification** |\n| **figma-sync.md** | **252** | **Design-code drift detection, token comparison, typography/spacing sync, patch generation** |\n| **ab-variants.md** | **248** | **A/B test variant generation, layout/CTA/copy/color changes, testing recommendations** |\n| figma-workflow.md | 246 | Figma MCP tools, design-to-code, Figma-native creation workflow |\n| ui-designer.md | 243 | Color theory, type scale, grid, components, responsive patterns |\n| ux-designer.md | 239 | User flows, IA, wireframing, interaction design, usability |\n| **design-present.md** | **233** | **Interactive HTML presentations, keyboard nav, annotations, walkthrough/pitch/case-study types** |\n| content-designer.md | 229 | Microcopy, error formulas, empty states, tone, number formatting |\n| ux-audit.md | 219 | Figma file compliance auditing, brief parsing, structural/style/component checks |\n| ux-researcher.md | 207 | Nielsen's heuristics, WCAG AA checklist, mental models, edge cases |\n| deployment.md | 198 | Preview server, Firebase Hosting, image/CSS/font optimization |\n| figma-create.md | 150 | Create designs in Figma command — pages, wireframes, components, design systems |\n| figma-creator.md | 142 | Figma creation specialist agent — layout building, component creation, validation |\n| design.md (command) | 107 | Full design workflow — team assembly, creative direction, implementation, quality review |\n| figma.md (command) | 108 | Figma-to-code workflow — analysis, layout mapping, comparison, refinement |\n| design-review.md (cmd) | 89 | 5-point quality audit — accessibility, usability, visual, content, motion |\n| design-system.md (cmd) | 84 | Token generation, extraction, auditing — CSS variables, Tailwind, JSON |\n| product-designer.md | 140 | Feature scoping, user outcomes, business alignment, design patterns |\n| design-qa.md | 127 | Visual QA at 3 breakpoints, token compliance, interaction states |\n| accessibility-auditor.md | 105 | WCAG AA compliance, color contrast, semantic HTML, keyboard nav |\n\n</details>\n\n---\n\n## 🛠 Tech Stack Defaults\n\n| Category | Default | Why |\n|----------|---------|-----|\n| Styling | Tailwind CSS | Utility-first, rapid iteration |\n| Icons | Lucide | Clean, consistent, tree-shakeable |\n| Fonts | Inter | Optimized for UI, great readability |\n| Charts | Chart.js / SVG | Lightweight, no heavy deps |\n| Animations | CSS transitions | No JS libraries for simple motion |\n| Preview | Claude Preview MCP | Live results in your editor |\n| Deployment | Firebase Hosting | One-command deploy |\n\nAll defaults adapt when the plugin detects your project uses a different stack.\n\n---\n\n### Quality check\n\nRun all quality gates locally:\n\n```bash\nbash scripts/quality-check.sh\n```\n\nChecks: metadata consistency (`meta/stats.json` vs filesystem vs README badges), behavioral smoke evals (pre-captured command output fixtures), legacy branding guard.\n\n---\n\n## 📦 Installation\n\n```bash\ngit clone https://github.com/Adityaraj0421/naksha-studio.git\ncd naksha-studio && bash install.sh\n```\n\nRestart Claude Code to load the plugin. To update: `git pull` (no reinstall needed).\n\n---\n\n## Requirements\n\n- [Claude Code](https://claude.ai/claude-code) CLI\n- **Optional MCP servers** for Figma + Preview capabilities — see [MCP Setup Guide](MCP-SETUP.md)\n\n---\n\n<div align=\"center\">\n\n**Built with Claude Code**\n\n[Report Issues](https://github.com/Adityaraj0421/naksha-studio/issues) · [Changelog](CHANGELOG.md) · [MIT License](LICENSE)\n\n</div>\n",
  "bytes": 43080,
  "sha": "c68bb710243c2c07b5f6f8c7e66ba341df9cbc9febc69827f62980457843eac0",
  "repo_slug": "adityaraj0421/naksha-studio",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_adityaraj0421_naksha_studio_naksha_studi_3b327f7a/readme"
}