Topic: design
29 skills in this topic.
-
hunt
Invoke when debugging any error, crash, unexpected behavior, or failing test. Finds root cause before applying any fix. Not for code review or new features.
tw93/Waza 2,767
-
health
Invoke when Claude ignores instructions, behaves inconsistently, hooks malfunction, or MCP servers need auditing. Audits the full six-layer config stack and flags issues by severity. Not for debugging code or reviewing PRs.
tw93/Waza 2,767
-
design
Invoke when building any UI, component, page, or visual interface. Produces distinctive design with a committed aesthetic, not generic defaults. Not for backend logic or data pipelines.
tw93/Waza 2,767
-
check
Invoke after any implementation task completes or before merging. Reviews the diff, auto-fixes safe issues, runs specialist security and architecture reviewers on large diffs. Not for exploring ideas or debugging.
tw93/Waza 2,767
-
think
Invoke before writing any code for a new feature, design, or architecture decision. Turns rough ideas into approved plans with validated structure. Not for bug fixes or small edits.
tw93/Waza 2,767
-
read
Invoke when given any URL, web page link, or PDF to read. Fetches the content as clean Markdown via proxy cascade and saves to Downloads. Not for local files already in the repo.
tw93/Waza 2,767
-
learn
Invoke when diving deep into an unfamiliar domain, preparing a research article, or turning collected sources into publishable output. Runs a six-phase workflow: collect, digest, outline, fill in, refine, publish. Not for quick lookups or single-file reads.
tw93/Waza 2,767
-
write
Invoke only when explicitly asked to write, edit, or polish prose in Chinese or English. Strips AI writing patterns and rewrites to sound natural. Not for code comments, commit messages, or inline docs.
tw93/Waza 2,767
-
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, Social Media Designer, Social Media Strategist, Social Media Copywriter, Growth/Analytics Specialist, Email Designer, Email Copywriter, Data Viz Designer, Dashboard Architect, Presentation Designer, Brand Strategist, Illustration Director, Video/Content Producer, AI Image Director, AI Video Director, AI Audio & Voice Producer, AI Prompt Engineer, Print Designer) based on the task scope. Trigger when the user asks to design, build, style, or prototype web pages, apps, components, dashboards, presentations, design tokens, or brand assets. Also trigger for Figma-to-code workflows, design system creation, responsive layouts, dark mode theming, accessibility audits, UX flows, wireframes, content strategy, animations, deployment, social media content, campaigns, Instagram, TikTok, LinkedIn, Twitter, YouTube, carousels, stories, reels, content calendars, hashtags, captions, social analytics, email templates, email campaigns, newsletters, email sequences, welcome emails, drip campaigns, email copywriting, HTML email, deliverability, charts, graphs, data visualization, bar charts, line charts, scatter plots, KPI dashboards, analytics dashboards, data tables, presentations, pitch decks, slide decks, keynote, powerpoint, google slides, investor deck, brand positioning, brand strategy, brand identity, brand audit, brand architecture, brand voice, illustrations, icon systems, icons, SVG assets, spot illustrations, style guide, video scripts, storyboards, video content, product demo video, explainer video, short-form video, reels script, youtube script, tiktok script, motion design, micro-interactions, page transitions, animation, CSS animations, Lottie, generate image, ai image, midjourney, dall-e, dall·e, ideogram, firefly, stable diffusion, gen video, ai video, runway, kling, sora, pika, luma dream machine, voiceover, voice gen, ai audio, elevenlabs, suno, murf, ai prompt, prompt refine, moodboard, gen-moodboard, prompt-refine, ai-generated image, ai-generated video, image generation, video generation, print layout, business card, pdf report, print design, print audit, preflight check, bleed, certificate design, brochure layout, print artifact, annual report print, invoice design, print flyer, chatbot, conversational UI, voice interface, chat widget, virtual assistant, dialog flow, visionOS, Vision Pro, spatial UI, depth hierarchy, WebXR, mixed reality, augmented reality, immersive, AR design, AR overlay, world tracking, spatial computing, GDPR, CCPA, compliance design, cookie consent, consent banner, HIPAA, PCI DSS, data deletion, data portability, accessibility compliance, ADA compliance, naksha-init, naksha-status, project memory, pipeline, run pipeline, competitor analysis, compare designs, competitive audit, design compare, extract tokens, token extraction, find my design tokens, map tokens, token audit, token coverage, UX critique, 3-pass review, multi-pass audit, thorough design review, design second opinion. Covers both quick visual tweaks and full product design — the Manager scales the team to match task complexity.
<example> user: "Build me a landing page for a SaaS product" assistant: Activates UI Designer, Content Designer, Motion Designer, Design System Lead </example>
<example> user: "Convert this Figma design to code" assistant: Routes to /figma command with Figma Workflow reference </example>
<example> user: "Create wireframes in Figma for a task manager" assistant: Routes to /figma-create with UX Designer + Figma Creator </example>
<example> user: "Create Instagram posts for our product launch" assistant: Activates Social Media Designer, Social Media Copywriter, UI Designer </example>
<example> user: "Plan a social media campaign for Q2" assistant: Routes to /social-campaign with Social Media Strategist + Copywriter + Analytics </example>
<example> user: "Create a welcome email sequence for new signups" assistant: Routes to /email-campaign with Email Designer + Email Copywriter </example>
<example> user: "Build an HTML email template for our product launch" assistant: Routes to /email-template with Email Designer + Email Copywriter </example>
<example> user: "Build a chart showing monthly revenue trends" assistant: Routes to /chart-design with Data Viz Designer </example>
<example> user: "Design an analytics dashboard for a SaaS product" assistant: Routes to /dashboard-layout with Dashboard Architect + Data Viz Designer + UI Designer </example>
<example> user: "How do I use this plugin?" or "What can you do?" or "Tutorial" or "Getting started" assistant: Routes to /design-tutorial — interactive guided tour with track selection </example>
<example> user: "Build a complete component library in Figma for our design system" assistant: Routes to /figma-component-library with Figma Creator + Design System Lead + UI Designer </example>
<example> user: "Design a pitch deck for our seed round" assistant: Activates Presentation Designer, routes to /presentation-design with investor deck structure </example>
<example> user: "Define our brand positioning and visual identity" assistant: Activates Brand Strategist, routes to /brand-strategy with positioning framework </example>
<example> user: "Create an icon system for our product" assistant: Activates Illustration Director, routes to /illustration-system with icon grid and style rules </example>
<example> user: "Write a 60-second product demo video script" assistant: Activates Video/Content Producer, routes to /video-script with hook-problem-solution-CTA structure </example>
<example> user: "Add micro-interactions and page transitions to our app" assistant: Activates Motion Designer, routes to /motion-design with duration/easing system </example>
<example> user: "Generate an on-brand image for our product launch campaign" assistant: Routes to /gen-image with AI Image Director + AI Prompt Engineer </example>
<example> user: "Create a moodboard for our new campaign direction" assistant: Routes to /gen-moodboard with AI Image Director + Brand Strategist </example>
<example> user: "Generate a 15-second product video for Instagram Reels" assistant: Routes to /gen-video with AI Video Director + AI Prompt Engineer </example>
<example> user: "Write a voiceover for our product demo video" assistant: Routes to /gen-audio with AI Audio & Voice Producer </example>
<example> user: "This Midjourney prompt isn't working, can you fix it?" assistant: Routes to /prompt-refine with AI Prompt Engineer </example>
<example> user: "Design a business card for our product" assistant: Routes to /print-layout with Print Designer — sets up bleed, safe zone, CMYK colors </example>
<example> user: "Generate a 12-page annual report PDF for our SaaS product" assistant: Routes to /pdf-report with Print Designer — page geometry, master template, typography system </example>
<example> user: "Lint my Figma file for design issues" assistant: Routes to /lint-design — design-lint agent scans for orphan colors, spacing violations, missing auto-layout, detached styles </example>
<example> user: "Critique these screens before I present them" assistant: Routes to /design-critique — design-critique agent runs Nielsen's 10 heuristics + visual audit against the current Figma file </example>
<example> user: "Score my design" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example>
<example> user: "Give me a design score for this page" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example>
<example> user: "Rate this design" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example>
<example> user: "How good is this design?" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example>
<example> user: "Give me a score" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example>
<example> user: "What's the design quality score?" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example>
<example> user: "Quantify this design" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example>
<example> user: "Run QA on this page before we ship" assistant: Routes to /design-qa <file> — design-qa agent checks responsive breakpoints, token compliance, interactive states, motion quality </example>
<example> user: "Is this form accessible?" assistant: Routes to /accessibility-audit <file> — accessibility-auditor agent runs a full WCAG AA audit (contrast, keyboard nav, semantic HTML, ARIA) </example>
<example> user: "Set up my project with brand colors and framework" assistant: Routes to /naksha-init — interactive wizard writes .naksha/project.json with brand, framework, and token format </example>
<example> user: "What's the current project context?" assistant: Routes to /naksha-status — displays .naksha/ project memory, brand tokens, and recent decisions </example>
<example> user: "Run the launch-prep pipeline" assistant: Routes to /pipeline run launch-prep — executes design → accessibility-audit → design-review → design-handoff in sequence </example>
<example> user: "Compare our landing page to Stripe's" assistant: Routes to /design-compare — captures both URLs via Playwright, side-by-side layout and UX analysis </example>
<example> user: "Analyze Figma's website for design patterns I can steal" assistant: Routes to /competitive-audit — captures site, extracts color palette, type system, UX patterns with rated recommendations </example>
<example> user: "Design a customer support chatbot UI" assistant: Routes to /design-chatbot — Conversational Designer generates dialog flow, bubble UI spec, quick replies, error states </example>
<example> user: "Design a voice interface for our smart home app" assistant: Routes to /design-voice-ui — Conversational Designer generates wake word flow, confirmation patterns, audio feedback spec </example>
<example> user: "Design a visionOS productivity app" assistant: Routes to /design-spatial — Spatial Designer generates window type selection, depth hierarchy, ornament spec, spatial typography </example>
<example> user: "Design an AR overlay for assembly instructions" assistant: Routes to /design-ar-overlay — Spatial Designer generates anchor strategy, tracking states, instruction cards, occlusion handling </example>
<example> user: "Design our cookie consent flow for EU users" assistant: Routes to /design-gdpr — Compliance Designer generates IAB TCF cookie banners, privacy control center, data deletion flow </example>
<example> user: "Audit our payment form for PCI compliance" assistant: Routes to /design-compliance --regulation pci — Compliance Designer audits card field isolation, CVV handling, error message standards </example>
Adityaraj0421/naksha-studio 262
-
agentation-self-driving
Autonomous design critique mode using the Agentation annotation toolbar. Use when the user asks to "critique this page," "add design annotations," "review the UI," "self-driving mode," "auto-annotate," or wants an AI agent to autonomously add design feedback annotations to a web page via the browser. Requires the Agentation toolbar to be installed on the target page and agent-browser skill to be available.
benjitaylor/agentation 3,273
-
agentation
Add Agentation visual feedback toolbar to a Next.js project
benjitaylor/agentation 3,273
-
write-tbp
Writing technical blog posts about tldraw features and implementation details. Use when creating blog content about how tldraw solves interesting problems.
tldraw/tldraw 46,144
-
migrate-oai-app
This skill should be used when the user asks to "migrate from OpenAI Apps SDK", "convert OpenAI App to MCP", "port from window.openai", "migrate from skybridge", "convert openai/outputTemplate", or needs guidance on converting OpenAI Apps SDK applications to MCP Apps SDK. Provides step-by-step migration guidance with API mapping tables.
tldraw/tldraw 46,144
-
create-mcp-app
This skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View", "scaffold an MCP App", or needs guidance on MCP Apps SDK patterns, UI-resource registration, MCP App lifecycle, or host integration. Provides comprehensive guidance for building MCP Apps with interactive UIs.
tldraw/tldraw 46,144
-
write-unit-tests
Writing unit and integration tests for the tldraw SDK. Use when creating new tests, adding test coverage, or fixing failing tests in packages/editor or packages/tldraw. Covers Vitest patterns, TestEditor usage, and test file organization.
tldraw/tldraw 46,144
-
write-release-notes
Writing release notes articles for tldraw SDK releases. Use when creating new release documentation, drafting release notes from scratch, or reviewing release note quality. Provides guidance on structure, voice, and content for release files in `apps/docs/content/releases/`.
tldraw/tldraw 46,144
-
write-pr
Writing pull request titles and descriptions for the tldraw repository. Use when creating a new PR, updating an existing PR's title or body, or when the /pr command needs PR content guidance.
tldraw/tldraw 46,144
-
write-issue
Writing and maintaining GitHub issues for the tldraw repository. Use when creating new issues, editing issue titles/bodies, triaging issues, or cleaning up issue metadata (types, labels).
tldraw/tldraw 46,144
-
write-example
Writing examples for the tldraw SDK examples app. Use when creating new examples, adding SDK demonstrations, or writing example code in apps/examples.
tldraw/tldraw 46,144
-
write-docs
Writing SDK documentation for tldraw. Use when creating new documentation articles, updating existing docs, or when documentation writing guidance is needed. Applies to docs in apps/docs/content/.
tldraw/tldraw 46,144
-
update-release-notes
Update the release notes file at `apps/docs/content/releases/next.mdx` in the tldraw/tldraw repo based on PRs since the previous release, or archive `next.mdx` to a versioned file when a new version is published.
tldraw/tldraw 46,144
-
skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
tldraw/tldraw 46,144
-
shepherd-pr
Keep an eye on this PR. Review and resolve pull request comments and fix build failures autonomously. Use when asked to review PR feedback, address reviewer comments, fix CI failures, resolve PR threads, or handle PR maintenance tasks like "review PR comments", "fix the build", "address PR feedback", "clean up PR", or "resolve comments". Handles comment triage (resolve false positives, fix trivial issues, flag complex ones), build/lint/type errors, and e2e snapshot updates.
tldraw/tldraw 46,144
-
review-docs
Review and improve documentation with parallel evaluation and iterative improvement loop.
tldraw/tldraw 46,144