skills.rest
EliasOulkadi
EliasOulkadiCOMMUNITY
Explore all skills by this author →
𝕏@EliasOulkadiGitHub

taste-minimalist

Generate warm monochrome editorial web UI guidance with typographic hierarchy and bento-grid layouts.

110|14|Updated May 12, 2026
Search Tags:#typography#frontend#design system#bento grid#minimalist design#editorial ui#warm monochrome
One-click install
npx skills add https://github.com/EliasOulkadi/shokunin --skill taste-minimalist-eliasoulkadi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: taste-minimalist
Source: https://github.com/EliasOulkadi/shokunin/tree/main/.pack/skills/taste-minimalist
Command: npx skills add https://github.com/EliasOulkadi/shokunin --skill taste-minimalist-eliasoulkadi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It standardizes how to build clean editorial-style interfaces so you avoid “template-looking” UI choices like heavy shadows, gradients, generic icon sets, and mismatched typography.

Core Features & Use Cases

  • Warm monochrome design system: Establishes off-black text, 1px borders, canvas/surface colors, and muted pastel accents for tags and status states.
  • Editorial typographic hierarchy: Specifies serif headline contrast, tight tracking/line-height, and monospace styling for code/keystrokes.
  • Bento-grid UI layout protocol: Defines asymmetrical CSS grid rules, padding, label placement, and ultra-flat components for document-like pages.
  • Quiet motion and mobile resilience: Enforces scroll-entry reveals with IntersectionObserver and includes prefers-reduced-motion guidance, plus mobile single-column collapse rules.

Quick Start

Use taste-minimalist to redesign your product’s settings or documentation page into a left-aligned, warm monochrome editorial layout with bento tiles, 1px borders, muted pastel badges, and quiet scroll-entry reveals.

Frequently Asked Questions about taste-minimalist

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

FAQPage Schema
How do I build an editorial-style minimalist web UI without heavy shadows or gradients?▼

Build an editorial-style minimalist web UI by enforcing warm monochrome off-black text, 1px borders, and bento-grid layouts while banning gradients, heavy shadows, and emojis. This approach establishes premium typographic hierarchy using serif headlines and muted pastel accents for status states.

What is a bento-grid layout protocol for document-style frontend pages?▼

A bento-grid layout protocol for document-style frontend pages defines asymmetrical CSS grid rules, padding, label placement, and ultra-flat components. It creates clean editorial structures by relying on 1px borders rather than drop shadows for visual separation.

Can I use warm monochrome typography rules for settings and component systems?▼

Yes, you can apply warm monochrome typography rules to settings and component systems by specifying serif headline contrast, tight tracking, and monospace styling for code. This ensures clean, premium-looking interfaces across document-style pages and component architectures.

How do I add quiet motion to minimalist design without breaking mobile layouts?▼

Add quiet motion to minimalist design by enforcing scroll-entry reveals with IntersectionObserver and respecting prefers-reduced-motion guidance. Maintain mobile layout integrity by applying single-column collapse rules to bento grids on smaller screens.

When should I avoid rounded-full components and generic placeholders in frontend design systems?▼

Avoid rounded-full components, generic placeholders, and emojis in frontend design systems when standardizing clean editorial-style interfaces. These banned style constraints prevent template-looking UI choices and ensure a restrained, premium typographic hierarchy.

Related Skills

Explore More Design & Creative Skills→
nassimbfnassimbf
3

minimalist-ui

Define a minimalist UI design system with warm monochrome palette and typographic hierarchy.

Community
Advanced
fm-dev-mxfm-dev-mx

animation-motion

Create GPU-accelerated web animations using transform and opacity with reduced-motion support.

Community
Intermediate
lichong-alichong-a

ric-minimalist-ui

Generate ultra-minimalist document-style web interfaces with warm monochrome palettes and bento-grid layouts.

Community
Advanced
JamesOliveira1JamesOliveira1

minimalist-ui

Define minimalist editorial UI guidelines with warm monochrome palettes and typographic hierarchy.

Community
Advanced