Frontend UI UX Skill (oh-my-opencode)
A frontend UI and UX focused skill from the oh-my-opencode toolkit.
by AgentVoltv1.0.0Published 1y ago3 installs
Free to sign up · every skill included with AgentVolt Pro
Before & after
Same prompt, same agent — the only difference is the skill.
Prompt“Review this React component for UI and UX consistency issues”
Beforegeneric AI agent
I can take a look at the component and give some feedback. Generally you want to check things like color contrast, consistent spacing, responsive layout on mobile, clear labeling, and making sure interactions feel natural. Accessibility is important too. I'd need to actually see the code and understand what the component is supposed to do to give you specific recommendations. Do you have a particular concern about it?
Afterwith Frontend UI UX Skill (oh-my-opencode)
UI/UX REVIEW CHECKLIST COLOR & CONTRAST • Text-background contrast ratio: 4.8:1 (meets AA standard) • Link underline visibility: pass • Disabled states clearly differentiated: pass • Error message color not sole indicator: FAIL — needs icon + text SPACING & ALIGNMENT • Vertical rhythm: 8px baseline (consistent) • Margin/padding: 16px gaps between sections (consistent) • Component edge padding: 20px (exceeds mobile minimum of 16px) • Alignment grid: 4px subgrid (precise) TYPOGRAPHY • Heading hierarchy: H1 → H2 → Body text (correct) • Line height: 1.6 body, 1.3 headings (accessible) • Font size: 16px base (mobile-readable) • Font weight variation: 3 levels (heading, body, secondary) — IMPROVEMENT: add 1 more for emphasis RESPONSIVE LAYOUT • Mobile breakpoint: 320px+ (good) • Tablet: 768px+ (correct) • Desktop: 1024px+ (good) • Single-column on mobile: pass INTERACTION FEEDBACK • Hover states defined: yes • Focus states for keyboard nav: FAIL — add :focus-visible outline • Loading indicator: exists • Button press feedback (active state): yes FIXES TO APPLY 1. Add error icon + text pair (icon not sole indicator) 2. Add :focus-visible outline for keyboard nav 3. Add 1 intermediate font weight for emphasis text
About this skill
name: frontend-ui-ux-oh-my-opencode description: Use when A frontend UI and UX focused skill from the oh-my-opencode toolkit.
Frontend UI UX Skill (oh-my-opencode)
Provides Claude with a structured frontend UI and UX review and generation pass, part of a broader opencode workflow toolkit.
What you get
- SKILL.md covering UI and UX principles and review checklist.
Customize your output
- Adaptable to any frontend framework.
Example output
Improved UI and UX consistency in generated frontend code.
Best for
Developers wanting a UX gut check on AI generated interfaces.
SKILL.md preview
SKILL.md
---
name: frontend-ui-ux-oh-my-opencode
description: Use when reviewing or generating frontend UI and UX work, such as auditing a component's usability or producing structured design and interaction feedback.
version: 1.0.0
category: Design / Design and Frontend
author: AgentVolt
license: proprietary
tags:
- design
- design-and-frontend
- standard
---
# Frontend UI UX Skill (oh-my-opencode)
Runs a structured frontend UI/UX review and generation pass — interaction patterns, accessibility, visual consistency — not a generic design critique.
## When to use
… (sign up to view the full skill)Sign up to view, copy, and install the full skill
More design skills
View all Design skills →Mobile App UI Design Skill
Guides Claude in designing native feeling mobile app interfaces.
Design
Premium Frontend UI Skill
Pushes generated frontend UI toward a premium, polished visual style.
Design
Material 3 Skill
Teaches Claude Google Material 3 design system conventions.
Design
Expo Building Native UI Skill
Official Expo skill for building native feeling UI in Expo apps.
Design