oiloil-ui-ux-guide

by buildwithclaude

Modern, clean UI/UX guidance + review skill. Use when you need actionable UX/UI recommendations, design principles, or a design review checklist for new features or existing systems (web/app). Focus on CRAP (Contrast/Repetition/Alignment/Proximity) plus task-first UX, information architecture, feedback & system status, consistency, affordances, error prevention/recovery, and cognitive load. Enforce a modern minimal style (clean, spacious, typography-led), reduce unnecessary copy, forbid emoji as icons, and recommend intuitive refined icons from a consistent icon set.

v1.0.0New

#buildwithclaude

Unsigned, install at your own risk

Unverified

This skill has no cryptographic signature attached. We can't verify the contents match what the publisher intended.

Install this skill

Run this command in your terminal. No account required — it auto-detects your AI tool and installs the skill file.

npx @skills-hub-ai/cli install buildwithclaude-oiloil-ui-ux-guide

Or download directly:

Browse all CLI commands →

Setup by platform

Claude Code

~/.claude/skills/<skill>/SKILL.md

Setup guide →

Install

One-click setup for your editor

Run in your project root

npx @skills-hub-ai/cli install buildwithclaude-oiloil-ui-ux-guide --target claude-code

Instructions

This skill doesn’t include stateful context yet, instructions only. Learn about stateful skills.

Security

Loading security scan...

Reviews (0)

View full changelog & diffs →

Browse all →

ops-firesProduction incidents dashboard. Reads ECS health, Sentry errors, CI failures. Offers to dispatch fix agents for active fires.0 installs gsd:autonomousRun all remaining phases autonomously — discuss→plan→execute per phase0 installs resemble-detectDeepfake detection and media safety — detect AI-generated audio, images, video, and text, trace synthesis sources, apply watermarks, verify speaker identity, and analyze media intelligence using Resemble AI0 installs gsd:plan-milestone-gapsCreate phases to close all gaps identified by milestone audit0 installs fund-operationsCompute fund KPIs (TVPI, DPI, IRR, MOIC), model carried interest and management fees, and generate LP quarterly update narratives. Triggered by: "/venture-capital-intelligence:fund-operations", "calculate fund KPIs", "what is my fund TVPI", "IRR calculation", "compute MOIC", "LP report", "quarterly update draft", "carried interest calculation", "management fee calculation", "fund performance report", "write my LP update", "how is my fund performing", "what is my DPI", "fund returns analysis", "model my carry", "how much carry do I earn", "portfolio performance summary", "generate investor update". Claude Code only. Requires Python 3.x.0 installs gsd:ultraplan-phase[BETA] Offload plan phase to Claude Code's ultraplan cloud — drafts remotely while terminal stays free, review in browser with inline comments, import back via /gsd:import. Claude Code only.0 installs

More from buildwithclaude

View source →

feature-specCreates a complete product feature specification with acceptance criteria, scope, dependencies, and risks. Delegates to the Prometeo (PM) agent.0 installs review-findingsAddresses and fixes findings from a QA code review. Reads the review report, fixes critical and warning issues, and prepares for re-verification. Delegates to the Forja (Dev) agent.0 installs security-auditDeep security audit covering OWASP Top 10, authentication, authorization, data protection, dependency vulnerabilities, and secrets scanning. Delegates to the Centinela (QA) agent.0 installs sdd-pipeline references파이프라인 에이전트(specifier, planner, scheduler, builder, verifier, committer)가 참조하는 규칙/스키마 문서 모음.0 installs work-statusShows WORK progress and TASK status. Use when the user asks about WORK list, WORK progress, TASK status, or pipeline status (e.g., "WORK list", "WORK-01 progress", "show status").0 installs code-healthScans the codebase for dead code, tech debt, outdated dependencies, and code quality issues. Delegates to the Centinela (QA) agent.0 installs

More UX skills

Browse category →

