Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Oil UI — Interface Design & Review Workflow

A structured workflow for designing, polishing, and reviewing web/app/dashboard interfaces, from direction exploration to screenshot-backed sign-off.

Design & UIIntermediate★ 1,009⑂ 56AI score 9/10Last updated: Oct 7, 2026

What it does

  • Derives a design "north star" from the product category, the hero of the first screen, and the brand — instead of defaulting to a generic model template.
  • Generates side-by-side style comparison pages so the user picks the direction, then tightens it with feedback.
  • Splits visual craft into on-demand reference docs (visual language, media, imagery, motion, scroll narrative, play/game feel) and loads only what's needed.
  • Enforces real evidence: run at the target viewport, capture states, 200% crops, and start/middle/end frames or recordings of motion.
  • Ships a dispatch protocol for an independent, context-free reviewer (10-point scoring) plus a delivery checklist: chosen direction, what was skipped, where the evidence files live.

Who it's for

  • Frontend engineers who want a repeatable design process rather than ad-hoc styling.
  • Anyone building landing, brand, or launch pages that need scroll-driven storytelling and motion.
  • Teams doing recurring UI polish or UI/UX reviews on an existing product.

Example uses

  1. "Give me three distinct hero directions for this SaaS landing page" → direction cards plus a comparison page to choose from.
  2. "Recreate this screenshot exactly" → treats the reference as the visual baseline, no stylistic drift.
  3. "Review our checkout UI" → read-only diagnosis with evidence screenshots and prioritized fixes.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/oil-oil/oil-ui/HEAD/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the SKILL.m folder from the GitHub repo oil-oil/oil-ui into my ~/.claude/skills/oil-ui/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/oil-oil/oil-ui.git ~/.claude/skills/oil-ui

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Create the skills folder if needed: mkdir -p ~/.claude/skills
  3. Clone the repo: git clone https://github.com/oil-oil/oil-ui.git ~/.claude/skills/oil-ui
  4. Confirm SKILL.md plus the references/ and scripts/ folders are present.
  5. Restart Claude Code, then ask something like "use oil-ui to redesign this dashboard".
  6. (Optional) Set OIL_NO_UPDATE_CHECK=1 to skip the online version check; that check requires Python 3. Note the skill shows a one-time pointer to the paid oil-ui-pro edition.
View source on GitHub ↗License: MIT