diff --git a/.obsidian/plugins/hoarder-sync/data.json b/.obsidian/plugins/hoarder-sync/data.json index 200c435..cb3c385 100644 --- a/.obsidian/plugins/hoarder-sync/data.json +++ b/.obsidian/plugins/hoarder-sync/data.json @@ -4,7 +4,7 @@ "syncFolder": "Hoarder", "attachmentsFolder": "Hoarder/attachments", "syncIntervalMinutes": 60, - "lastSyncTimestamp": 1777292007197, + "lastSyncTimestamp": 1777293987137, "updateExistingFiles": false, "excludeArchived": true, "onlyFavorites": false, diff --git a/Hoarder/2026-04-27-GitHub-Adityaraj0421-naksha-studio.md b/Hoarder/2026-04-27-GitHub-Adityaraj0421-naksha-studio.md new file mode 100644 index 0000000..8f3b41e --- /dev/null +++ b/Hoarder/2026-04-27-GitHub-Adityaraj0421-naksha-studio.md @@ -0,0 +1,43 @@ +--- +bookmark_id: "l2vb43y132hygfbnines1nkm" +url: | + https://github.com/Adityaraj0421/naksha-studio +title: | + GitHub - Adityaraj0421/naksha-studio: A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — 26 roles, 60 commands, 13,800+ lines of expert design knowledge. Your agency’s design brain, inside your terminal. +date: 2026-04-27T12:33:28.000Z +modified: 2026-04-27T12:33:50.000Z +tags: + - Design-Tools + - Automation + - Software-Development + - User-Interface-Design + - UX-Design +note: +original_note: +summary: +banner: "[[Hoarder/attachments/73ad47ef-31b6-47c3-ae01-942982c09fc5-GitHub-Adityaraj0421-naksha.jpg]]" +screenshot: "[[Hoarder/attachments/479bd72c-3455-4e3c-93f9-b2669d4bb7ba-GitHub-Adityaraj0421-naksha.jpg]]" +additional: + - "[[Hoarder/attachments/16d33f76-7e63-4b11-b613-dc15c654e299-GitHub-Adityaraj0421-naksha.jpg]]" + +--- + +# GitHub - Adityaraj0421/naksha-studio: A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — 26 roles, 60 commands, 13,800+ lines of expert design knowledge. Your agency’s design brain, inside your terminal. + +![GitHub - Adityaraj0421/naksha-studio: A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — 26 roles, 60 commands, 13,800+ lines of expert design knowledge. Your agency’s design brain, inside your terminal. - Banner Image](Hoarder/attachments/73ad47ef-31b6-47c3-ae01-942982c09fc5-GitHub-Adityaraj0421-naksha.jpg) + +![GitHub - Adityaraj0421/naksha-studio: A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — 26 roles, 60 commands, 13,800+ lines of expert design knowledge. Your agency’s design brain, inside your terminal. - Screenshot](Hoarder/attachments/479bd72c-3455-4e3c-93f9-b2669d4bb7ba-GitHub-Adityaraj0421-naksha.jpg) + +![GitHub - Adityaraj0421/naksha-studio: A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — 26 roles, 60 commands, 13,800+ lines of expert design knowledge. Your agency’s design brain, inside your terminal. - linkHtmlContent](Hoarder/attachments/16d33f76-7e63-4b11-b613-dc15c654e299-GitHub-Adityaraj0421-naksha.jpg) + +## Description + +A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — 26 roles, 60 commands, 13,800+ lines of expert design knowledge. Your agency's design brain, inside your termi… + +## Notes + + + +[Visit Link](https://github.com/Adityaraj0421/naksha-studio) + +[View in Hoarder](https://links.ai-impress.com/dashboard/preview/l2vb43y132hygfbnines1nkm) \ No newline at end of file diff --git a/Hoarder/attachments/16d33f76-7e63-4b11-b613-dc15c654e299-GitHub-Adityaraj0421-naksha.jpg b/Hoarder/attachments/16d33f76-7e63-4b11-b613-dc15c654e299-GitHub-Adityaraj0421-naksha.jpg new file mode 100644 index 0000000..5ec9d79 --- /dev/null +++ b/Hoarder/attachments/16d33f76-7e63-4b11-b613-dc15c654e299-GitHub-Adityaraj0421-naksha.jpg @@ -0,0 +1,1143 @@ +
+ +

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.

