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]>
35 lines
2.4 KiB
Markdown
35 lines
2.4 KiB
Markdown
# 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 <team> — "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.
|