Agent skill

Oma Design

by first-fluke in first-fluke/oh-my-agent

Define or review a visual system, DESIGN.md, or redesign direction.

MITAuto-check passedFrontend & Design

Install Oma Design

skills CLI
$ npx skills add first-fluke/oh-my-agent --skill oma-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install first-fluke/oh-my-agent oma-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/first-fluke/oh-my-agent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/oma-design .claude/skills/oma-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
oma-design
GitHub stars
1.3k
Token cost
~2.1k tokens
SKILL.md length
847 words
Files
21
Skills in repo
57
Repo updated
First seen
Licence
MIT

At a glance

Define or review a visual system, DESIGN.md, or redesign direction.

  • Works in 3 steps: Read relevant existing design context;… → Identify target audience, platform,… → Decide whether vendor inspiration or…
  • Interaction design decisions
  • SKILL.md covers Scheduling, Structural Flow, Logical Operations and References
  • Calls bunx

What it does

Oma Design is an agent skill from first-fluke/oh-my-agent. Define or review a visual system, DESIGN.md, or redesign direction. Use for typography, layout, color, motion, and interaction design decisions.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 22 other files (for example `reference/accessibility.md`, `reference/color-and-contrast.md` and `reference/component-patterns.md`).

It sits in Frontend & Design, covering Architecture decision records and Typography. The repository describes itself as: Mechanical verification for AI coding agents — skills pack or full harness (stop-hook gates, artifact checks, independent judges). The licence is MIT.

When your agent uses it

  • Interaction design decisions
  • Tasks that involve Architecture decision records
  • Tasks that involve Typography

Example prompts

  • “/oma-design”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Read relevant existing design context; gather missing context only when needed for the requested decision.
  2. Identify target audience, platform, content language, and design artifact.
  3. Decide whether vendor inspiration or Stitch integration is relevant.

What it can do on your machine

Read from SKILL.md and the folder at commit b364119. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • bunx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use bunx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Oma Design loads about 2.1k tokens when it runs. Until then it costs about 39 tokens; SKILL.md has 847 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~39
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from first-fluke/oh-my-agent at commit b364119, republished under its MIT licence (© first-fluke). 847 words, ~2,073 tokens.

