ui-audit
Audits web UI quality across accessibility, interaction, forms, typography, navigation, layout, performance, motion, and microcopy. Covers alt text, data-table semantics, captions and transcripts, document language, reduced motion, lazy loading, script loading, and resource hints. Use when reviewing or refining frontend UI before merge or release, asking "check my UI", "is this accessible", "polish this page", "respect reduced motion", or when the user asks for a UI, UX, or accessibility audit.
What this skill does
# UI Audit Final-pass audit workflow for web interfaces. Focuses on concrete issues with concrete fixes. ## Trigger Cues Use this skill when: - The user asks for a UI quality audit, design QA, polish pass, or pre-release review - The task requires accessibility, keyboard, form usability, typography, or interaction checks - The request includes loading/error/empty states, responsiveness, or visual stability checks - The request mentions visual hierarchy, dense product chrome, headers, tabs, sidebars, icons, or separator cleanup ## Audit Workflow Copy and track this checklist during the audit: ```text Audit progress: - [ ] Step 1: Scope changed surfaces and select relevant categories - [ ] Step 2: Run CRITICAL checks first (a11y, interaction, forms) - [ ] Step 3: Run HIGH/MEDIUM checks for the same surfaces - [ ] Step 4: Report findings with file:line and concrete fixes - [ ] Step 5: Re-check touched files and mark passes ``` 1. Audit only changed pages/components unless a full sweep is requested. 2. Prioritize `CRITICAL` and `HIGH` findings before medium-priority polish. 3. For motion behavior, also apply `ui-animation` for timing, easing, gesture, and review details. 4. After fixes, rerun the relevant rules before finalizing. 5. When hierarchy or chrome cleanup is in scope, use the navigation, layout, and extra-polish sections in `craft-checklist.md` before reporting. ## Rule Categories by Priority | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Accessibility and Semantics | CRITICAL | `a11y-` | | 2 | Keyboard and Interaction | CRITICAL | `interaction-` | | 3 | Forms and Validation | CRITICAL | `forms-` | | 4 | Typography and Readability | HIGH | `type-` | | 5 | Navigation and Feedback | HIGH | `nav-` | | 6 | Layout and Resilience | HIGH | `layout-` | | 7 | Performance and Visual Stability | HIGH | `perf-` | | 8 | Motion and Theme Behavior | HIGH | `motion-` | | 9 | Content and Microcopy | MEDIUM | `copy-` | ## Quick Reference Read only what is needed for the current audit scope: - Category map and impact rationale: `rules/_sections.md` - Rule-level guidance and examples: `rules/<prefix>-*.md` - Full craft sweep: `craft-checklist.md` - Typography deep sweep: `typography-checklist.md` Example rule files: ``` rules/a11y-semantic-html-first.md rules/forms-inline-errors-first-focus.md rules/perf-image-dimensions-and-priority.md ``` Each rule file contains: - Why the rule matters - Incorrect example - Correct example ## Review Output Contract Report findings in this format: ```markdown ## UI Audit Findings ### path/to/file.tsx - [CRITICAL] `a11y-icon-controls-labeled`: Icon button is missing an accessible name. - Fix: Add `aria-label="Close dialog"` (or visible text label). ### path/to/clean-file.tsx - ✓ pass ``` - Group findings by file. - Use `file:line` when line numbers are available. - State issue and propose a concrete fix. - Include clean files as `✓ pass`. ## Gotchas - Do not dump every rule file into context. Load only the category prefixes relevant to the current scope (`rules/<prefix>-*.md`). - Do not invent rule IDs in findings. Cite only ids that exist under `rules/`; if no rule fits, describe the issue without an id. - Do not audit beyond the scope the user requested. Default is changed surfaces only; a full sweep must be explicit. - Do not skip `CRITICAL` categories (a11y, interaction, forms) to reach visual polish faster. The priority order in the rule-category table is load-bearing. - Do not report passes without checking. `✓ pass` means the file was actually read against the loaded rules, not assumed clean. - The anti-patterns in `craft-checklist.md` apply to UI code being audited, not to this skill's execution — do not mix the two when reporting findings.
Related in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.