design

Plugin design in jamon8888/cc-suite. Commands read from the repo's manifest — 1 month ago.

Skills (16)

• accessibility-review

  Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff.

• analytics-discovery

  Use product analytics data to identify discovery opportunities quantitatively. Activates when ~~product analytics (Amplitude, Mixpanel, Heap, FullStory) is connected and the user wants to find where users drop off, which features are underused, which segments behave differently, or validate whether

• design-critique

  Get rigorous design feedback on usability, visual hierarchy, accessibility, and consistency — with heuristics scoring and AI slop detection. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot. Structured across 4

• design-handoff

  Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.

• design-system

  Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.

• feedback-mining

  Extract structured discovery signals from existing support and communication data — without running new research. Activates when ~~user feedback (Intercom) or ~~chat (Slack) is connected and the user wants to understand user problems, prioritize features, identify segments, or build a discovery brie

• pattern-extract

  Identify and extract reusable UI patterns, components, and design tokens from an existing codebase into a coherent design system. Trigger with "extract components", "find repeated patterns", "build design system from code", "what should be a component?", "hardcoded values", or when auditing a codeba

• platform-context

  Passive skill encoding platform-specific design vocabulary, component patterns, interaction models, and constraints. Auto-applied when a platform is declared or detected. Never user-invoked. Governs what Claude knows about each target platform and how it translates that knowledge into wireframes, pr

• research-ops

  Operationalize user research logistics using ~~email (Gmail), ~~calendar (Google Calendar), and ~~project tracker (Linear / Asana / Jira). Activates when the user wants to plan a research sprint, recruit participants, send interview outreach, schedule sessions, or track interview status. Trigger phr

• research-repository

  Use ~~knowledge base (Notion, Confluence) as a living research repository — search before starting new research, publish syntheses in a consistent structure, maintain a living personas document, and surface prior insights on demand. Activates when a knowledge base connector is available and the user

• research-synthesis

  Synthesize user research into themes, insights, and recommendations. Use when you have interview transcripts, survey results, usability test notes, support tickets, or NPS responses that need to be distilled into patterns, user segments, and prioritized next steps.

• user-flow

  Map and generate user flow diagrams — screen-to-screen journeys, decision trees, happy paths, error branches, and onboarding sequences. Trigger with "user flow", "flow diagram", "map this journey", "what happens when the user does X", or any request to visualize how users move through a product.

• user-research

  Plan, conduct, and synthesize user research. Trigger with "user research plan", "interview guide", "usability test", "survey design", "research questions", or when the user needs help with any aspect of understanding their users through research.

• ux-copy

  Write or review UX copy — microcopy, error messages, empty states, CTAs, confirmation dialogs, loading states, tooltips, onboarding. Trigger with "write copy for", "what should this button say?", "review this error message", "UX writing", or any copy/label/microcopy request.

• visual-quality

  Passive skill encoding production design quality standards. Automatically applied when Claude does any design work — critique, wireframe, handoff, or system work. Prevents generic AI-output aesthetics and enforces Impeccable-grade quality bars for layout, color, typography, and interaction.

• wireframe

  Generate high-quality annotated wireframes as interactive HTML artifacts. Trigger with "wireframe", "sketch this screen", "mock up", "layout this page", "show me what this could look like", or any request to visualize a design concept before full production. Produces structured low-fidelity wirefram

Slash commands (13)

• /design:accessibility:accessibility

  Run a WCAG 2.1 AA accessibility audit — color contrast, keyboard navigation, screen reader behavior, touch targets, and focus management. Produces findings by severity with WCAG criterion and concrete fixes.

• /design:critique:critique

  Get rigorous design feedback with AI slop detection, Nielsen's heuristics scoring (0–4 per heuristic), persona red flags, and a prioritized action plan.

• /design:design-system:design-system

  Audit, document, or extend your design system — tokens, components, patterns, and naming consistency.

• /design:discover:discover

  Run a full discovery investigation using all available connectors. Aggregates signals from ~~user feedback, ~~chat, and ~~product analytics, checks the ~~knowledge base for prior research, scores the hypothesis, and recommends next actions. Use when you want to investigate a problem area before comm

• /design:extract:extract

  Scan a codebase for repeated UI patterns, hardcoded values, and inconsistent implementations — then extract them into a coherent design system with tokens, shared components, and documentation.

• /design:flow:flow

  Generate a user flow diagram — screen-to-screen journeys, decision trees, happy paths, error branches. Output in Mermaid (renders in Notion/GitHub/Linear), as an HTML artifact, or as a structured outline.

• /design:handoff:handoff

  Generate a complete developer handoff spec — layout, tokens, component states, interactions, responsive behavior, edge cases, and accessibility notes.

• /design:interview-ops:interview-ops

  Set up and manage a user interview sprint end-to-end using ~~email (Gmail), ~~calendar (Google Calendar), and ~~project tracker. Creates the research brief, identifies participants, drafts outreach emails, schedules sessions, and tracks interview status. Use after /discover returns a score ≥ 13/18,

• /design:layout:layout

  Diagnose and fix layout, spacing, and visual rhythm issues. Use when a design feels off, cramped, monotonous, or unbalanced — even if you can't name why. Applies systematic spacing fixes and hierarchy improvements.

• /design:prototype:prototype

  Generate a working, visually polished HTML prototype from a wireframe or description. Applies Impeccable-grade design quality — distinctive typography, intentional color, real visual hierarchy. Not a demo, a real interactive artefact.

• /design:research-synthesis:research-synthesis

  Synthesize user research data — interviews, surveys, usability tests, support tickets, NPS responses — into themes, insights, user segments, and prioritized recommendations.

• /design:ux-copy:ux-copy

  Write or review UX copy — microcopy, error messages, empty states, CTAs, confirmation dialogs, loading states, onboarding text. Produces alternatives with rationale and localization notes.

• /design:wireframe:wireframe

  Generate an annotated, interactive HTML wireframe for a screen or flow. Produces a structured low-fidelity layout with hierarchy annotations, spacing rationale, and copy guidance — not a blank rectangle grid.

MCP servers (9)

• slack

  connects to: https://mcp.slack.com/mcp

• figma

  connects to: https://mcp.figma.com/mcp

• linear

  connects to: https://mcp.linear.app/mcp

• asana

  connects to: https://mcp.asana.com/v2/mcp

• atlassian

  connects to: https://mcp.atlassian.com/v1/mcp

• notion

  connects to: https://mcp.notion.com/mcp

• intercom

  connects to: https://mcp.intercom.com/mcp

• google-calendar

  connects to: https://gcal.mcp.claude.com/mcp

• gmail

  connects to: https://gmail.mcp.claude.com/mcp