Agent

Skill teejayai/Omni-design-skill/omni-design-skills/agent

OmniONE design system + product skills for Claude Code

Install

npx -y skills add teejayai/Omni-design-skill --skill agent

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

OmniONE — AGENT product design skill. Mobile field-sales-agent app. Gamified, encouraging, card-driven, TEAL primary action, soft radii (5/10/20). Extends the shared omni-design-system base.

SKILL.md

3.9 KB, ~1.1k tokens by cl100k_base, as published. Nobody here has run it

OmniONE — AGENT

Mobile-first (375px) app for field sales agents. Extends omni-design-system — use base Gordita type scale + token names; the overrides below are AGENT-specific.

Voice / personality

Supportive coach, not a dashboard. Gamified and encouraging: greetings by name ("Hi Anike"), streak/booster framing ("178th", "Today's Booster Suggestion"), motivational copy, emoji mascots, friendly illustrated empty states. Spacious, card-driven, generous vertical rhythm — never data-dense.

Preferred components & variants

Buttons: filled, full-width, Teal #158362, Gordita Medium 14 #FEFEFE. Disabled = opacity 0.5. No outline/ghost primaries.
Inputs: white, 1px #F0F0F1 border, label-above-field, red * for required, placeholder #999.
Cards for everything (plans, suggestions, progress) with soft shadow; lists are card stacks, not tables.
Bottom-sheet modals with grab handle (rounded top ~20px), divider-separated rows.
Bottom tab bar (Home/Customers/Inventory/Orders/Profile), active = teal.
Mobile header: iOS status bar + back chevron + 18px Medium title.
Stepped wizard: thin pill progress track (teal #1AA179 fill) + "1 / 4" counter.

Density & spacing

Roomy. Screen padding 16px; field gap 26px; section gap 30px; label→input 6px. Input height 48px (14×8 padding); button height 46px. Sticky bottom CTA bar: pt-20 / pb-60 / px-16.

Layout patterns

Mobile header → scroll body (16px padding) → sticky bottom CTA bar. Home = vertical card feed: greeting → Target Progress card (brand-blue gradient, white text) → Booster Suggestion → "My Plans (x/12)" + horizontal day-picker → customer plan cards → bottom tab bar. Forms = single-column, label-above-input, stepper on top. Lists = card stacks with illustrated empty state + centered CTA.

Token usage & deviations

Primary action = Teal, NOT brand blue. Teal #158362 (buttons), #1AA179 (progress), #F6FDFB (25). Brand blue #173E87 is decorative/gradient only.
Radii larger than base: inputs 10px, buttons 5px, cards/sheets 20px.
Button height 46px (off the base 32/36/44/48 scale).
Text: #333333 (not base #101928), subdued #999999, label #4D4D4D.
Extra colors seen: Purple #8A6CD4, Gold #FFC800, Amber ramp, Soft Red #DC3545 (errors/asterisks). Button text #FEFEFE (Bliss White).
Mobile headings use negative tracking (H3 -3%, H5/H6 -2%).

Anti-patterns

❌ Brand-blue primary CTAs (primary is teal; blue is decorative).
❌ Data tables / dense grids in the app — use card stacks.
❌ Sharp 4px/8px radii — AGENT is soft (5/10/20).
❌ Outline/ghost primary buttons — they're filled, full-width.
❌ Terse/utilitarian copy — keep encouraging, progress/streak framing.
❌ Centered dialog modals — use bottom sheets with grab handle.
❌ Dropping the sticky bottom CTA on action screens.

Example patterns

Multi-step form (4603:82208): mobile header → teal step progress + "1/4" → single-column inputs (gap 26): label M14 #4D4D4D + red * over 48px white field, 1px #F0F0F1, r10, 14×8 → sticky bottom bar with full-width teal #158362 button, r5, h46, disabled opacity 0.5.

Bottom-sheet selector (4603:83054): white sheet, r-top 20, grab handle → 16px Medium title → vertical 14px text rows, 1px #F0F0F1 dividers, ~54px rows.

Home feed card (18696:67479): 16px gutters; greeting H3-24 Bold → Target Progress card (brand-blue gradient, white, inner white pill button) → Booster card → "My Plans (0/12)" + day-picker (selected = teal pill) → plan cards → bottom tab bar.