Dos

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

OmniONE design system + product skills for Claude Code

Install

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

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 — DOS (Distributor Operating System) design skill. Mobile operational app for distributors. Utilitarian, neutral/STEEL-GRAY-forward primary, surface #F8F9FA, bottom-nav + bottom-sheets. Extends the shared omni-design-system base.

SKILL.md

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

OmniONE — DOS

Mobile app (375px, native iOS frames) for distributors/store operators. Extends omni-design-system. Gordita throughout (native status-bar numerals use Inter — system only).

Voice / personality

Operational, warehouse-floor utility tool — task-first, not a marketing surface. Calm and neutral/grey-forward (Steel Gray dominant, blue reserved). Friendly but terse: short headers, emoji greeting ("Hi John 👋🏼"), guided multi-step onboarding. Empty states push the next action.

Preferred components & variants

Buttons: Steel-Gray fill #4B5563, white Gordita Medium 14, ~46px tall.
Bottom nav bar: 5 segments icon+label (12px), active = #333, inactive = #666.
Top app bar ("Tab / Active", 107px incl. status bar): centered Bold 16 title in Steel Gray, leading back + trailing actions (cart w/ badge).
Segmented tab strip: underline, active = border-b-2 #333 Bold, inactive Regular.
Pill filter chips rounded-[40px]: active = #404854 fill + white, inactive = #D0D5DD border + #333.
Search input: 32px tall, r4, #F0F0F1 border, leading search icon + trailing filter icon.
Bottom-sheet modal: rounded-t-[30px] + drawer grab-handle.
Stepper: 32px numbered circles (grey-300 border) + tail line + description.
Tags, Quick Actions grid, banner carousel with dot indicators.

Density & spacing

4px grid, looser than base: screen H-padding 16px, section gaps 20px, content gaps 12px, chip gaps 8px. Modal padding 24H / 10 top, internal gap 30. Tab/chip rows 52–64px tall, horizontal scroll. Touch-target driven, moderately roomy.

Layout patterns

Per-screen vertical stack: status bar + app bar (107px) → sub-header (greeting / warehouse-location selector with Tag) → filter zone (segmented underline tabs → pill chips → search, white bands separated by 8px surface-bg spacers) → scroll body (cards / list rows or centered empty-state + CTA) → 5-tab bottom nav pinned + iOS home indicator. Dashboard adds banner carousel + Quick Actions.

Token usage & deviations

Primary action = Steel Gray #4B5563 (de-facto primary), active chips Steel-Gray-500 #404854. Brand blue #173E87 present but reserved/rare.
Surface bg = #F8F9FA (not base #F0F0F1).
Text = #333 focused (not base #101928), subdued #999, grey-700 #666.
Radii: buttons 5px, modal sheet 30px top corners, alongside standard 4px.
New border greys: #D0D5DD (chip outline), #ECECEC (input divider).
Button text often #FEFEFE (Bliss White), not pure white. Accents: Teal #20C997, Amber #FFC107, Success #28A745.
Type: Gordita Mobile scale — H3-24/B, H4-20/M, H6-16/B, Body 16/14/12, Caption 12, Label 10.

Anti-patterns

❌ Brand-blue primary CTAs — DOS uses Steel Gray.
❌ Base surface #F0F0F1 — use #F8F9FA.
❌ Default text #101928 — DOS text is #333.
❌ Desktop/sidebar layouts — mobile-only, 375px, bottom-nav driven.
❌ Top-attached dialogs — modals are bottom sheets (30px top radius + handle).
❌ Tight 8px gutters — keep 16px H-padding / 20px section gaps.
❌ Pure-white button labels — prefer #FEFEFE.

Example patterns

Primary button (2322:170470): bg #4B5563, Gordita Medium 14 #FEFEFE, r4–5, px-24 py-12 (~46px), full-width.

Filter/discovery row (2322:174644): white band, py-15, horizontal scroll pill chips r40 px-16 py-8 gap-8; active #404854 fill + white M14, inactive #D0D5DD border + #333 R14; optional underline tab strip above.

Bottom-sheet onboarding modal (2322:170453): bg-white rounded-t-30 px-24 pt-10 gap-30, drawer handle, centered Medium 20 title #333, Steps list (32px numbered circles, grey-300 border + tail, 14px #999 descriptions), full-width Steel-Gray CTA, iOS home indicator.