naksha

Plugin naksha from marketplace naksha in Adityaraj0421/naksha-studio. Commands read from the repo's manifest — 25 days ago.

Skills (1)

• design

  Assembles a virtual design team to produce production-quality UI, UX, visual, social media, email, and data output. A Design Manager staffs the right specialists (Product Designer, UX Designer, UI Designer, UX Researcher, Content Designer, Design System Lead, Motion Designer, Creative Director, Soci

Slash commands (70)

• /naksha:ab-variants

  Generate A/B test design variants from an existing Figma screen — alternate layouts, CTA placements, color treatments, and copy variations.

• /naksha:accessibility-audit

  Full WCAG AA accessibility audit on an HTML file — contrast ratios, keyboard navigation, semantic HTML, ARIA usage, touch targets, and label associations.

• /naksha:brand-kit

  Generate a complete brand kit from a logo and 1-2 brand colors — full palette, type scale, icon style, component tokens, and Figma styles.

• /naksha:brand-strategy

  Define or audit a brand — positioning, visual identity system, voice and tone, and brand architecture.

• /naksha:chart-design

  Design a chart or data visualization — selects the right chart type, applies accessible color palettes, adds annotations, and outputs production-ready HTML/CSS/JS

• /naksha:competitive-audit

  Capture a competitor website with Playwright and extract its color system, typography, layout patterns, and 'steal this' recommendations.

• /naksha:component-docs

  Auto-generate component documentation from Figma — props, variants, usage guidelines, spacing specs, and code snippets in Storybook-style format.

• /naksha:dashboard-layout

  Design and build a complete dashboard layout — sidebar navigation, KPI cards, chart areas, data tables, filter bar, and responsive behavior. Outputs production-ready HTML/CSS.

• /naksha:data-viz-audit

  Audit a data visualization for chart type selection, accessible color palette, annotations, and anti-patterns. Optionally audits dashboard layout fit when context is provided. Outputs a scored checklist and corrected code.

• /naksha:design-ar-overlay

  Design an AR overlay interface — anchor strategy, world tracking UI, scan states, confirmation overlays, and occlusion handling.

• /naksha:design-chatbot

  Design a complete chatbot or conversational assistant UI — dialog flows, message bubbles, quick replies, typing indicators, error states, and accessibility.

• /naksha:design-compare

  Capture two websites with Playwright and produce a structured side-by-side design comparison — layout, color, typography, navigation, and 'steal this' recommendations.

• /naksha:design-compliance

  Audit or generate regulation-specific UI patterns for HIPAA, PCI DSS, or ADA compliance. Use --regulation <hipaa|pci|ada> to target a specific standard.

• /naksha:design-critique

  UX heuristic review of Figma screens — evaluates against Nielsen's 10 heuristics, visual design quality, spacing, color, typography hierarchy, and interaction states.

• /naksha:design-detect

  Free, deterministic design lint: runs naksha's no-LLM rule engine on files (or your git changes) and explains every finding by role with concrete fixes.

• /naksha:design-framework

  Convert HTML/CSS design output to framework-specific component code. Supports web: React+Tailwind, Vue 3+UnoCSS, Svelte 5, Next.js App Router, Astro. Native mobile: Flutter, React Native, SwiftUI, Jetpack Compose.

• /naksha:design-gdpr

  Design GDPR/CCPA-compliant consent flows — cookie banners, consent hierarchy, privacy controls, and data deletion request UI.

• /naksha:design-handoff

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

• /naksha:design-md

  Work with DESIGN.md files, the open YAML-tokens-plus-prose design system format: lint (structure, references, WCAG AA contrast), import tokens (DTCG JSON or CSS variables), export to DTCG, CSS, or Tailwind, and manage the project's MASTER.md and per-page overrides.

• /naksha:design-present

  Generate an interactive HTML presentation from Figma screens — annotated walkthrough with transitions, speaker notes, and keyboard navigation.

• /naksha:design-qa

  Visual QA on an HTML/CSS implementation — checks responsive behavior at mobile/tablet/desktop, design token compliance, interactive states (hover, focus, active), and motion quality.

• /naksha:design-reel

  Record naksha's design team working — turn a /design run into a share-able vertical + landscape video reel (the 30-role team redesigning a screen, live).

• /naksha:design-review

  Review an existing design for quality — accessibility, usability, visual consistency, content, and motion. Accepts HTML files, Figma URLs, preview servers, or screenshots for visual AI critique. Every finding is written to naksha-review/findings.json, re-checked by a fresh verifier subagent, and sch

• /naksha:design-score

  Quantitative 0–100 design quality score across Accessibility, Usability, Visual Quality, and Token Compliance.

• /naksha:design-spatial

  Design a spatial computing interface for visionOS, Vision Pro, or WebXR — depth hierarchy, window type, ornament placement, spatial typography, and interaction model.

• /naksha:design-sprint

  Guided design sprint methodology — problem framing, ideation, decision matrix, rapid prototyping, and testing plan in a structured 5-phase workflow.

• /naksha:design-system

  Generate design tokens, theme configuration, or extract a design system from existing code, Figma files, or a DESIGN.md — and persist it as .naksha/design-system/MASTER.md.

• /naksha:design-template

  Generate a production-ready web page from a curated template category. Pick a category (landing-page, dashboard, pricing, auth, blog, ecommerce, portfolio, docs, saas, or onboarding) and get a fully-built, customized HTML/CSS template — brand colors, copy, and responsive layout included.

• /naksha:design-tutorial

  Interactive guided tour of Naksha — learn commands through real exercises, discover workflows, and get oriented in under 10 minutes

• /naksha:design-variants

  Explore several genuinely different design directions for the same task, side by side — then tell naksha which you like so it learns your taste. Uses your taste profile to bias the options.

• /naksha:design-voice-ui

  Design a voice interface — wake word flows, confirmation patterns, error recovery, screen companion layout (if hybrid), audio feedback guidelines.

• /naksha:design

  Design anything — pages, components, apps, dashboards, presentations. Assembles the right design specialists for the task.

• /naksha:email-audit

  Full-spectrum email audit — technical rendering issues (Phase 1, Email Designer) and copy/strategy critique (Phase 2, Email Copywriter). Accepts pasted HTML or a description of an existing email.

• /naksha:email-campaign

  Plan and write a complete multi-email campaign sequence — welcome flows, onboarding sequences, promotional campaigns, re-engagement, and launch sequences. Outputs a campaign brief, sequence map, and all email templates.

• /naksha:email-template

  Generate a production-ready HTML email template — inline styles, table layout, bulletproof buttons, responsive, dark mode, and deliverability-optimized. Works across Gmail, Outlook, Apple Mail, Yahoo Mail.

• /naksha:figma-component-library

  Generate a complete component library in Figma from a design system config — atoms, molecules, and organisms with all variants, auto layout, and component properties

• /naksha:figma-create

  Create designs directly in Figma — pages, wireframes, components, design systems, hi-fi screens.

• /naksha:figma-prototype

  Create interactive prototype connections between Figma frames — link screens with transitions, define hotspots, and set up user flows.

• /naksha:figma-responsive

  Generate mobile and tablet variants from a desktop Figma wireframe — adapts layout, reflowing content for smaller breakpoints.

• /naksha:figma-sync

  Detect drift between Figma designs and code implementation — compare tokens, spacing, colors, typography, and component structure.

• /naksha:figma

  Convert a Figma design to production code. Provide a Figma URL or select a node in Figma desktop.

• /naksha:gen-audio

  Generate an AI audio brief — voiceover (ElevenLabs, Murf) or music/jingle (Suno), with tool selection, voice/music brief template, timing cues for video sync, and synthetic voice compliance note.

• /naksha:gen-image

  Generate a brand-aligned AI image — tool selection, full prompt (subject, style, lighting, camera, mood, negatives), variation prompts, and seed strategy. Works across Midjourney, DALL-E, Ideogram, Firefly, and Stable Diffusion.

• /naksha:gen-moodboard

  Generate 3 AI moodboard directions for a concept or campaign — brand personality extraction, visual style definition, and 4–6 ready-to-paste image prompts per direction with rationale.

• /naksha:gen-video

  Generate video output in one of three modes: Remotion (programmatic React-based video), Gen-AI (shot prompt pack for Runway/Kling/Sora/Pika/Luma), or Remotion+Gen-AI (programmatic scaffold with AI footage embedded).

• /naksha:illustration-system

  Design an illustration style guide, icon system, or SVG asset set for a product or brand.

• /naksha:lint-design

  Scan a Figma file for design quality issues — orphan colors, spacing violations, non-standard type sizes, missing auto-layout, and detached styles. Returns a prioritized lint report with severity levels and fix suggestions.

• /naksha:motion-design

  Design micro-interactions, transitions, and animation systems for UI components or full pages.

• /naksha:naksha-browse

  Browse any URL with browser vision — extract design patterns for research or inspect your own UI, saved to project memory.

• /naksha:naksha-dashboard

  Naksha Live — an opt-in local dashboard that shows your design team at work: a live org chart of the 30 roles, an activity stream, project memory, review findings and cost. Zero dependencies, 127.0.0.1 only, token-protected.

• /naksha:naksha-doctor

  Run all naksha quality checks and report the plugin's health status, or diagnose misrouted roles from local session transcripts with --transcripts.

• /naksha:naksha-help

  Quick-reference for any Naksha command — browse by category or look up a specific command

• /naksha:naksha-init

  Initialize Naksha project memory — sets up brand context, framework, and token format that persists across sessions.

• /naksha:naksha-remember

  Record a design constraint, component pattern, or decision to persistent project memory — naksha commands will use it as context from this point forward.

• /naksha:naksha-stats

  Show what naksha commands cost: token usage and estimated $ per command from local Claude Code transcripts, with month-to-date budget warnings. Can also set budgets.

• /naksha:naksha-status

  Show current Naksha project memory — brand settings, framework, token format, and recent design decisions.

• /naksha:naksha-taste

  Record which design directions you approved or rejected — naksha learns your taste and applies it to future /design and /design-variants runs. With no arguments, shows your current taste profile, including what naksha has learned from your Helpful / Needs-work votes.

• /naksha:naksha-vote

  Vote Helpful or Needs work on a design, variant, review finding or command run — votes stay local in .naksha/votes.jsonl and teach naksha your taste and where its judges are too lenient. Also lists, summarises, consolidates, calibrates and exports votes.

• /naksha:pdf-report

  Generate a multi-page print-ready report or document layout with page geometry, master template, typography system, and CSS @media print + @page output.

• /naksha:pipeline

  Run multi-command design pipelines. Subcommands: run <name> [input], list, show <name>, new.

• /naksha:presentation-design

  Design a complete presentation deck — pitch deck, product demo, or internal presentation — with slide system, layouts, and visual hierarchy.

• /naksha:print-audit

  Audit a print layout for bleed, safe zone, color mode, font embedding, and page break rules. Optionally audits brand consistency when brand context is provided.

• /naksha:print-layout

  Design a single print artifact (business card, flyer, certificate, brochure, invoice) with correct bleed, safe zone, CMYK color system, and print-ready HTML/CSS output.

• /naksha:prompt-refine

  Diagnose and optimize any AI gen prompt — annotated critique of weak tokens and missing modifiers, optimized prompt with explanations, and a cross-tool variant adapted for a second tool.

• /naksha:site-to-figma

  Capture a live website and recreate its layout in Figma as editable frames with auto-layout, styles, and proper layer structure.

• /naksha:social-analytics

  Design a social media analytics dashboard, generate a performance report, or set up an A/B test framework with KPI tracking and funnel visualization.

• /naksha:social-campaign

  Plan a social media campaign — strategy, content calendar, caption drafts, and KPI targets for multi-platform social campaigns.

• /naksha:social-content

  Design social media visual content — posts, stories, reels, carousels — mobile-first, platform-exact dimensions. Exports PNG via Playwright. Supports AI-generated image backgrounds.

• /naksha:ux-audit

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

• /naksha:video-script

  Write a video script, storyboard, or content series plan for product demos, explainers, social video, or ads.

Subagents (7)

• accessibility-auditor

  Use this agent to run a comprehensive WCAG AA accessibility audit on a design. Trigger when reviewing designs for accessibility, checking contrast ratios, testing keyboard navigation, or validating semantic HTML. Also trigger proactively after building any user-facing UI. <example> Context: User jus

• design-critic

  Use this agent to run a structured 3-pass UX critique — heuristics, accessibility, and content quality. Trigger when the user wants a thorough pre-launch design review, when designs need a second opinion before stakeholder presentation, or when audit depth needs to exceed a single-pass review. <exam

• design-critique

  Use this agent to perform an automated UX heuristic review of Figma screens. Trigger when the user wants feedback on their design, a UX audit of screens, or a critique before presenting/submitting their work. <example> Context: User wants feedback on their Figma wireframes user: "Can you review my w

• design-lint

  Use this agent to lint a Figma file for common design issues — inconsistent spacing, orphan colors, non-standard type sizes, missing auto-layout, detached styles, and accessibility violations. Returns a prioritized list of issues with auto-fix suggestions. <example> Context: User is building a desig

• design-qa

  Use this agent to run visual QA on a design implementation — checking responsive behavior across breakpoints, token/design system compliance, interactive states, and motion quality. Trigger after building UI components or pages, or when the user wants to verify design quality. <example> Context: Ass

• design-token-extractor

  Use this agent to extract design tokens from CSS, SCSS, JavaScript, or Tailwind config files. Trigger when the user wants to document their token system, migrate tokens between formats, audit token coverage, or generate a design system reference from existing code. <example> Context: User wants to d

• figma-creator

  Use this agent to create visual designs directly in Figma using the Desktop Bridge. Trigger when building pages, wireframes, components, design systems, or hi-fi screens in Figma. Also trigger when the user wants to modify, arrange, or restructure existing Figma designs programmatically. <example> C

Hooks (10)

• SessionStart

  bash "${CLAUDE_PLUGIN_ROOT}/scripts/detect-design-context.sh"

• PreCompact

  bash "${CLAUDE_PLUGIN_ROOT}/scripts/precompact-brief.sh"

• Stop

  node "${CLAUDE_PLUGIN_ROOT}/scripts/memory-apply-hook.js"

• Stop

  node "${CLAUDE_PLUGIN_ROOT}/dashboard/hooks/emit.js"

• PreToolUse

  node "${CLAUDE_PLUGIN_ROOT}/dashboard/hooks/emit.js"

• PostToolUse

  bash "${CLAUDE_PLUGIN_ROOT}/scripts/design-lint-hook.sh"

• UserPromptSubmit

  node "${CLAUDE_PLUGIN_ROOT}/dashboard/hooks/emit.js"

• SubagentStart

  node "${CLAUDE_PLUGIN_ROOT}/dashboard/hooks/emit.js"

• SubagentStop

  node "${CLAUDE_PLUGIN_ROOT}/dashboard/hooks/emit.js"

• SessionEnd

  node "${CLAUDE_PLUGIN_ROOT}/dashboard/hooks/emit.js"

Similar plugins