ui-design-system

Superpowers Extensions for Claude Code

Extension skills for the superpowers suite, providing quality gates, development workflow skills, and project lifecycle management for web application development. It includes eleven skills:

• regression-test -- Comprehensive regression testing using the Microsoft Playwright MCP server, combining existing test suite execution with AI-powered visual and functional browser testing.
• pre-push-review -- A structured branch review that diffs against the base branch and gates on plan adherence, code quality, commit hygiene, and regression testing, producing a PASS/FAIL verdict with a prioritized remediation plan on failure.
• refactor-analysis -- Transitive impact analysis for complex refactorings. Maps all affected files, classifies breaking vs cosmetic changes, identifies risks, and produces a safe execution order with checkpoint boundaries before writing implementation plans.
• decision-tracker -- Persistent cross-cutting decision tracking using LongtermMemory-MCP. Automatically extracts architectural decisions, conventions, and constraints during brainstorming and planning, persists them to semantic long-term memory, and recalls them at session start and subagent dispatch to prevent decision amnesia.
• compress-memory -- Compresses natural-language memory files (CLAUDE.md, STATE.md, ROADMAP.md, project notes) to save input tokens replayed every session. Pure-markdown skill — preserves code blocks, URLs, file paths, frontmatter, headings, tables, and list structure byte-exact; backs up the original to FILE.original.md before each compression. Opt-in via project-orchestration:plan-roadmap; auto-invoked by pause-work. Inspired by caveman-compress (MIT) but reimplemented without a Python toolchain.
• roslyn-codelens-integration -- Superpowers integration for Roslyn CodeLens intelligence. Enforces use of 24 semantic .NET code analysis tools (instead of Grep/Glob and dotnet build) across every superpowers skill — brainstorming, refactor-analysis, writing-plans, executing-plans, subagent-driven-development, systematic-debugging, TDD, verification, code review, and pre-push review.
• memorylens-integration -- Superpowers integration for MemoryLens memory profiling. Enhances systematic-debugging with .NET memory snapshot analysis, leak detection, and before/after fix validation. Direct triggers on "memory leak", "OOM", "high GC pressure". Inert on non-.NET projects.
• project-orchestration -- GSD-inspired project lifecycle management for larger multi-session projects. Brownfield codebase mapping, milestone tracking, phase management, session pause/resume, milestone audit, release cycle management, and a start-next-phase routing hub that mechanically chains brainstorming → writing-plans → executing-plans for the next non-complete phase.
• ui-workflow -- Frontend design contracts and visual auditing. Generates structured UI design contracts before implementing frontend phases (ui-phase) and performs visual audits afterwards (ui-review) using a three-layer grading: contract adherence, anti-slop scan, and 5-dimension critique.
• ui-design-system -- Generates a complete design system before frontend implementation. Three modes: curated (pick from 70 vendored real-world references — Stripe, Linear, Vercel, Notion, Apple, Figma, Supabase, Cursor, Claude, …), guided (7 questions), or quick (inline one-liner). Includes 5 hand-tuned OKLch design directions and an anti-slop checklist. Auto-detects Blazor, React, Vue, Astro stacks. Outputs docs/design/MASTER.md.
• squad -- Persistent AI agent teams (Lead, Backend Engineer, Frontend Engineer, Tester, Scribe) dispatched as parallel Task subagents during brainstorming and planning workflows. Each specialist runs in an isolated context window with its own charter and tier-1 history, so they cannot anchor on each other's reasoning. Per-role history.md files accumulate project-specific knowledge across sessions; tiered context lookup (semantic search → grep → recent history) keeps each subagent's prompt lean.

Regression Test Skill

When invoked, Claude follows a structured 4-phase process:

1. Discovery -- Scans your project for existing test frameworks (Playwright, Cypress, Jest, Vitest, Mocha, Karma), test files, route definitions, and the application URL.