skills.rest
rogerznts
rogerzntsCOMMUNITY
Explore all skills by this author →
GitHub

anvil-ui-minimalist

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

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

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 minimalism 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: Defines exact rules for bento grids, buttons, tags, accordions, keystroke UIs, and faux-OS window chrome, including border, radius, and spacing values. - Typography & Motion System: Prescribes serif/sans/mono font stacks, typographic contrast, and subtle scroll-entry and hover micro-animations 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 staggered fade-in animations without manual design cleanup. ## Quick Start Ask the AI to build a landing page or dashboard UI following the minimalist editorial protocol defined in this skill.

Frequently Asked Questions about anvil-ui-minimalist

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

FAQPage Schema
How do I generate minimalist UI code with Tailwind CSS?▼

Request the interface and the protocol applies its rules automatically: 1px #EAEAEA borders, 8-12px border radius, off-black text, generous py-24 to py-32 section spacing, and max-w-4xl content width. The output requires no manual design adjustments.

What fonts and colors does a minimalist editorial design use?▼

It pairs a geometric sans like Geist Sans or Helvetica Neue with an editorial serif like Newsreader or Playfair Display, plus Geist Mono for code. Colors use white or warm off-white backgrounds, #111111 body text, and desaturated pastel accents.

Which UI elements are banned by this design protocol?▼

Banned elements include 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 AI copywriting clichés like Elevate or Seamless.

Can I use this protocol with React or Vue components?▼

Yes, the execution protocol explicitly covers HTML, React, Tailwind, and Vue output. The same typography, color, component, and animation rules apply regardless of the framework chosen.

How should scroll animations be implemented for minimalist sites?▼

Use IntersectionObserver with translateY(12px) and opacity transitions over 600ms, never window scroll listeners. Animate only transform and opacity, and stagger list items with an 80ms cascade delay per index.

Related Skills

Explore More Design & Creative Skills→
Tea-4-LifeTea-4-Life

frontend-design

Create production-grade frontend interfaces with cohesive design systems and accessible tokens.

Official
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
Gito125Gito125

polish

Reviews and fixes alignment, spacing, interaction states, and consistency issues before shipping UI work.

Community
Intermediate
PostalocityPostalocity
1

ckm:ui-styling

Integrate shadcn/ui with Tailwind CSS to enforce design tokens and CSS variable theming.

Official
Advanced