design
Design
Manage your app's design system through instructions/design-system.md - the single source of truth for all UX/UI work.
Choose Your Mode
CREATE → No design system yet, or extracting from existing code MODIFY → Have a design system, need to update it WORK WITHIN → Have a design system, building features that follow it
CREATE Mode
Generate a new instructions/design-system.md from one of these entry points:
From URL (Reference App)
Analyze a live app and extract its design patterns.
More from whawkinsiv/claude-code-superpowers
secure
Use this skill when the user needs to secure their SaaS app, implement authentication, protect user data, secure APIs, or check for vulnerabilities. Also use when the user says 'is my app secure,' 'security check,' 'I'm worried about hackers,' 'how do I protect user data,' or 'security before launch.' Covers OWASP Top 10, auth best practices, data protection, and security checklists for apps built with AI tools.
158monitor
Use this skill when the user needs to set up production monitoring, track app health, configure error alerts, or respond to incidents. Also use when the user says 'my app went down,' 'how do I know if something breaks,' 'set up alerts,' 'is my app healthy,' or 'I found out from a user that my site was down.' Covers error tracking, uptime monitoring, performance metrics, and incident response for SaaS applications.
39debug
Use this skill when features break, users report errors, deployments fail, or tests don't pass. Guides systematic debugging: reproducing bugs, gathering diagnostic info, reading error messages, and working with AI tools to fix issues efficiently.
32build
Use this skill when the user needs to build features with AI coding tools, choose between Claude Code, Lovable, Replit, or Cursor, write effective prompts for code generation, or iterate on AI-generated code. Covers tool selection, prompting strategies, and development workflows for non-technical founders.
29test
Use this skill when the user needs to test features before deployment, create test scenarios, find edge cases, or verify bug fixes. Covers manual testing workflows, cross-browser testing, edge case identification, and testing checklists for non-technical founders.
23optimize
Use this skill when the user's app feels slow, the codebase feels bloated, or after significant development work. Also use when the user says 'my app is slow,' 'clean up my code,' 'reduce bundle size,' 'my hosting bill is too high,' or 'everything feels sluggish.' Optimizes across four dimensions: Speed (page load, API response), Code (unused files, dead code), Database (orphaned data, schema hygiene), and Dependencies (package bloat, bundle size).
22