minimalist-skill
starsforks
How to install minimalist-skill?
leonxlnx/taste-skill/minimalist-skill
$npx -y skills add Leonxlnx/taste-skill --skill minimalist-skillClean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
SKILL.md
| 1 | # Protocol: Premium Utilitarian Minimalism UI Architect |
| 2 | |
| 3 | ## 1. Protocol Overview |
| 4 | Name: Premium Utilitarian Minimalism & Editorial UI |
| 5 | Description: An advanced frontend engineering directive for generating highly refined, ultra-minimalist, "document-style" web interfaces analogous to top-tier workspace platforms. This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents. It actively rejects standard generic SaaS design trends. |
| 6 | |
| 7 | ## 2. Absolute Negative Constraints (Banned Elements) |
| 8 | The AI must strictly avoid the following generic web development defaults: |
| 9 | - DO NOT use the "Inter", "Roboto", or "Open Sans" typefaces. |
| 10 | - DO NOT use generic, thin-line icon libraries like "Lucide", "Feather", or standard "Heroicons". |
| 11 | - DO NOT use Tailwind's default heavy drop shadows (e.g., `shadow-md`, `shadow-lg`, `shadow-xl`). Shadows must be practically non-existent or heavily customized to be ultra-diffuse and low opacity (< 0.05). |
| 12 | - DO NOT use primary colored backgrounds for large elements or sections (e.g., no bright blue, green, or red hero sections). |
| 13 | - DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs). |
| 14 | - DO NOT use `rounded-full` (pill shapes) for large containers, cards, or primary buttons. |
| 15 | - DO NOT use emojis anywhere in code, markup, text content, headings, or alt text. Replace with proper icons or clean SVG primitives. |
| 16 | - DO NOT use generic placeholder names like "John Doe", "Acme Corp", or "Lorem Ipsum". Use realistic, contextual content. |
| 17 | - DO NOT use AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve". Write plain, specific language. |
| 18 | |
| 19 | ## 3. Typographic Architecture |
| 20 | The interface must rely on extreme typographic contrast and premium font selection to establish an editorial feel. |
| 21 | - Primary Sans-Serif (Body, UI, Buttons): Use clean, geometric, or system-native fonts with character. Target: `font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif`. |
| 22 | - Editorial Serif (Hero Headings & Quotes): Target: `font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`. Apply tight tracking (`letter-spacing: -0.02em` to `-0.04em`) and tight line-height (`1.1`). |
| 23 | - Monospace (Code, Keystrokes, Meta-data): Target: `font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace`. |
| 24 | - Text Colors: Body text must never be absolute black (`#000000`). Use off-black/charcoal (`#111111` or `#2F3437`) with a generous `line-height` of `1.6` for legibility. Secondary text should be muted gray (`#787774`). |
| 25 | |
| 26 | ## 4. Color Palette (Warm Monochrome + Spot Pastels) |
| 27 | Color is a scarce resource, utilized only for semantic meaning or subtle accents. |
| 28 | - Canvas / Background: Pure White `#FFFFFF` or Warm Bone/Off-White `#F7F6F3` / `#FBFBFA`. |
| 29 | - Primary Surface (Cards): `#FFFFFF` or `#F9F9F8`. |
| 30 | - Structural Borders / Dividers: Ultra-light gray `#EAEAEA` or `rgba(0,0,0,0.06)`. |
| 31 | - Accent Colors: Exclusively use highly desaturated, washed-out pastels for tags, inline code backgrounds, or subtle icon backgrounds. |
| 32 | - Pale Red: `#FDEBEC` (Text: `#9F2F2D`) |
| 33 | - Pale Blue: `#E1F3FE` (Text: `#1F6C9F`) |
| 34 | - Pale Green: `#EDF3EC` (Text: `#346538`) |
| 35 | - Pale Yellow: `#FBF3DB` (Text: `#956400`) |
| 36 | |
| 37 | ## 5. Component Specifications |
| 38 | - Bento Box Feature Grids: |
| 39 | - Utilize asymmetrical CSS Grid layouts. |
| 40 | - Cards must have exactly `border: 1px solid #EAEAEA`. |
| 41 | - Border-radius must be crisp: `8px` or `12px` maximum. |
| 42 | - Internal padding must be generous (e.g., `24px` to `40px`). |
| 43 | - Primary Call-To-Action (Buttons): |
| 44 | - Solid background `#111111`, text `#FFFFFF`. |
| 45 | - Slight border-radius (`4px` to `6px`). No box-shadow. |
| 46 | - Hover state should be a subtle color shift to `#333333` or a micro-scale `transform: scale(0.98)`. |
| 47 | - Tags & Status Badges: |
| 48 | - Pill-shaped (`border-radius: 9999px`), very small typography (`text-xs`), uppercase with wide tracking (`letter-spacing: 0.05em`). |
| 49 | - Background must use the defined Muted Pastels. |
| 50 | - Accordions (FAQ): |
| 51 | - Strip all container boxes. Separate items only with a `border-bottom: 1px solid #EAEAEA`. |
| 52 | - Use a clean, sharp `+` and `-` icon for the toggle state. |
| 53 | - Keystroke Micro-UIs: |
| 54 | - Render shortcuts as physical keys using `<kbd>` tags: `border: 1px solid #EAEAEA`, `border-radius: 4px`, `background: #F7F6F3`, using the Monospace font. |
| 55 | - Faux-OS Window Chrome: |
| 56 | - When mocking up software, wrap it in a minimalist container with a white top bar containing three small, light gray circles (replicating macOS window controls). |
| 57 | |
| 58 | ## 6. Iconography & Imagery Directives |
| 59 | - System Icons: Use "Phosphor Icons (Bold or Fill weights)" or "Radix UI Icons" for a te |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
