OilOil UI/UX Guide

Skill Verified Active

Run a structured UI/UX consultation to either (a) co-design a project-specific design system and emit `design-spec.md`, (b) review an existing UI with prioritized fixes, or (c) emit compact do/don't rules for a surface. Triggers when the user wants to define / build / refine a design system or design tokens, asks for a design spec, asks for a full UI review of a screen / mockup / PR, or wants design rules for a surface type. Do NOT trigger for narrow one-off questions ("is this color OK?", "should this button be larger?") — answer those directly without invoking the consultation flow.

Purpose

To provide structured, collaborative UI/UX design consultation, helping users create or refine design systems and receive actionable feedback on their interfaces.

Features

Structured UI/UX consultation
Design system co-design
UI review with prioritized fixes
Generation of design rules
Code analysis for design token extraction
Interactive interview-based workflow

Use Cases

Defining a project-specific design system
Reviewing an existing UI for prioritized fixes
Generating compact do/don't rules for a surface type
Refining design tokens or visual language
Getting expert guidance on UI/UX best practices

Non-Goals

Answering narrow, one-off design questions directly
Imposing a single aesthetic preference without user input
Replacing user's existing design decisions without consultation
Triggering for requests not related to UI/UX design systems or reviews

Practices

Design system development
UI/UX review
Design consultation
User-centered design

Installation

npx skills add oil-oil/oiloil-ui-ux-guide

Runs the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.

Quality Score

Verified

95 /100

Analyzed about 23 hours ago

Trust Signals

Last commit26 days ago

GitHub owner oil-oil

Stars65

LicenseApache-2.0

Status

View Source

Similar Extensions

Ui Ux Pro Max

100

UI/UX design intelligence with searchable style, palette, typography, and chart databases. Use when designing UI components, choosing colors/fonts, reviewing code for UX issues, building landing pages, or implementing responsive layouts.

Skill

spartan-stratos

A11y Audit

100

Accessibility audit covering WCAG 2.2, contrast, focus, keyboard, screen reader, touch targets

Skill

Aboudjem

UI UX Pro Max Brand Skill

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

Skill

nextlevelbuilder

Theme Builder

Build light/dark theme from scratch or improve existing. Complete surface, text, and interactive color system

Skill

Aboudjem

Figma Generate Library

100

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

Skill

figma

Refactor Plan

100

Prioritized redesign action plan covering quick wins, medium effort, major rework

Skill

Aboudjem