102.7K+Download
Skip to the usage guide
minimalist-uiby Leonxlnx

Minimalist UI Skill.

A Claude Code and Codex skill for UI design: clean, monochrome, editorial-style interfaces.

  • Web & UI
  • UI code
Download OpenDesignView usage guide
Leonxlnx/taste-skill · skills/minimalist-skill/SKILL.mdSKILL.md
--- name: minimalist-ui description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows. --- ## 2. Absolute Negative Constraints (Banned Elements) ## 3. Typographic Architecture ## 4. Color Palette (Warm Monochrome + Spot Pastels) ## 5. Component Specifications ## 6. Iconography & Imagery Directives ## 7. Subtle Motion & Micro-Animations
Front matter and section headings read from the upstream file on 2026-09-14 · 7,896 characters in full

01 What it does

What the minimalist-ui Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill generates ultra-minimalist, document-style web interfaces inspired by premium workspace platforms. It enforces a warm monochrome palette with off-white and charcoal tones, bespoke typographic hierarchies using editorial serifs and geometric sans-serifs, and flat bento-grid layouts with muted pastel accents.

It favors specific type families, icons, thin borders, limited-radius cards and quiet motion while rejecting many generic SaaS defaults. The source bans prominent gradients but later permits faint ambient gradients, and recommends shadow transitions despite a transform/opacity-only rule; these need deliberate resolution in implementation.

What it produces

  • Frontend code in HTML, React, Tailwind, or Vue reflecting the high-end, uncluttered, editorial aesthetic natively
  • Layouts with bento-grid asymmetrical CSS Grid structures and generous macro-whitespace
See the example prompt ↗

How It Works

  1. 01
    Establish macro-whitespace First

    Use massive vertical padding between sections, specifically py-24 or py-32 in Tailwind units.

  2. 02
    Constrain Content Width

    Limit main typography content to max-w-4xl or max-w-5xl to maintain editorial proportions.

  3. 03
    Apply Typographic Hierarchy and Monochromatic Variables

    Immediately set custom fonts and color variables following the warm monochrome palette specifications.

  4. 04
    Enforce Border Standards

    Every card, divider, and border must use exactly 1px solid #EAEAEA.

  5. 05
    Add scroll-entry Animations

    Apply animations to all major content blocks using IntersectionObserver, never window scroll listeners.

  6. 06
    Ensure Visual Depth

    Sections need depth through imagery, ambient gradients, or subtle textures rather than empty flat backgrounds.

02 Find your fit

When to Use the minimalist-ui Skill

Use the minimalist-ui skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Creating highly refined, ultra-minimalist, document-style web interfaces analogous to top-tier workspace platforms
  • Interfaces requiring extreme typographic contrast and premium font selection to establish an editorial feel
  • Designs needing asymmetrical bento box feature grids with generous internal padding of 24px to 40px
  • Projects requiring subtle, invisible motion that feels sophisticated with scroll-entry animations using IntersectionObserver

Know the Boundaries

  • Generic SaaS design trends with primary colored backgrounds for large elements or sections
  • Bright gradients, neon and pronounced glass effects conflict with its restrained style. The source nevertheless permits very faint ambient gradients and navbar blur, so its initial ban is not absolute.
  • Interfaces using pill shapes (rounded-full) for large containers, cards, or primary buttons
  • Content requiring emojis in any form or generic placeholder names like John Doe or Acme Corp

What to Provide

  • Page, content and projectProvide the page or component to build, real text and data, the implementation stack, and any existing font or design-system constraints. This is an opinionated restyling direction, not a neutral default for every brand.

03 Inside the skill

