What problem does it solve? Generic AI-generated frontend code tends to look like every other SaaS landing page: default fonts, heavy shadows, gradients, and clichéd copy. This Skill enforces a strict design protocol so generated HTML, React, Vue, or Tailwind code follows a refined editorial aesthetic with warm monochrome colors, typographic contrast, and flat bento-grid layouts. ## Core Features & Use Cases - Strict Negative Constraints: Bans generic fonts (Inter, Roboto), heavy drop shadows, gradients, pill-shaped containers, emojis, and AI copywriting clichés. - Design System Rules: Defines exact color tokens (warm off-whites, muted pastel accents), typography stacks (editorial serifs, monospace), border specs (1px solid #EAEAEA), and component patterns for buttons, tags, accordions, and keystroke UIs. - Motion Guidelines: Specifies subtle scroll-entry animations, staggered reveals, and hover micro-interactions using transform and opacity only. - Use Case: Ask the AI to build a pricing page or product landing page, and receive code that follows a cohesive premium minimalist design system instead of generic defaults. ## Quick Start Use the minimalist-ui skill to build a landing page for a note-taking app with a hero section, bento feature grid, and FAQ accordion.
