Required Plugins

Superpowers plugin: MUST be active for all work using this skill. Use throughout the entire build pipeline — design decisions, code generation, debugging, quality checks, and any task where it offers enhanced capabilities. If superpowers provides a better way to accomplish something, prefer it over the default approach.

Frontend Design plugin (webapp-gui-design): MUST be active for all visual output from this skill. Use for design system work, component styling, layout decisions, colour selection, typography, responsive design, and visual QA.

Web App GUI Design

This skill is split into sections to stay under the 500-line limit.

Sections

1. Overview & Stack
2. Security, Print/PDF, Dates
3. Architecture, Panels, Menus
4. Permissions & Searchable Dropdowns
5. Templates & UI Components
6. AJAX & Utilities
7. Responsive, Photo Cards, Flatpickr
8. Best Practices & Aesthetics
9. Interface Design
10. SaaS UX Principles — Onboarding, dashboards, empty states, navigation, multi-tenant UI, feedback, performance