What problem does it solve? Generic AI-generated frontend code tends to look like default SaaS templates with heavy shadows, gradients, and clichéd typography. This Skill enforces a strict design protocol so generated HTML, React, Tailwind, or Vue code follows a refined editorial aesthetic with warm monochrome colors, typographic contrast, and flat bento-grid layouts. ## Core Features & Use Cases - Design Constraint Enforcement: Bans generic defaults like Inter/Roboto fonts, heavy drop shadows, gradients, pill-shaped containers, emojis, and AI copywriting clichés. - Component Specifications: Provides exact rules for bento grids, buttons, tags, accordions, keystroke UIs, and faux-OS window chrome with precise color and border values. - Motion Guidelines: Defines subtle scroll-entry animations, hover states, and staggered reveals using transform and opacity only. - Use Case: Ask for a landing page or dashboard and receive code with off-black text on warm bone backgrounds, 1px #EAEAEA borders, muted pastel accents, and editorial serif headings instead of a generic template look. ## Quick Start Use the minimalist-ui skill to build a landing page for a note-taking app with a bento feature grid and editorial typography.
