# 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.