+ +

License: MIT +Claude Code +Cursor +Windsurf +Gemini CLI +Copilot +Roles +Commands +Design Knowledge

+

Quick Start · Commands · The Team · How It Works · Changelog

+
+
+

🚀 Quick Start

+

Claude Code (full plugin — 60 commands, agents, hooks)

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

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.

+
+

👥 The Team

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

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

+
+
+

🎯 Commands

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandWhat 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-systemGenerate, 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-handoffDeveloper handoff docs (tokens, specs, APIs)
/figma-responsiveGenerate mobile/tablet variants from desktop
/figma-syncDetect design–code drift
/design-presentInteractive HTML presentation from Figma
/brand-kit <color>Complete brand kit from 1–2 colors
/component-docsStorybook-style docs from Figma components
/figma-prototypePrototype connections between frames
/site-to-figma <URL>Capture website → editable Figma design
/ab-variantsA/B test design variants
/design-sprintGuided 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-auditFull-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-auditAudit 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-auditWCAG 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 |

+
+📖 Command details & examples + +

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

+
+
+

🔗 Workflows

+

Commands chain together. Each command suggests relevant next steps:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WorkflowPipeline
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:

+
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:

+
node scripts/design-lint.js src/**/*.html src/**/*.css
+

Configure via .design-lint.json in your repo root (copy from .design-lint.json.example):

+
{ "failThreshold": 80, "ignorePatterns": ["dist/**"] }
+

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

+
+

⚙️ 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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AgentWhat It DoesRuns In
accessibility-auditorComprehensive WCAG AA compliance audit with specific code fixesBackground
design-qaVisual QA at 3 breakpoints, token compliance scoring, interaction state checkBackground
figma-creatorCreates pages, frames, components, and styles directly in Figma via Desktop BridgeForeground
design-critiqueAutomated UX heuristic review — Nielsen's 10 heuristics, visual audit, interaction states + 4-dimension scoringForeground
design-lintScans Figma files for orphan colors, non-standard spacing, low contrast, missing auto-layout (haiku model)Foreground
design-token-extractorExtracts design tokens from CSS/Figma files — color, typography, spacing, shadows (haiku model)Background
design-scoreQuantitative design scorer — derives Accessibility, Usability, Visual Quality, Token Compliance dimensionsForeground
+

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:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DetectsHow
CSS FrameworkTailwind, PostCSS, Bootstrap
JS FrameworkReact, Vue, Svelte, Next.js, Nuxt, Angular, Astro, Remix, SolidJS
TypeScripttsconfig.json
Build ToolVite, Webpack, Turborepo
CSS-in-JSstyled-components, Emotion, vanilla-extract
Component LibraryRadix UI, Chakra, MUI, Mantine, shadcn/ui
Design Tokens.tokens.json, tokens.css, Style Dictionary
Figma.figmarc, Code Connect files
Deploymentfirebase.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:

