cuozg/ui-ux
skills/ui-ux/SKILL.md
UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
$ install --global
skillsauthnpx skillsauth add cuozg/oh-my-skills ui-uxInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 13, 2026, 2:46 AM141.7s5 files scanned
SKILL.md
- name:
- ui-ux
- description:
- UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
UI/UX Pro Max
Design intelligence for web and mobile. Searchable database of 67 styles, 96 palettes, 57 font pairings, 99 UX rules, 25 chart types across 13 stacks.
Action Router
| User Intent | Mode | |---|---| | "Build a landing page", "Create a dashboard" | Build → Steps 1–5 | | "Review my UI", "Check for UX issues" | Review → Run audits + checklist | | "Fix the contrast", "Improve this layout" | Fix → Search domain → apply Do pattern → re-check | | "What colors for fintech?", "Best font for SaaS?" | Lookup → Single search, return answer |
Build Mode
Step 1 — Extract: product type · style keywords · industry · stack (default: html-tailwind)
Step 2 — Design System:
python3 <skill-path>/scripts/search.py "<product_type> <industry> <keywords>" --design-system -p "Project Name"
# Persist: add --persist → creates design-system/MASTER.md + design-system/pages/
Step 3 — Domain Searches: python3 <skill-path>/scripts/search.py "<keyword>" --domain <domain>
| Need | Domain |
|---|---|
| Style options | style |
| Chart recs | chart |
| UX rules | ux |
| Font alternatives | typography |
| Landing structure | landing |
| Icons | icons |
| React perf | react |
| Web a11y | web |
Step 4 — Stack: python3 <skill-path>/scripts/search.py "<keyword>" --stack html-tailwind
Stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose, astro, nuxtjs, nuxt-ui
Step 5 — Implement: Apply design system. Color hex → CSS vars/Tailwind. Font → <link>. Effects → utilities/raw CSS. Section order → component order. Avoid anti-patterns listed.
Review Mode
--domain uxaudit (animation, z-index, accessibility, touch)--domain webaudit (aria, focus, semantic HTML)--stack <detected>for framework-specific issues- Check Pre-Delivery Checklist
Report: [SEVERITY] Issue — Do: X, Don't: Y
Pre-Delivery Checklist
Visual: No emoji icons (SVG only) · consistent icon set · hover states no layout shift · brand logos verified
Interaction: cursor-pointer on all clickables · hover transitions 150–300ms · focus states visible
Contrast: Light mode 4.5:1 min · glass elements visible in light mode · borders visible both modes
Layout: Floating elements have edge spacing · no content behind fixed navbars · responsive at 375/768/1024/1440px · no horizontal scroll on mobile
A11y: All images have alt · form inputs have labels · color not sole indicator · prefers-reduced-motion respected
Common Rules
| Rule | Do | Don't |
|---|---|---|
| Icons | SVG (Heroicons/Lucide) | Emojis as UI icons |
| Hover | Color/opacity transitions | Scale transforms shifting layout |
| Cursor | cursor-pointer on clickables | Default cursor on interactive |
| Glass (light) | bg-white/80+ | bg-white/10 (invisible) |
| Text contrast | #0F172A (slate-900) | #94A3B8 (slate-400) |
| Navbar | top-4 left-4 right-4 spacing | Stuck to top-0 left-0 right-0 |
Related Skills
cuozg/unity-image-gen
tools
VerifiedTrustedCommunity
Generate Unity raster image assets through Unity MCP: game sprites, item art, backgrounds, UI icons, portraits, concept images, transparent cutouts, image edits, upscales, background removal, and Unity scene or Game View screenshots. Use when a Unity project needs image files imported under Assets or screenshots captured from the editor. Do not use for meshes, audio, animation, materials, gameplay code, UI Toolkit layout, or generic non-Unity image generation.
4SKILL.mdUpdated May 29, 2026
cuozg/unity-technical
tools
VerifiedTrustedCommunity
Create Unity technical solution documents from user requirements, feature ideas, bug goals, specs, or codebase problems. Use when the user asks for a technical approach, architecture, implementation strategy, solution options, feasibility analysis, system design, or "how should we build/fix this" for Unity runtime, Editor, tools, assets, data, UI, WebGL, SDKs, or production pipelines.
4SKILL.mdUpdated May 26, 2026
cuozg/unity-mcp-orchestrator
tools
VerifiedTrustedCommunity
Orchestrate Unity Editor via MCP (Model Context Protocol) tools and resources. Use when working with Unity projects through MCP for Unity - creating/modifying GameObjects, editing scripts, managing scenes, running tests, or any Unity Editor automation. Provides best practices, tool schemas, and workflow patterns for effective Unity-MCP integration.
4SKILL.mdUpdated May 21, 2026
cuozg/goal-todo
development
VerifiedTrustedCommunity
Convert a spec document into an implementation TODO list in the same spec folder. U se when the user says goal-todo, todo from spec, generate tasks from spec, turn this spec into todos, create implementation checklist, extract tasks, or asks to read a Docs/Specs design doc and produce what must be implemented. Includes UI/UX review and codebase investigation before writing the checklist. Do not use for implementing the tasks, creating new goal files, writing test cases, or verifying completed work.
4SKILL.mdUpdated May 21, 2026