skills.rest
myrson2
myrson2COMMUNITY
Explore all skills by this author →
GitHub

minimalist-ui

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

2|Updated Jul 20, 2026
Search Tags:#typography#design system#tailwind#frontend design#web interface#bento grid#minimalist ui
One-click install
npx skills add https://github.com/myrson2/eMSME --skill minimalist-ui-myrson2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: minimalist-ui
Source: https://github.com/myrson2/eMSME/tree/main/.agents/.agents/skills/minimalist-ui
Command: npx skills add https://github.com/myrson2/eMSME --skill minimalist-ui-myrson2

SYSTEM DOCUMENTATION & REQUIREMENTS

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, Tailwind, or Vue code follows a refined editorial, document-style aesthetic. ## Core Features & Use Cases - Design Constraint Enforcement: Bans generic defaults like Inter/Roboto fonts, Lucide icons, heavy drop shadows, gradients, pill-shaped containers, emojis, and AI copywriting clichés. - Complete Design System: Defines typography hierarchies (serif hero headings, monospace metadata), a warm monochrome palette with muted pastel accents, bento-grid cards, buttons, tags, accordions, and keystroke micro-UIs. - Motion Guidelines: Specifies subtle scroll-entry animations, staggered reveals, and hover micro-interactions using transform and opacity only. - Use Case: Ask for a landing page or dashboard and receive code with 1px #EAEAEA borders, off-black text, generous whitespace, and editorial serif headlines instead of a generic template look. ## Quick Start Use the minimalist-ui skill to build a landing page for my product with a bento feature grid and editorial typography.

Frequently Asked Questions about minimalist-ui

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

FAQPage Schema
How do I make AI-generated UI look less generic?▼

Apply a strict design protocol that bans default fonts like Inter and Roboto, heavy Tailwind shadows, gradients, and pill-shaped containers. This Skill enforces editorial serif headlines, off-black text, 1px #EAEAEA borders, and generous macro-whitespace for a document-style aesthetic.

What design system does this minimalist UI protocol use?▼

It uses a warm monochrome palette (#FFFFFF, #F7F6F3 backgrounds, #111111 text) with muted pastel accents for tags and badges. Typography pairs editorial serifs like Newsreader with geometric sans-serifs and monospace for metadata.

Which fonts and icon libraries are banned by this protocol?▼

Banned fonts include Inter, Roboto, and Open Sans; banned icon sets include Lucide, Feather, and standard Heroicons. The protocol recommends Phosphor Icons (Bold or Fill) or Radix UI Icons with standardized stroke widths instead.

Does this work with Tailwind CSS and React?▼

Yes, the execution protocol explicitly covers HTML, React, Tailwind, and Vue. It references Tailwind utilities like py-24 spacing, max-w-4xl containers, and custom shadow values while prohibiting default utilities like shadow-md and rounded-full on large elements.

How are animations handled without hurting performance?▼

Animations use only transform and opacity properties, triggered via IntersectionObserver rather than scroll listeners. Scroll entries use translateY(12px) with a 600ms cubic-bezier easing, and staggered reveals apply per-item animation delays.

When should I not use this minimalist design protocol?▼

Avoid it when a project requires vibrant brand colors, playful illustration-heavy styles, or rich visual effects like glassmorphism and gradients. The protocol strictly rejects saturated backgrounds and decorative 3D effects by design.

Related Skills

Explore More Design & Creative Skills→
lookleelooklee

lorem-ipsum

Generate customizable filler text from a predefined word set.

Community
Basic
Skyvern-AISkyvern-AI
22.7k

testing

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

Official
Intermediate
kobogithubkobogithub

uiux-viewport-testing

Automate responsive design testing by resizing browser viewports and capturing screenshots.

Community
Intermediate
partme-aipartme-ai
610

ant-design-vue

Guide Ant Design Vue component usage for Vue 3 projects.

Official
Intermediate