Rules the minimalist-ui Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Banned Typefaces

    Never use Inter, Roboto, or Open Sans. Use SF Pro Display, Geist Sans, Helvetica Neue, or Switzer for body and UI instead.

  2. Banned Icon Libraries

    Do not use Lucide, Feather, or standard Heroicons. Use Phosphor Icons in Bold or Fill weights, or Radix UI Icons instead.

  3. Shadow Opacity Limit

    Do not use Tailwind's shadow-md, shadow-lg, or shadow-xl. Shadows must be practically non-existent or ultra-diffuse with opacity below 0.05.

  4. No Emojis Anywhere

    Do not use emojis in code, markup, text content, headings, or alt text. Replace with proper icons or clean SVG primitives.

  5. Banned Copywriting Phrases

    Do not use AI copywriting clichés: Elevate, Seamless, Unleash, Next-Gen, Game-changer, or Delve. Write plain, specific language instead.

  6. Body Text Color Constraint

    Body text must never be absolute black #000000. Use off-black or charcoal #111111 or #2F3437 with line-height of 1.6.

  7. Card Border Specification

    Cards must have exactly 1px solid #EAEAEA borders with crisp border-radius of 8px or 12px maximum.

  8. Animation Performance Requirement

    Animate exclusively via transform and opacity. Never use layout-triggering properties like top, left, width, or height.

04 Put it to work

Install minimalist-ui in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add minimalist-ui to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill minimalist-ui

Generic skills CLI form for skills/minimalist-skill/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Build a project dashboard using an asymmetrical bento-grid layout with the warm monochrome palette. Include feature cards with 1px solid #EAEAEA borders and 24px internal padding, a primary CTA button with #111111 background, status badges using pale blue and pale green pastels, and scroll-entry animations for each grid item. Use Geist Sans for body text and Instrument Serif for the hero heading. Add keystroke hints as <kbd> elements and ensure no Tailwind shadow utilities are used.

Editorial starter example based on the source workflow; not a recorded run.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Check type hierarchy, readable copy, monochrome surfaces and restrained pastel accents using the actual content.
  • Verify the specified thin borders and modest card radii without breaking mobile layout.
  • Test entry animations and reduced-motion behavior; ensure content remains visible if the animation cannot run.
  • Confirm font and image assets are available and replace placeholder photography before publication.

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill file
skills/minimalist-skill/SKILL.md Content checksum recorded at verification; commit ccbc156
License
MIT From LICENSE.
Repository stars
86,946 GitHub snapshot taken 2026-09-14 for the whole Leonxlnx/taste-skill repository, which contains 11 skills in this catalog. Not a rating or usage count for minimalist-ui.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Protocol OverviewIntroduces the directive for ultra-minimalist, document-style web interfaces with warm monochrome palette and flat architecture
  2. Absolute Negative Constraints (Banned Elements)Lists strictly forbidden design elements including Inter font, Lucide icons, heavy shadows, gradients, emojis, and copywriting clichés
  3. Typographic ArchitectureSpecifies font families, sizes, and hierarchy using geometric sans-serifs, editorial serifs, and monospace with tight tracking
  4. Color Palette (Warm Monochrome + Spot Pastels)Defines base colors including pure white, warm bone backgrounds, charcoal text, and four muted pastel accents
  5. Component SpecificationsDetails implementation for bento grids, buttons, tags, accordions, keystroke UIs, and faux-OS window chrome
  6. Iconography & Imagery DirectivesSpecifies Phosphor or Radix icons, monochromatic illustrations, desaturated photography, and subtle background treatments for depth
  7. Subtle Motion & Micro-AnimationsDefines scroll-entry reveals, hover states, staggered cascades, and ambient motion using transform and opacity only
  8. Execution ProtocolProvides step-by-step workflow for implementing the design system from whitespace to animations
The Skill's Own Description
“Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.”

Front-matter description from SKILL.md. The full file is about 7,896 characters. Read the full file on GitHub.

06 Before you install

Questions About the minimalist-ui Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Which fonts should I use instead of Inter or Roboto?

For body and UI text, use SF Pro Display, Geist Sans, Helvetica Neue, or Switzer. For hero headings and quotes, use Lyon Text, Newsreader, Playfair Display, or Instrument Serif with tight tracking. For code and keystrokes, use Geist Mono, SF Mono, or JetBrains Mono.

What icon libraries are recommended for this style?

Use Phosphor Icons in Bold or Fill weights, or Radix UI Icons for a technical, slightly thicker-stroke aesthetic. Do not use generic thin-line libraries like Lucide, Feather, or standard Heroicons. Standardize stroke width across all icons for consistency.

Minimalist UI

Run minimalist-ui on a Real UI Design Task.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill minimalist-ui