oiloil-ui-ux-guide

oiloil-ui-ux-guide is a skill for Claude Code, Codex from eric861129/SKILLS_All-in-one. It costs 121 tokens per session (1,919 once invoked), scanned A, original, MIT.

A guide for designing and reviewing clean interfaces for websites and apps. UI means the visible controls and layout; UX means how easily people complete tasks.

In plain words
What is it for?
Giving design advice or reviewing screens, forms, dashboards, lists, and other interface flows.
Why use it?
It helps find confusing layouts, weak visual hierarchy, and missing interaction feedback before they affect users.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Giving design advice or reviewing screens, forms, dashboards, lists, and other interface flows.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/eric861129/skills_all-in-one/oiloil-ui-ux-guide
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add eric861129/SKILLS_All-in-one --skill oiloil-ui-ux-guide
Clone the repo
git clone --depth 1 https://github.com/eric861129/SKILLS_All-in-one

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for oiloil-ui-ux-guide

README.md
[![agentmods](https://agentmods.dev/badge/skills/eric861129/skills_all-in-one/oiloil-ui-ux-guide/github.svg)](https://agentmods.dev/skills/eric861129/skills_all-in-one/oiloil-ui-ux-guide)
Your own site
<a href="https://agentmods.dev/skills/eric861129/skills_all-in-one/oiloil-ui-ux-guide"><img src="https://agentmods.dev/badge/skills/eric861129/skills_all-in-one/oiloil-ui-ux-guide/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for oiloil-ui-ux-guide

Your own site · 80×15
<a href="https://agentmods.dev/skills/eric861129/skills_all-in-one/oiloil-ui-ux-guide"><img src="https://agentmods.dev/badge/skills/eric861129/skills_all-in-one/oiloil-ui-ux-guide.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 121 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,919 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00121 $0.01919
Opus 5 $0.00060 $0.00959
Sonnet 5 $0.00024 $0.00384
Haiku 4.5 $0.00012 $0.00192

Measured 13d ago against content hash 2a7d66f8edca, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

oiloil-ui-ux-guide scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 13d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.agent/skills/oiloil-ui-ux-guide/SKILL.md · 139 lines

How it starts

The opening of the file, as written. The whole thing — 139 lines — stays where its author put it; the contents beside it link to each section on GitHub.

OilOil UI/UX Guide (Modern Minimal)

Use this skill in two modes:

  • guide: Provide compact principles and concrete do/don't rules for modern clean UI/UX.
  • review: Review an existing UI (screenshot / mock / HTML / PR) and output prioritized, actionable fixes.

Keep outputs concise. Prefer bullets, not long paragraphs.

Workflow (pick one)

1) guide workflow

  1. Identify the surface: marketing page / dashboard / settings / creation flow / list-detail / form.
  2. Identify the primary user task and primary CTA.
  3. Apply the system-level guiding principles first (mental model and interaction logic).
  4. Then apply the core principles below (start from UX, then refine with CRAP).
  5. If icons are involved: apply references/icons.md.

2) review workflow

  1. State assumptions (platform, target user, primary task).
  2. List findings as P0/P1/P2 (blocker / important / polish) with short evidence.
  3. For each major issue, label the diagnosis: execution vs evaluation gulf; slip vs mistake (see references/design-psych.md).
  4. Propose fixes that are implementable (layout, hierarchy, components, copy, states).
  5. End with a short checklist to verify changes.

Use references/review-template.md when you need a stable output format.

Non-negotiables (hard rules)

  • No emoji used as icons (or as UI decoration). If an emoji appears, replace it with a proper icon.
  • Icons must be intuitive and refined. Use a single consistent icon set for the product (avoid mixing styles).
  • Minimize copy by default. Add explanatory text only when it prevents errors, reduces ambiguity, or improves trust.

System-Level Guiding Principles

Apply these as first-order constraints before choosing components or page patterns. Full definitions and review questions: references/system-principles.md.

Key principles: concept constancy · primary task focus · UI copy source discipline · state perceptibility · help text layering (L0–L3) · feedback loop closure · prevention + recoverability · progressive complexity · action perceptibility · cognitive load budget · evolution with semantic continuity.

Read the full file on GitHub · 139 lines

Files

What ships with it

6 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 13d ago First seen · 139 lines · 121 tokens per session scan A 2a7d66f8edca

Subscribe to this mod's changes

oiloil-ui-ux-guide is a skill published in the GitHub repository eric861129/SKILLS_All-in-one (52 stars, last pushed 4mo ago), licensed MIT. It adds 121 tokens to every session and 1,919 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

fireworks-tech-graph

Create technical diagrams such as software architecture, data flow, flowcharts, sequence diagrams, C4 reviews, cloud deployments, event streams, observability investigations, agent/memory systems, UML, ER, network topology, timelines, and technical concept maps, then export SVG, PNG, focused semantic SVG-to-GIF…

yizhiyanhua-ai/fireworks-tech-graph · 128 tokens

lamina-design

Shape intended product behavior in Lamina's transactional graph when explicitly invoked as lamina-design or when passive implementation preparation reports design gaps. Publish an implementation-ready graph version without editing application source.

aryaniyaps/lamina · 41 tokens

lamina

Product design skill for developers who build with AI coding agents. Use when you need to know what to build before prompting your agent — domain model, workflows, edge cases, product states, and UX gaps handled upfront. Works alongside Cursor, Claude Code, Codex, Gemini, Pi. Any stack, any UI library. Do NOT use for…

aryaniyaps/lamina · 82 tokens

ppt-orchestrator

A dispatcher for creating presentations, slide decks, long images, and weekly reports. It chooses a visual style and output format, then sends the work to a more specialised add-on.

huangrichao2020/pretty-skills · 160 tokens

zhongguose-html-skill

An HTML-only presentation system using traditional Chinese colours and Chinese-style visual design. It helps organise source material into a report structure and produces a self-contained HTML file with its assets.

huangrichao2020/pretty-skills · 232 tokens

pneuma-preferences

Persistent user preference memory across sessions. Consult this skill BEFORE making any design, style, or aesthetic decisions — choosing colors, themes, layouts, fonts, tone of voice, content density, or visual direction. Also consult when starting a new creative task in any mode, when the user corrects your style…

pandazki/pneuma-skills · 100 tokens