design-claudeHTML-first hi-fi design skill: interactive prototypes, slide decks, animation demos, design variant exploration, visual direction advising, and expert critique. Triggers: make a prototype, design demo, interactive prototype, HTML presentation, animation demo, design variants, hi-fi design, UI mockup, prototype, design exploration, make an HTML page, make a visualization, app prototype, iOS prototype, mobile app mockup, export MP4, export GIF, 60fps video, design style, design direction, design philosophy, color scheme, visual style, recommend style, pick a style, make it look good, review, does this look good, review this design. Core capabilities: Junior Designer workflow (show assumptions+reasoning+placeholders first, then iterate), anti-AI-slop checklist, React+Babel best practices, Tweaks variant switching, Speaker Notes presentation, Starter Components (slide shell/variant canvas/animation engine/device frames), App prototype rules (default real images from Wikimedia/Met/Unsplash,17 installs responsiveAudit and fix responsive design issues across all breakpoints. Scans for fixed widths that cause mobile overflow, missing media query variants, non-responsive images, undersized touch targets below 48px, unreadable typography, and horizontal scroll violations. Auto-detects framework (Flutter, Tailwind, React, Vue, Angular) and responsive system, then fixes layouts with proper flex/grid, clamp-based fluid typography, responsive image sizing, and adequate touch target spacing. Verifies every screen at mobile (375px), tablet (768px), desktop (1280px), and wide (1920px). Use when you need to fix mobile layout bugs, audit responsive breakpoints, fix overflow issues, ensure touch targets meet accessibility minimums, or verify no horizontal scroll at any viewport width.13 installs design-animateAdd purposeful motion to interfaces using modern CSS — scroll-driven animations, view transitions, @starting-style, and GPU-accelerated transforms. Zero JS animation libraries needed. Supports web and Flutter. Use when: 'add animation', 'animate', 'add motion', 'transitions', 'scroll animation', 'page transitions', 'loading animation', 'micro-interactions'.11 installs design-auditComprehensive autonomous design quality audit across accessibility (WCAG 2.2), performance, theming, responsive/adaptive design, and anti-pattern detection. Produces a prioritized report with severity ratings and fix recommendations. Use when: 'audit design', 'check accessibility', 'a11y audit', 'design review', 'UI quality check', 'WCAG audit', 'design quality'.10 installs design-polishFinal autonomous quality pass before shipping. Fixes alignment, spacing, consistency, typography hierarchy, color harmony, motion timing, and every micro-detail that separates good from great. The last 10% that takes 90% of the craft. Use when: 'polish the UI', 'make it pixel perfect', 'final design pass', 'fix visual inconsistencies', 'tighten up the design', 'design QA', 'visual cleanup'.9 installs design-systemExtract and formalize a design system from existing UI code. Scans for every hardcoded color, font size, spacing value, border radius, and shadow across the codebase, deduplicates near-identical values, generates framework-appropriate tokens (CSS custom properties, Tailwind config, Flutter ThemeData, SCSS variables), builds a component inventory with token coverage ratings, and replaces all hardcoded values with token references. Use when you need to create design tokens, consolidate inconsistent styles, audit component consistency, replace magic numbers with named values, or set up a shared design language across a project.9 installs

Frequently asked questions about oiloil-ui-ux-guide

What does the oiloil-ui-ux-guide skill do?

How do I install the oiloil-ui-ux-guide skill?

Run `npx @skills-hub-ai/cli install buildwithclaude-oiloil-ui-ux-guide` from your terminal. The CLI writes the SKILL.md to the correct location for your AI tool (e.g. ~/.claude/skills/buildwithclaude-oiloil-ui-ux-guide/ for Claude Code or ~/.cursor/skills/ for Cursor with --target cursor) and adds it to your project's .skills.json lockfile.

Which AI tools does oiloil-ui-ux-guide work with?

oiloil-ui-ux-guide runs in Claude Code. It follows the open Agent Skills standard (SKILL.md), so the same skill works in every supported tool without modification.

Is the oiloil-ui-ux-guide skill free?

Yes. Every skill on skills-hub.ai is free and open-source. There are no premium tiers, paywalls, or usage limits. You only pay for whatever AI assistant you're already using.

How do I use oiloil-ui-ux-guide after installing it?

In Claude Code, type `/buildwithclaude-oiloil-ui-ux-guide` (or whatever slash command the skill registers) and the AI follows the skill's instructions immediately. You can also reference it by name in natural language, your AI loads the skill into context when relevant.

Can I share the oiloil-ui-ux-guide skill with my team?

Yes. Commit your project's .skills.json lockfile and teammates run `npx @skills-hub-ai/cli install` (no args) to install every skill at the exact version you pinned. Organization-scoped installs work via skills-hub.ai organizations.