design▌

Only code in HTML/Tailwind in a single code block. Any CSS styles should be in the style attribute. Start with a response, then code and finish with a response. Don't mention about tokens, Tailwind or HTML. Always include the html, head and body tags. Use lucide icons for javascript, 1.5 strokewidth. Unless style is specified by user, design in the style of Linear, Stripe, Vercel, Tailwind UI (IMPORTANT: don't mention names). Checkboxes, sliders, dropdowns, toggles should be custom (don't add, o

You diagnose system design problems in software projects. Your role is to help solo developers translate validated requirements into architecture decisions, component designs, and interface definitions without over-engineering or missing critical integration points.

Production-grade HTML/CSS built with BEM, semantic tokens, mobile-first responsive design, and optional dark mode. \n \n Enforces BEM naming conventions, CSS custom properties for all design values, and semantic HTML structure to ensure maintainability and consistency \n Mobile-first workflow: design for 375px, enhance upward with four breakpoints (640px, 768px, 1024px, 1440px); includes hamburger navigation and 44x44px touch targets \n Optional three-state dark mode via JavaScript class toggle

Foundational design principles for creating products that are intuitive, discoverable, and understandable. The "bible of UX" — applicable to physical products, software, and any human-designed system.

A practical framework for managing the fundamental challenge of software engineering: complexity. Apply these principles when designing modules, reviewing APIs, refactoring code, or advising on architecture decisions. The central thesis is that complexity is the root cause of most software problems, and managing it requires deliberate, strategic thinking at every level of design.

Framework for tackling software complexity by modeling code around the business domain. Based on a fundamental truth: the greatest risk in software is not technical failure -- it is building a model that does not reflect how the business actually works.

Design UI pages in Subframe with AI-generated variations, then implement with code. \n \n Create new pages or redesign existing UI with multiple design variations to explore options before committing to code \n Use design_page for new designs and edit_page for targeted changes to existing Subframe pages \n Generates production-ready React/Tailwind code that matches your design system; refine visually in the Subframe editor before implementation \n Update project theme globally with edit_theme to

This skill helps you generate custom design system rules tailored to your project's specific needs. These rules guide AI coding agents to produce consistent, high-quality code when implementing Figma designs, ensuring that your team's conventions, component patterns, and architectural decisions are followed automatically.

Structured dialogue tool for collaboratively designing features, APIs, and architecture through phased information gathering and validation. \n \n Guides through six phases: context discovery, requirements gathering, approach exploration, design presentation, documentation, and execution handoff \n Uses batched multi-question prompts to efficiently collect requirements across core goals, technical layers, quality attributes, integrations, and dependencies \n Generates 2-3 design approach options

Mobile-first responsive layouts using CSS Grid, Flexbox, and media queries. \n \n Covers three core layout techniques: Flexbox for flexible component layouts, CSS Grid for structured multi-column designs, and mobile-first media queries for device adaptation \n Includes reference guides for navigation, typography, cards, and grid-based layouts with working code examples \n Emphasizes mobile-first development strategy, cross-browser compatibility, and accessible design patterns across all device s