skills.rest
ShyamRavidath
ShyamRavidathCOMMUNITY
Explore all skills by this author →
GitHub

minimalist-ui

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

Updated Apr 20, 2026
Search Tags:#typography#tailwind#frontend design#web interface#editorial design#bento grid#minimalist ui
One-click install
npx skills add https://github.com/ShyamRavidath/oscc-detection-v2 --skill minimalist-ui-shyamravidath
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: minimalist-ui
Source: https://github.com/ShyamRavidath/oscc-detection-v2/tree/main/.agents/skills/minimalist-ui
Command: npx skills add https://github.com/ShyamRavidath/oscc-detection-v2 --skill minimalist-ui-shyamravidath

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend code generated by AI often defaults to generic SaaS aesthetics: Inter fonts, heavy drop shadows, gradients, and clichéd copy. This Skill enforces a strict design protocol so generated HTML, React, Tailwind, or Vue interfaces follow a refined editorial, document-style visual system instead. ## Core Features & Use Cases - Design Constraint Enforcement: Bans generic defaults (Inter/Roboto fonts, Lucide icons, heavy shadows, gradients, emojis, AI copywriting clichés) and prescribes a warm monochrome palette with muted pastel accents. - Component Specifications: Provides exact styling rules for bento grids, buttons, tags, accordions, keystroke UIs, and faux-OS window chrome, including border, radius, and spacing values. - Motion & Typography System: Defines scroll-entry animations, staggered reveals, and a three-tier font hierarchy (sans, editorial serif, monospace) with precise tracking and line-height values. - Use Case: Ask the AI to build a landing page or dashboard, and receive code that natively follows a premium minimalist aesthetic without manual design cleanup. ## Quick Start Use the minimalist-ui skill to build a landing page for a research portfolio with a hero section, bento feature grid, and FAQ accordion.

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 shadows, gradients, and clichéd copy. This Skill enforces a warm monochrome palette, editorial serif headings, and flat bento-grid components so generated code follows a consistent premium aesthetic.

What design system does this minimalist UI protocol use?▼

It uses a warm monochrome palette (white or bone backgrounds, off-black text, #EAEAEA borders) with muted pastel accents for tags and badges. Typography combines geometric sans-serifs, editorial serifs with tight tracking, and monospace for code.

Can I use this with Tailwind CSS and React?▼

Yes, the protocol explicitly targets HTML, React, Tailwind, and Vue output. It references Tailwind utilities like py-24 spacing and max-w-4xl containers while overriding defaults such as shadow-md and rounded-full.

Which fonts and icon libraries are allowed?▼

Allowed fonts include SF Pro Display, Geist Sans, Newsreader, Playfair Display, and Geist Mono. Icons should come from Phosphor Icons (Bold or Fill) or Radix UI Icons; Inter, Roboto, Lucide, and Feather are banned.

What animations are permitted in this design system?▼

Only subtle transform and opacity animations: scroll-entry fades using IntersectionObserver, staggered reveals with 80ms cascade delays, and optional slow ambient gradient blobs. Layout-triggering properties like top, left, width, and height must not be animated.

Related Skills

Explore More Design & Creative Skills→
langgeniuslanggenius

taste-skill

Generates non-templated frontend designs for landing pages, portfolios, and redesigns using brief inference and design dials.

Official
Advanced
Skyvern-AISkyvern-AI
22.7k

testing

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

Official
Intermediate
ExpeditoJExpeditoJ

aiox-ux-design-expert

Automate UX/UI design tasks from research to quality assurance.

Community
Advanced
frankxaifrankxai

shadcn/ui Patterns

Build shadcn/ui interfaces with FrankX glassmorphic styling and accessibility patterns.

Community
Intermediate