functional-design-tools

Defect reporting and submission workflow with dispatch contract support. Reporter skill conducts structured interviews, auto-generates reproduction steps via chrome-devtools-mcp (visual bugs) or code tracing (API bugs), cross-references requirements, and classifies as true defect, story update, or feature request. Broad trigger coverage: bugs/issues/problems/regressions, change and story updates, and concrete feature requests against existing product (not greenfield requirements). Supports dispatch from orchestrators with page URL (visual) or API endpoint identity (non-visual). Organizer skill submits to GitHub, Jira, Linear, or GitLab with system-native formatting and requirement traceability.

Requirements gathering interview and issue creation workflow. A senior product consultant interviews users to produce structured requirements, then an organizer converts reviewed requirements into GitHub milestones/issues or Jira epics/stories.

Visual design system toolkit with UX/usability expert review. Consultant skill for establishing design systems via interview or site extraction with page discovery, parallel fingerprinting, fluid responsive detection, and custom component motion discovery; codebase reverse-engineering mode derives tokens and component specs from the repo with chrome-devtools-mcp route inspection (spec at docs/design-system/codebase-reverse-spec-*.md, section-by-section approval, per-file delete confirmation). Component-context skill plus opus component-context agent: minimal one spec + motion when exact or high-confidence fuzzy; auto top-3 specs + synthesis + motion when ambiguous; gap inference otherwise. Design-reviewer skill and agent for live visual quality gate testing via chrome-devtools-mcp — includes Nielsen's 10 Usability Heuristics framework with UX scoring (0-100), diff mode for follow-up reviews, consultant synergy (review-checklist.md), functional/behavior-change escalation tags on fix suggestions, and Categories A-F split into phase files. Fully report-only with categorized fix suggestions. Uses opus agent with haiku sub-agent for cost-efficient mechanical inspection dispatch. Update-component-index skill for regenerating the component compendium index.

Playwright functional test generator with full-stack performance analysis. Uses chrome-devtools-mcp for live browser inspection, Playwright AI agents (Planner, Generator, Healer) for resilient test authoring, accessibility-tree selectors, @axe-core/playwright for integrated WCAG audits, visual regression via toHaveScreenshot, and Lighthouse CI with budget assertions. Writes end-to-end tests via a TDD-style fix loop, then audits pages with Lighthouse and @axe-core/playwright for accessibility, performance, and SEO. Includes tech-stack-aware performance deep-dive: network waterfall analysis, API trace-back to backend code, and database query analysis. Lighthouse/axe/performance sections are report-only with categorized fix suggestions (code-level and directive-level) and functional/behavior-change escalation before implementing product-affecting fixes. Uses opus agent with haiku sub-agent for cost-efficient TDD loop dispatch.