+
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 (v4.8.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/                           # 60 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/                       # 60 output fixtures for behavioral smoke tests
+├── assets/                             # Social preview + demo images
+├── CHANGELOG.md                       # Version history
+└── CONTRIBUTING.md                    # Contributor guide
+
+
+Design knowledge breakdown (13,800+ raw lines) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FileLinesCovers
figma-creation.md693Figma Desktop Bridge API, async patterns, auto-layout, component sets, paint/text styles, variables, wireframe patterns, annotations, screenshot validation
design-system-lead.md4273-tier tokens, theming, dark mode, Figma paint/text style creation, component sets
motion-designer.md360Timing, easing functions, transitions, micro-interactions, reduced motion
design-lint.md3356 lint rule categories, orphan colors, contrast, non-standard spacing, auto-layout quality, component hygiene, scored reports
design-sprint.md3275-phase sprint: Understand, Diverge, Decide, Prototype, Validate — problem framing, ideation, decision matrix, test plans
site-to-figma.md310Website capture via Playwright, style extraction, Figma recreation as auto-layout frames with Paint/Text Styles
brand-kit.md301HSL shade generation, secondary color derivation, type scale, spacing scale, CSS/Tailwind/JSON/Figma outputs
figma-responsive.md298Responsive variant generation, layout analysis, breakpoint adaptation, grid reflow, sidebar collapse
design-handoff.md278Developer handoff docs, token maps, spacing specs, component APIs, CSS/Tailwind/TypeScript exports
SKILL.md300Design Manager orchestration, team assembly, workflow phases, output formats
design-critique.md263UX heuristic review, Nielsen's 10 heuristics, visual audit, interaction states, critique reporting
component-docs.md262Auto-generated Storybook-style docs, prop tables, variant grids, usage guidelines, code examples
figma-prototype.md258Prototype connections, interactive element detection, transition presets, flow specification
figma-sync.md252Design-code drift detection, token comparison, typography/spacing sync, patch generation
ab-variants.md248A/B test variant generation, layout/CTA/copy/color changes, testing recommendations
figma-workflow.md246Figma MCP tools, design-to-code, Figma-native creation workflow
ui-designer.md243Color theory, type scale, grid, components, responsive patterns
ux-designer.md239User flows, IA, wireframing, interaction design, usability
design-present.md233Interactive HTML presentations, keyboard nav, annotations, walkthrough/pitch/case-study types
content-designer.md229Microcopy, error formulas, empty states, tone, number formatting
ux-audit.md219Figma file compliance auditing, brief parsing, structural/style/component checks
ux-researcher.md207Nielsen's heuristics, WCAG AA checklist, mental models, edge cases
deployment.md198Preview server, Firebase Hosting, image/CSS/font optimization
figma-create.md150Create designs in Figma command — pages, wireframes, components, design systems
figma-creator.md142Figma creation specialist agent — layout building, component creation, validation
design.md (command)107Full design workflow — team assembly, creative direction, implementation, quality review
figma.md (command)108Figma-to-code workflow — analysis, layout mapping, comparison, refinement
design-review.md (cmd)895-point quality audit — accessibility, usability, visual, content, motion
design-system.md (cmd)84Token generation, extraction, auditing — CSS variables, Tailwind, JSON
product-designer.md140Feature scoping, user outcomes, business alignment, design patterns
design-qa.md127Visual QA at 3 breakpoints, token compliance, interaction states
accessibility-auditor.md105WCAG AA compliance, color contrast, semantic HTML, keyboard nav
+
+
+

🛠 Tech Stack Defaults

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryDefaultWhy
StylingTailwind CSSUtility-first, rapid iteration
IconsLucideClean, consistent, tree-shakeable
FontsInterOptimized for UI, great readability
ChartsChart.js / SVGLightweight, no heavy deps
AnimationsCSS transitionsNo JS libraries for simple motion
PreviewClaude Preview MCPLive results in your editor
DeploymentFirebase HostingOne-command deploy
+

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

+
+

Quality check

+

Run all quality gates locally:

+
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

+
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

+ +
+ +
\ No newline at end of file diff --git a/Hoarder/attachments/479bd72c-3455-4e3c-93f9-b2669d4bb7ba-GitHub-Adityaraj0421-naksha.jpg b/Hoarder/attachments/479bd72c-3455-4e3c-93f9-b2669d4bb7ba-GitHub-Adityaraj0421-naksha.jpg new file mode 100644 index 0000000..245b1f7 Binary files /dev/null and b/Hoarder/attachments/479bd72c-3455-4e3c-93f9-b2669d4bb7ba-GitHub-Adityaraj0421-naksha.jpg differ diff --git a/Hoarder/attachments/73ad47ef-31b6-47c3-ae01-942982c09fc5-GitHub-Adityaraj0421-naksha.jpg b/Hoarder/attachments/73ad47ef-31b6-47c3-ae01-942982c09fc5-GitHub-Adityaraj0421-naksha.jpg new file mode 100644 index 0000000..5997191 Binary files /dev/null and b/Hoarder/attachments/73ad47ef-31b6-47c3-ae01-942982c09fc5-GitHub-Adityaraj0421-naksha.jpg differ