skills.rest
NarixHine
NarixHineCOMMUNITY
Explore all skills by this author →
GitHub

minimalist-ui

Generates editorial-style minimalist web interfaces with warm monochrome palettes and bento-grid layouts.

Updated Jul 8, 2026
Search Tags:#typography#tailwind css#web design#frontend design#bento grid#minimalist ui#editorial style
One-click install
npx skills add https://github.com/NarixHine/uni-chem --skill minimalist-ui-narixhine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: minimalist-ui
Source: https://github.com/NarixHine/uni-chem/tree/main/.agents/skills/minimalist-ui
Command: npx skills add https://github.com/NarixHine/uni-chem --skill minimalist-ui-narixhine

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Generic AI-generated frontend code tends to look like every other SaaS landing page: Inter font, heavy drop shadows, bright 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 components. ## Core Features & Use Cases - Design Constraint Enforcement: Bans generic defaults such as Inter/Roboto fonts, Lucide icons, heavy shadows, gradients, pill-shaped containers, emojis, and AI copywriting clichés. - Component Specifications: Defines exact rules for bento grids, buttons, tags, accordions, keystroke UIs, and faux-OS window chrome, including precise hex colors, border radii, and spacing values. - Motion & Imagery Directives: Prescribes subtle scroll-entry animations via IntersectionObserver, staggered reveals, ambient gradient layers, and desaturated photography treatments. - Use Case: Ask the AI to build a landing page or dashboard, and the output will use off-black text on warm off-white backgrounds, 1px #EAEAEA borders, serif hero headings, and muted pastel accent tags without manual design cleanup. ## Quick Start Build a landing page for a note-taking app following the minimalist-ui protocol with a bento feature grid and serif hero heading.

Frequently Asked Questions about minimalist-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate minimalist landing page code with AI?▼

Invoke this Skill with a request describing the page you need, such as a landing page or dashboard. It applies a strict protocol covering typography, color palette, component specs, and motion rules so the generated HTML, React, Vue, or Tailwind code follows an editorial minimalist aesthetic.

What design elements does this minimalist UI protocol ban?▼

It bans Inter, Roboto, and Open Sans fonts, Lucide and Feather icons, heavy Tailwind shadows, gradients, glassmorphism, pill-shaped large containers, emojis, placeholder names like John Doe, and copywriting clichés such as Elevate or Seamless.

Which fonts and colors does the minimalist UI protocol use?▼

It uses geometric sans-serifs like Geist Sans or Helvetica Neue for body text, editorial serifs like Newsreader or Playfair Display for hero headings, and monospace fonts for code. Colors are warm monochrome (#FFFFFF, #F7F6F3, #111111) with muted pastel accents.

Can I use this protocol with Tailwind CSS and React?▼

Yes, the protocol explicitly targets HTML, React, Tailwind, and Vue. It references Tailwind utilities like py-24, max-w-4xl, and text-xs, and defines component rules such as 1px solid #EAEAEA borders and 8px to 12px border radii for cards.

How are animations handled in this minimalist UI approach?▼

Animations use only transform and opacity properties, with scroll-entry fades via IntersectionObserver rather than scroll event listeners. Cards get subtle hover shadow shifts, lists use staggered reveal delays, and optional ambient gradient blobs drift slowly behind hero sections.

When should I not use this minimalist design protocol?▼

Avoid it when a project requires vibrant brand colors, playful illustration-heavy styles, or dense data-visualization interfaces. The protocol deliberately restricts color usage to semantic accents and enforces a document-style aesthetic unsuited to expressive or consumer-entertainment designs.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
Skyvern-AISkyvern-AI
22.7k

testing

Tests Skyvern deployments by validating API, frontend rendering, browser sessions, and workflows.

Official
Intermediate
az9713az9713

test-consistency

Audit design system consistency across pages and components using Playwright.

Community
Intermediate
MolcajeteAIMolcajeteAI
2

shadcn-ui-setup

Install and configure shadcn/ui components with Tailwind CSS and React Server Components.

Official
Intermediate