Does the skill recommend specific UI assets?

It provides guidance on choosing consistent icon sets and typography, but its primary function is providing structural and stylistic recommendations rather than raw assets.

Does this skill work for both web and mobile apps?

Yes, the guidance provided is applicable to both web and mobile application interfaces, focusing on universal principles of usability and visual hierarchy.

How do I install the OilOil UI/UX Guide?

You can add it to your Claude Code environment by running the command: npx skills add oil-oil/oiloil-ui-ux-guide.

How does the 'review' mode help developers?

The review mode analyzes your current interface or proposed design and provides a prioritized list (P0, P1, P2) of fixes based on design psychology and usability standards.

OilOil UI/UX Guide

Name: OilOil UI/UX Guide
Author: davepoon

bydavepoon

•

2,733

•

Design Tools

Provides expert UI/UX design guidance and automated interface reviews to help developers build modern, minimal, and highly usable web and mobile applications.

The OilOil UI/UX Guide is a specialized Claude Code skill designed to bridge the gap between development and design. It empowers developers to build production-grade interfaces by applying industry-standard principles like CRAP (Contrast, Repetition, Alignment, Proximity) and cognitive load reduction. The skill features two distinct modes: a 'guide' mode that provides proactive 'do and don't' rules for clean, typography-led aesthetics, and a 'review' mode that generates prioritized fix lists (P0/P1/P2) for existing features based on design psychology and usability heuristics.

Key Features

01Enforcement of modern minimal styles with a focus on typography and space

022,733 GitHub stars

03Actionable guidance on CRAP (Contrast, Repetition, Alignment, Proximity) principles

04Prioritized P0/P1/P2 design reviews with psychological diagnosis

05Task-first UX patterns and information architecture optimization

06Expert recommendations for icon consistency and error prevention/recovery

Use Cases

01Refining an existing CSS framework to align with modern, minimal design trends

02Conducting a usability audit on a new feature before it goes to production

03Styling a complex dashboard to reduce cognitive load and improve navigation

Key Features

01Enforcement of modern minimal styles with a focus on typography and space

022,733 GitHub stars

03Actionable guidance on CRAP (Contrast, Repetition, Alignment, Proximity) principles

04Prioritized P0/P1/P2 design reviews with psychological diagnosis

05Task-first UX patterns and information architecture optimization

06Expert recommendations for icon consistency and error prevention/recovery

Use Cases

01Refining an existing CSS framework to align with modern, minimal design trends

02Conducting a usability audit on a new feature before it goes to production

03Styling a complex dashboard to reduce cognitive load and improve navigation