Download SKILL.mdSave it as .claude/skills/oma-design/SKILL.md (or your agent's skills folder). This skill also uses 20 other files; get the full folder from GitHub.
name
oma-design
description
Define or review a visual system, DESIGN.md, or redesign direction. Use for typography, layout, color, motion, and interaction design decisions.

oma-design

Scheduling

Goal

Design specialist that defines, creates, and validates project design systems. DESIGN.md is the central artifact; all design work revolves around it.

Intent signature
  • User asks for design system, DESIGN.md, visual direction, typography, color, motion, accessibility, anti-pattern review, or component guidance.
  • User needs design decisions before frontend implementation or wants UI quality audited from a design perspective.
When to use
  • Defining or revising a project design system
  • Creating or auditing DESIGN.md
  • Selecting typography, color, layout, motion, or component direction
  • Reviewing UI work for responsive behavior, accessibility, and visual quality
  • Redesigning an existing site or app (preserve vs overhaul modes)
  • Using optional vendor inspiration from Stitch MCP or getdesign
When NOT to use
  • Implementing frontend components or application UI -> use oma-frontend
  • Planning product scope or task breakdown -> use oma-pm
  • Backend, database, infrastructure, or mobile implementation -> use the relevant specialist skill
  • General quality/security review outside visual, interaction, and accessibility concerns -> use oma-qa
Expected inputs
  • Product, brand, audience, platform, and UI/design problem
  • Existing .design-context.md, DESIGN.md, screenshots, references, or component constraints
  • Accessibility, responsive, language, and implementation constraints
Expected outputs
  • Design direction, revised DESIGN.md, audit findings, component guidance, or handoff notes
  • Responsive-first, WCAG-aware design recommendations
  • Optional vendor seed attribution when getdesign is used
yaml
outputs:
  - name: design-doc
    description: Updated DESIGN.md when the run materially advances the design system
    artifact: "DESIGN.md"
    required: false
  - name: design-context
    description: Refreshed .design-context.md snapshot when a discovery pass runs
    artifact: ".design-context.md"
    required: false
Dependencies
  • .design-context.md and DESIGN.md
  • Design resources, references, anti-pattern catalog, and optional Stitch/getdesign integrations
  • shadcn/component library context when recommending components
Control-flow features
  • Branches by missing context, CJK language support, vendor seed availability, and anti-pattern audit results
  • May read/write design docs and call optional design/vendor tooling
  • Asks about a direction only when a material choice is unresolved; otherwise follows the supplied brief

Structural Flow

Entry
  1. Read relevant existing design context; gather missing context only when needed for the requested decision.
  2. Identify target audience, platform, content language, and design artifact.
  3. Decide whether vendor inspiration or Stitch integration is relevant.
Transitions
  • Create .design-context.md when a discovery pass materially informs a design-system decision.
  • If the target is an existing site/app, load resources/redesign-protocol.md and classify Preserve vs Overhaul before proposing.
  • If CJK support is needed, prioritize CJK-ready fonts.
  • If vendor seed fetch fails, choose retry, continue without seed, or abort.
  • If anti-patterns appear, surface alternatives before finalizing.
Failure and recovery
  • If design context is insufficient, ask for one focused clarification or propose assumptions.
  • If vendor inspiration is unavailable, continue with local design synthesis.
  • If accessibility checks fail, revise before handoff.
Exit
  • Success: design artifact is project-specific, responsive-first, accessible, and audit-ready.
  • Partial success: missing context, vendor failure, or open design decision is explicit.

Logical Operations

Tools and instruments
  • Design references, anti-pattern catalog, checklist, Stitch integration, getdesign fetcher
  • shadcn CLI recommendations when component guidance is needed
Canonical workflow path
text
1. Inspect relevant existing context; create `.design-context.md` only when substantive discovery is needed.
2. Use the chosen direction. Offer alternatives only for requested exploration or a material unresolved design decision.
3. Generate or revise `DESIGN.md`, then run the design checklist.

Optional vendor seed discovery:

bash
bunx getdesign@latest list
Resource scope
ScopeResource target
LOCAL_FS.design-context.md, DESIGN.md, design resources
CODEBASEExisting UI and component patterns
NETWORKOptional getdesign/vendor references
PROCESSOptional CLI/tool invocations
Preconditions
  • Target design problem and artifact are identifiable.
  • Design context exists or setup can create it.
Effects and side effects
  • May create or modify DESIGN.md and design context artifacts.
  • May fetch vendor seed material and append MIT attribution.
  • Does not implement frontend code directly.
Show full SKILL.md (341 more words)Show less
Guardrails
  1. Inspect relevant existing context and tokens. Create .design-context.md for substantive discovery, not every visual edit.
  2. System font stack as default (system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif). Add custom fonts only with project justification.
  3. If the service supports CJK languages (ko/ja/zh): prioritize CJK-ready fonts (Pretendard Variable > Noto Sans CJK > system-ui fallback). If latin-only: choose fonts appropriate for the target audience.
  4. Enforce anti-patterns strictly; reject AI slop. See resources/anti-patterns.md.
  5. Name colors semantically with hex values: "Deep Ocean Navy (#1a2332)" not "dark blue".
  6. Recommend components with install commands (shadcn CLI).
  7. ALL output must be responsive-first (mobile layout as default, enhance upward).
  8. WCAG AA minimum for all designs. Respect prefers-reduced-motion.
  9. Stitch MCP is optional; all phases work without it.
  10. Present directions when design exploration is requested or a material direction is unresolved; reuse an already chosen direction.
  11. State a material design assumption when it affects the outcome. Ask only about unresolved choices; no fixed opening phrase is required.
  12. Redesigns follow resources/redesign-protocol.md: detect Preserve vs Overhaul, audit before touching, never silently change URLs, nav labels, form field names, or brand marks.
  13. Visual assets follow resources/asset-strategy.md: image generation (oma-image) first, picsum seed second, labeled placeholder last. Div-based fake screenshots are banned.
  14. Consistency locks: one accent color, one corner-radius system, one theme per page. Lock them early, audit against them in Phase 6 (checklist section 6 mechanical checks).

References

  • resources/execution-protocol.md: selected design operation and its phases
  • resources/redesign-protocol.md: existing-site redesign
  • resources/design-md-spec.md: creating or changing DESIGN.md
  • resources/checklist.md: applicable visual verification checks
  • resources/anti-patterns.md: affected visual or copy category
  • resources/getdesign-fetcher.md: explicitly relevant vendor inspiration
  • resources/stitch-integration.md: requested Stitch operation
  • resources/asset-strategy.md: selecting visual assets
  • resources/design-tokens.md: token export
  • resources/prompt-enhancement.md: incomplete design brief
  • resources/error-playbook.md: observed design-tool failure
  • reference/visual-hierarchy.md: 7 hierarchy principles (Alignment, Color, Contrast, Proximity, Size, Texture, Time)
  • reference/typography.md: Font selection, type scale, CJK
  • reference/color-and-contrast.md: Color psychology, WCAG contrast
  • reference/spatial-design.md: 8px grid, breakpoints, spacing
  • reference/motion-design.md: motion/react, GSAP, Three.js, ogl, Temporal UX
  • reference/responsive-design.md: Mobile-first, theme system
  • reference/component-patterns.md: shadcn/Aceternity/React Bits catalog
  • reference/accessibility.md: WCAG 2.2, ARIA, focus, reduced-motion
  • reference/shader-and-3d.md: WebGL, R3F, ogl, performance

© first-fluke, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 20 other files in skills/oma-design of first-fluke/oh-my-agent.

  • SKILL.md
  • reference/accessibility.md
  • reference/color-and-contrast.md
  • reference/component-patterns.md
  • reference/motion-design.md
  • reference/responsive-design.md
  • reference/shader-and-3d.md
  • reference/spatial-design.md
  • reference/typography.md
  • reference/visual-hierarchy.md
  • resources/anti-patterns.md
  • resources/asset-strategy.md
  • resources/checklist.md
  • resources/design-md-spec.md
  • resources/design-tokens.md
  • resources/error-playbook.md
  • resources/execution-protocol.md
  • resources/getdesign-fetcher.md
  • resources/prompt-enhancement.md
  • … and 2 more

Open the folder on GitHubat commit b364119

Used in 1 other repository

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in first-fluke/oh-my-agent, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Oma Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Oma Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Oma Design this skillfirst-fluke/oh-my-agent1.3k—~2.1kAutomated safety check: PassMIT
Typeui Fundamentalsbergside/typeui2k—~861Automated safety check: PassMIT
Design Tokensmobazha/mobazha-unified165—~2kAutomated safety check: PassMPL-2.0
Frontend Aestheticsmaslennikov-ig/claude-code-orchestrator-kit260—~794Automated safety check: PassCustom licence
Design Standardsrampstackco/claude-skills941—~2.4kAutomated safety check: PassMIT
Bencium Controlled UX Designerbencium/bencium-marketplace446—~6.8kAutomated safety check: PassMIT

Similar skills

  • Typeui Fundamentals

    bergside/typeui

    Universal UI/UX design principles covering visual hierarchy, interaction laws, typography foundations, and WCAG accessibility requirements.

    2k GitHub stars~861 tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed
  • Design Tokens

    mobazha/mobazha-unified

    Comprehensive design token system for Mobazha including color system, typography scale, spacing grid, border radius, elevation, and icon sizes.

    165 GitHub stars~2k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed
  • Frontend Aesthetics

    maslennikov-ig/claude-code-orchestrator-kit

    Guide frontend design decisions to create distinctive, creative UIs that avoid generic AI-generated aesthetics.

    260 GitHub stars~794 tokensUpdated 7 mo ago
    Frontend & DesignAuto-check passed
  • Design Standards

    rampstackco/claude-skills

    Apply production-grade design standards when building or reviewing pages, components, or UI.

    941 GitHub stars~2.4k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Bencium Controlled UX Designer

    bencium/bencium-marketplace

    Expert UI/UX design guidance for unique, accessible interfaces.

    446 GitHub stars~6.8k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed
  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

More from first-fluke/oh-my-agent

All 57 skills in this repo
  • OMA Multi-Agent Orchestration

    first-fluke/oh-my-agent

    Decomposes a complex feature into tasks, dispatches parallel specialist agents with durable state, and supervises verification, QA review and retries.

    1.3k GitHub stars~4.1k tokensUpdated today
    Auto-check passed
  • OMA Multi-Agent Orchestrator

    first-fluke/oh-my-agent

    Splits a complex feature into prioritized tasks, spawns specialist CLI subagents in parallel, tracks them through shared memory and verifies each result.

    1.3k GitHub stars~3.1k tokensUpdated today
    Auto-check passed
  • Architecture Decisions and ADRs

    first-fluke/oh-my-agent

    Evaluates system boundaries and tradeoffs and writes architecture recommendations, option comparisons or ADRs, with a Mermaid diagram when structure changes.

    1.3k GitHub stars~2.6k tokensUpdated today
    Auto-check passed
  • OMA Backend Agent

    first-fluke/oh-my-agent

    Backend specialist for APIs, database work, authentication and migrations that follows clean architecture with router, service and repository layers.

    1.3k GitHub stars~2.4k tokensUpdated today
    Auto-check passed
  • oma Bootstrap

    first-fluke/oh-my-agent

    Installs or checks the oma CLI and its runtimes (bun, uv, serena) in a fresh workspace so that oma-* skills can run their commands.

    1.3k GitHub stars~719 tokensUpdated today
    Auto-check passed
  • Design-First Brainstorm

    first-fluke/oh-my-agent

    Explores intent, constraints and alternative approaches before any planning, working through questions one at a time and saving an approved design for later steps.

    1.3k GitHub stars~1.7k tokensUpdated today
    Auto-check passed

Questions about Oma Design

What does Oma Design do?

Define or review a visual system, DESIGN.md, or redesign direction. Oma Design is an agent skill from first-fluke/oh-my-agent.md, or redesign direction.

When should I use Oma Design?

Oma Design fits situations like: interaction design decisions; tasks that involve Architecture decision records; tasks that involve Typography.

How do I install Oma Design in Claude Code?

Run `npx skills add first-fluke/oh-my-agent --skill oma-design -a claude-code`. Or copy the skill folder (skills/oma-design in first-fluke/oh-my-agent) into .claude/skills/oma-design in your project. Claude Code loads it when a task matches its description.

How do I install Oma Design in Codex?

Run `npx skills add first-fluke/oh-my-agent --skill oma-design -a codex`. Or copy the skill folder (skills/oma-design in first-fluke/oh-my-agent) into .agents/skills/oma-design in your project. Codex loads it when a task matches its description.

Can I use Oma Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add first-fluke/oh-my-agent --skill oma-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/oma-design, .gemini/skills/oma-design, .github/skills/oma-design and .opencode/skills/oma-design in your project.

What does Oma Design need to run?

Going by SKILL.md and its folder, Oma Design needs the command-line tools its instructions call (bunx).

Does Oma Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Oma Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Oma Design use?

Oma Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Oma Design use?

About 2.1k tokens (SKILL.md is roughly 8.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Oma Design?

Skills that share tags, products or a category with Oma Design: Typeui Fundamentals (bergside/typeui, 2k stars), Design Tokens (mobazha/mobazha-unified, 165 stars), Frontend Aesthetics (maslennikov-ig/claude-code-orchestrator-kit, 260 stars) and Design Standards (rampstackco/claude-skills, 941 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Oma Design?

first-fluke (a GitHub organization) maintains it in first-fluke/oh-my-agent, which has 1,338 GitHub stars. The repository holds 57 skills in this directory. The repository was last updated on October 9, 2026.

Source: first-fluke/oh-my-agent on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.