skills.rest
tamagusko
tamaguskoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

minimalist-ui

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

Updated Oct 7, 2022
Search Tags:#typography#web design#tailwind#editorial#frontend design#bento grid#minimalist ui
One-click install
npx skills add https://github.com/tamagusko/linux-cfg --skill minimalist-ui-tamagusko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: minimalist-ui
Source: https://github.com/tamagusko/linux-cfg/tree/main/dotfiles/claude/skills/minimalist-ui
Command: npx skills add https://github.com/tamagusko/linux-cfg --skill minimalist-ui-tamagusko

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 output follows a refined editorial, document-style visual language. ## Core Features & Use Cases - Design Constraint Enforcement: Bans generic fonts (Inter, Roboto), heavy shadows, gradients, pill-shaped containers, emojis, and AI copywriting clichés. - Concrete Design System: Specifies exact typography stacks, a warm monochrome palette with muted pastel accents, 1px border rules, bento-grid cards, buttons, badges, accordions, and keystroke micro-UIs. - Motion Guidelines: Defines 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 editorial serif hero headings, off-black body text, flat bento feature grids, and gentle fade-in animations instead of a generic template look. ## Quick Start Use the minimalist-ui skill to build a landing page for a note-taking app 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, heavy Tailwind shadows, gradients, and clichéd copy. This Skill enforces a warm monochrome palette, editorial serif headings, 1px borders, and flat bento grids so output avoids the standard SaaS template look.

What design system does this minimalist UI protocol use?▼

It uses a warm monochrome palette (#FFFFFF, #F7F6F3, #111111) with muted pastel accents, geometric sans and editorial serif font stacks, 1px #EAEAEA borders, 8-12px border radii, and generous macro-whitespace between sections.

Does this work with Tailwind CSS and React?▼

Yes. The execution protocol explicitly targets HTML, React, Tailwind, and Vue. It references Tailwind utilities like py-24, max-w-4xl, and text-xs while overriding default shadows and radii to match the flat editorial aesthetic.

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.

How are animations handled without hurting performance?▼

Animations use only transform and opacity, triggered by IntersectionObserver rather than scroll listeners. Scroll entries use translateY(12px) with a 600ms cubic-bezier ease, and staggered reveals use index-based animation delays.

When should I not use this minimalist design protocol?▼

Avoid it when a project requires vibrant branding, rich color systems, playful illustration styles, or dense data-visualization dashboards. The protocol deliberately restricts color, shadows, and decoration, which conflicts with expressive or maximalist brand identities.

Related Skills

Explore More Design & Creative Skills→
Final-Project-solicode-WebsiteeFinal-Project-solicode-Websitee

architecte-contenu

Generate sitemap, content strategy, and wireframe markdown files for web projects.

Official
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
MayaDispelerMayaDispeler
3

content-strategy

Provide UX writing and information hierarchy guidelines for UI copy and SEO.

Community
Advanced
partme-aipartme-ai
610

ant-design-vue

Guide Ant Design Vue component usage for Vue 3 projects.

Official
Intermediate