Omar SobhandClaude Opus 4.8
48730abd78
Add the WorkClaw design-reference docs (specs, manifests, tokens, motion, icon/asset references, gifs) under docs/, and move the platform spec/PRD/roadmap from the repo root into docs/. Co-Authored-By: Claude Opus 4.8 <[email protected]>
2.4 KiB
2.4 KiB
Skills App + Add Apps + Add Custom App — Inner-View Specs (measured)
Skills (?app=skills) icon: lucide 'zap'
- Header: "Skills" + close X.
- Empty state (centered): 56x56 fully-rounded chip, bg neutral-800 (#262626) holding muted 'zap' glyph; heading "WorkClaw's Skills" 16px/600 near-white; subtitle 12px muted (lab 66.1), line-height 16.5px, max-width 256px, centered.
- Bottom pinned button: "Add Skill" — 370px wide x 48px, fully rounded, bg near-white (#f5f5f5), text near-black, 14px/600.
Add Apps (?app=apps) icon: lucide 'plus' (dashed placeholder tile on grid)
- Header: "Add Apps" + close X.
- Category filter pills (horizontal scroll): All | Productivity | Communication | Dev tools | Design | Finance.
- Active pill: small rounded chip, white bg / dark text (same pattern as Slack tabs).
- Intro copy (12px muted) about connecting tools for context + approved actions.
- Search field: rounded pill "Search apps".
- App rows: brand icon (left) + name + circular "+" add button (right); grouped list, hover tint. Catalog seen: Gmail, Google Calendar, Google Drive, Notion, Linear (OAuth), GitHub, Figma, Zoom, Stripe, HubSpot, Google… (paginated/scroll).
- Bottom pinned: "Add custom app" cream pill w/ + icon.
Add Custom App (drilled-in sub-view; back-chevron + title)
Step 1 — AUTH TYPE (section label, small-caps): three option rows (icon + title + desc + chevron):
- Keys — "One or more secret keys — API key, token, account…" (key icon)
- Username & Password — "HTTP basic auth or any login that needs a username…" (shield icon)
- MCP Server with OAuth — "Connect a remote MCP server. Discovers OAuth…" (server icon) Footer: "Pick how this app authenticates. You can add more later." Step 2 — ACCESS (after picking Keys): section label "WHO CAN USE THESE KEYS?"; grouped card (12px radius, bg neutral-900 #0a0a0a) with two rows:
- Only Me — "Only my claws can use these keys."
- Anyone in — "Anyone on the team can install these keys." Option row: 89px tall; title 14px/500; desc 12px muted. Footer: "You can change this later…". Step 3 — (credential entry form) — NOT captured; entering secrets/keys is out of scope by policy.
Component tokens reused
- Section label = uppercase, small (~11px), letter-spaced, muted.
- Grouped card = 12px radius, neutral-900/800 fill, no border (relies on fill contrast).
- Primary pill button = fully rounded, near-white fill, near-black text, 14px/600, 48px tall.