Does this skill provide actual CSS implementation patterns?

Yes, it enforces specific CSS patterns for 4px grids, custom shadows, transition timings, and layout structures to ensure production-grade quality.

How does this skill handle dark mode?

It provides specific guidance on adjusting borders, semantic colors, and contrast levels to ensure dark mode interfaces feel as premium and legible as light mode.

Can I use this for mobile application development?

While the documentation focuses on web dashboards and SaaS interfaces, the core principles of spacing, hierarchy, and precision are applicable to any modern UI framework.

What is the '4px Grid' mentioned in the features?

It is a spacing system where all gaps, padding, and margins are multiples of 4px, creating a mathematically consistent and visually harmonious layout.

What design styles does this skill support?

It supports multiple aesthetic directions including high-density precision (Linear-style), warm approachability (Notion-style), and sophisticated enterprise trust (Stripe-style).

Elite UI Design Principles

Name: Elite UI Design Principles
Author: boku-miyaji

byboku-miyaji

デザインツール

Enforces high-fidelity, minimalist design systems inspired by industry leaders like Linear, Notion, and Stripe for professional web applications.

概要

This skill transforms Claude into a high-end UI designer by enforcing rigorous design standards for enterprise software, SaaS dashboards, and modern web applications. It moves beyond generic styling to implement sophisticated layouts using 4px grid systems, intentional color foundations, and typography patterns used by top-tier tech companies. Whether building data-dense admin panels or approachable collaboration tools, this skill ensures every pixel is intentional, every shadow is layered with purpose, and the overall aesthetic reflects Jony Ive-level precision and craftsmanship.

主な機能

Context-driven design personality selection for diverse product types
Strict 4px base grid enforcement for consistent layout and spacing
Professional elevation strategies using layered shadows and surface shifts
0 GitHub stars
Advanced typography hierarchy and specialized monospace data styling
Guidelines for custom-built controls to replace unstyled native elements

ユースケース

Developing collaborative SaaS interfaces that balance warmth and approachability with professional polish
Building high-density financial dashboards that require trust, clarity, and precision
Creating minimalist developer tools with Linear-inspired aesthetics and monochrome palettes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add boku-miyaji/claude_dev design-principles

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要