Oh My Design

Use this skill when the user asks to design / mock up / prototype a UI, iterate on visual design, compare visual candidates, or explore visual approaches before implementation. Triggered by phrases like "design a UI", "mockup", "prototype the screen", "give me 3 visual options", "make it look like…", or any request that is fundamentally about look-and-feel rather than business logic. The skill writes React 18 prototypes under `<cwd>/.design/<slug>/`, hands the user a Tweaks panel to pick / iterate, and returns the selection plus a self-describing manifest the next agent can implement against.

6 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add favorPotato/oh-my-design --skill oh-my-design

Manual install

git clone --depth 1 https://github.com/favorPotato/oh-my-design.git /tmp/oh-my-design
mkdir -p ~/.claude/skills
cp -r /tmp/oh-my-design/. ~/.claude/skills/oh-my-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# oh-my-design

## Engineering rules

1. React 18 + standard TSX, esbuild on every shoot/serve. No UMD, no
   Babel-standalone, no importmap. Write it like a real React project.
2. Output to `<cwd>/.design/<YYYY-MM-DD-HHMM>-<slug>/` (flat, no nested
   `project/`). Never inside the skill directory, never in the user's
   source tree. `<slug>` is lowercase-kebab, ≤ 32 chars.
3. `shots/` is for the agent's eyes only. When implementing, read source
   (`variants.tsx` etc.), not screenshots.
4. `panel/` is the protocol core. `App.tsx` must `import { Tweaks } from
   '@panel/Tweaks'` and mount it via `createPortal` into `#tweaks`. Schema
   in `panel/types.ts`. `examples/` is structural reference (mount points,
   file naming, types) — **never copy variant content, theme tokens,
   frame/theme picker schema, or aesthetic choices from it.** Aesthetic
   direction comes from the user, not examples.

## Behavioral contracts

### Screenshot routing

Self-produced screenshots: **always delegate, never self-evaluate** (self-preference bias).
User-supplied images: read or delegate based on context.

### Candidate count

Match the task — reproducing a mockup → 1 (don't manufacture variants),
exploring directions → multiple, unclear → ask. Don't default to a number.

### Subagent role

Subagents may do any task **except L5 aesthetic judgment** — that belongs
to the user. LLMs have documented self-preference bias when judging their
own outputs (arXiv:2410.21819).

## Flow

### 1. Clarify

Read the full skill on GitHub

Details

Skill name: oh-my-design
Repository: favorPotato/oh-my-design
License: MIT
Repo updated: 29 April 2026

FAQ

What does the Oh My Design skill do?

How do I install the Oh My Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add favorPotato/oh-my-design --skill oh-my-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Oh My Design popular?

It lives in favorPotato/oh-my-design, which has 6 GitHub stars and 0 forks.

Related skills

Qiaomu Tldraw Skill

joeseesun/qiaomu-tldraw-skill

Official-first Qiaomu tldraw creation skill and workflow for building, editing, recreating, scripting, linting, testing, migrating, and packaging tldraw canvases or tldraw SDK apps with the official CLI and official LLM-friendly documentation. Use when the user asks to 画 tldraw、复刻成可编辑画布、制作流程图/信息图/课件、创建交互或动画画布、写 custom ShapeUtil/document script、检查 .tldraw 文件， or scaffold and migrate a tldraw React application using official sources only.

Frontend & Design

Interface Polish

Tsavsar/interface-polish

A checklist of concrete UI craft rules covering border radius, shadows, animation timing, typography, color tokens, accessibility, layout spacing, and microcopy. Use this skill whenever building, reviewing, or refining any web UI, component, page, landing page, or design system code, even if the user only says "make it look better", "polish this", "review my component", or asks for a button, menu, modal, form, or any frontend work. Also use it when writing UI copy like button labels, empty states, or confirmation dialogs. Distilled from the interfaces.dev cheat sheet.

Frontend & Design

Quasar Vue3

felixyakubov91/claude-quasar

Comprehensive Quasar Framework (v2) and Vue 3 development assistance. Use this skill when working with Quasar projects, components, plugins, directives, composables, CLI configuration, or building apps (SPA, SSR, PWA, Electron, Capacitor, Cordova, Browser Extensions). Triggers on Quasar-specific questions, quasar.config.js, Q-prefixed components (QBtn, QInput, QTable, etc.), Quasar CLI commands, or Vue 3 Composition API with Quasar.

Frontend & Design

Image First Frontend

jinshiqwq/image-first-frontend

Generate a polished frontend reference screenshot through a configurable GPT-image-2-compatible generations endpoint, save and show versioned previews inside the project, revise selected previews through a configurable /images/edits endpoint, and reproduce only the user-approved design as functional frontend code with high visual fidelity. Use when Codex is asked to design, build, restyle, or recreate a web page, application screen, dashboard, landing page, or UI component through an image-first workflow, design approval loop, screenshot-driven implementation, pixel matching, or a 1:1 frontend

Frontend & Design

Salgadoia Web Design Engineer Pro

Luispitik/salgadoia-web-design-engineer-pro

Skill end-to-end para construir webs y landings profesionales con Next.js 16, React 19, Tailwind CSS v4, shadcn/ui y Framer Motion. Pensada para que un usuario sin conocimientos técnicos pueda PREVISUALIZAR estilos en su navegador antes de elegir, y completar la página de principio a fin (intake, brief, diseño, build, QA, deploy). Combina 8 direcciones visuales narrativas (Editorial Serif, Swiss Minimal, Luxury Dark Warm, Corporate Bold, Understated Elegance, Neo-Brutalist, Playful Gradient, Retro Terminal) con 10 paletas y 10 emparejamientos tipográficos en un sistema mix-and-match con build-

Frontend & Design

Elementor Pro Designer Skill

jainshwetank/elementor-pro-designer-skill

Use this skill whenever helping someone build, design, or troubleshoot layouts in Elementor Pro V4 using the visual editor. Triggers on ANY mention of Elementor, page builder, Flexbox widget, Div block, section layout, widget configuration, responsive breakpoints, dark mode, scroll animations, Interactions tab, Variables Manager, Class Manager, Custom Code snippets, or any visual design work inside the Elementor panel. Also trigger when someone asks how to position elements, set spacing, apply typography, configure dark mode, prevent FOUC, or build scroll-triggered effects in Elementor. ALWAYS

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.