← ClaudeAtlas

omni-agentlisted

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.
teejayai/Omni-design-skill · ★ 0 · AI & Automation · score 62
Install: claude install-skill teejayai/Omni-design-skill
# OmniONE — AGENT Mobile-first (375px) app for field sales agents. Extends [omni-design-system](../base/SKILL.md) — 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 heade