skills.rest
singhaganesh
singhaganeshCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

minimalist-ui

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

Updated Jul 7, 2026
Search Tags:#typography#web design#tailwind#frontend design#editorial design#bento grid#minimalist ui
One-click install
npx skills add https://github.com/singhaganesh/Urban-assist --skill minimalist-ui-singhaganesh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: minimalist-ui
Source: https://github.com/singhaganesh/Urban-assist/tree/main/.cursor/skills/minimalist-ui
Command: npx skills add https://github.com/singhaganesh/Urban-assist --skill minimalist-ui-singhaganesh

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 output follows a refined editorial, document-style aesthetic. ## Core Features & Use Cases - Design Constraint Enforcement: Bans generic defaults such as Inter/Roboto fonts, Lucide icons, heavy Tailwind shadows, gradients, pill-shaped containers, emojis, and AI copywriting clichés. - Concrete Component Specifications: Defines exact values for bento grids (1px #EAEAEA borders, 8-12px radius), CTA buttons (#111111 background), pastel status badges, accordions, keystroke kbd elements, and faux-OS window chrome. - Typography & Motion System: Prescribes serif/sans/mono font stacks, warm monochrome palette with muted pastel accents, and subtle IntersectionObserver-based scroll animations using only transform and opacity. - Use Case: Ask the AI to build a pricing page or dashboard, and receive code with editorial serif headlines, generous whitespace, flat cards, and staggered fade-in animations instead of a generic template look. ## Quick Start Ask the AI to build a landing page or dashboard UI following the minimalist-ui protocol for a clean editorial look.

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, heavy Tailwind shadows, gradients, and pill-shaped containers. This Skill enforces warm monochrome colors, editorial serif typography, and flat bento-grid cards so output looks deliberately designed.

What design system does this minimalist UI protocol use?▼

It uses a warm monochrome palette (#FFFFFF, #F7F6F3, #EAEAEA borders) with muted pastel accents, serif display fonts like Newsreader or Playfair Display, geometric sans body text, and Phosphor or Radix icons instead of thin-line libraries.

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

Yes, the protocol explicitly targets HTML, React, Tailwind, and Vue output. It maps its rules to Tailwind conventions such as py-24 section spacing, max-w-4xl content widths, and customized low-opacity shadows instead of default shadow utilities.

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. Recommended replacements are Geist Sans, Newsreader, or Instrument Serif for type, and Phosphor or Radix UI Icons for iconography.

How are animations handled without hurting performance?▼

Animations use only transform and opacity properties, triggered by IntersectionObserver rather than scroll event listeners. Scroll entries use translateY(12px) fades over 600ms, with staggered delays for lists and no layout-triggering properties.

Related Skills

Explore More Design & Creative Skills→
code-vibe-academycode-vibe-academy
2

architecte-contenu

Structures website information with sitemaps, content strategy documents, and Markdown wireframes.

Official
Advanced
abhinavssinghabhinavssingh

optimizely-frontend-hosting

Configure and deploy Next.js applications to Optimizely Frontend Hosting for CMS.

Community
Intermediate
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
lengo0951lengo0951

ui-styling

Style React user interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced