DorianandClaude Opus 4.6
dde3859a2e
Font sizes (text-[10px]→text-xs, text-[8-9px]→text-[11px]), touch targets (44×44px minimum for all buttons), input zoom prevention (16px minimum), gap compliance (8px between targets), glass button system updates, and comprehensive verification. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
103 lines
4.7 KiB
Markdown
103 lines
4.7 KiB
Markdown
You are making the AIUI app compliant with iOS Human Interface Guidelines (HIG) for font sizes, touch targets, and button hitboxes — WITHOUT changing the visual design. Read these files first:
|
||
|
||
1. `loop/plan.md` — Your task checklist (mark items `- [x]` as you complete them)
|
||
2. `CLAUDE.md` — Project conventions, design system rules, and coding standards
|
||
|
||
## Key Principle
|
||
|
||
**Same design, better accessibility.** The app should look identical but be properly tappable and readable on mobile. All changes are about sizing minimums, not visual redesign.
|
||
|
||
## iOS HIG Requirements
|
||
|
||
1. **Font Sizes:**
|
||
- Body text: 17px (but we use 14px base — OK, it's a dense app)
|
||
- Footnote: 13px minimum
|
||
- Caption: 11px ABSOLUTE minimum (nothing smaller than 11px ever)
|
||
- Form inputs: 16px minimum (prevents iOS auto-zoom on focus)
|
||
|
||
2. **Touch Targets:**
|
||
- All interactive elements: 44×44px minimum tappable area
|
||
- The VISUAL icon can be smaller (e.g., 20px SVG), but the tappable wrapper must be 44×44px
|
||
- Pattern: `<button class="min-w-[44px] min-h-[44px] flex items-center justify-center"><svg class="w-5 h-5" ...></button>`
|
||
|
||
3. **Gaps Between Targets:**
|
||
- Minimum 8px (gap-2) between any two tappable elements
|
||
- `gap-0.5` (2px) and `gap-1` (4px) between buttons is a violation
|
||
|
||
## Current Violations Found (from audit)
|
||
|
||
- **301× `text-[10px]`** — timestamps, labels, metadata throughout app
|
||
- **76× `text-[11px]`** — settings, branch switcher, design system
|
||
- **100× `text-[9px]` / `text-[8px]`** — badges, version numbers, plugin metadata
|
||
- **40+ buttons below 44×44px** — `w-7 h-7` (28px), `w-8 h-8` (32px), `w-6 h-6` (24px), `w-5 h-5` (20px)
|
||
- **20+ locations with gap < 8px** between clickable elements
|
||
- **9+ inputs below 16px** — ChatInput textarea, settings inputs, search
|
||
|
||
## Key Files
|
||
|
||
- `packages/app/src/styles/main.css` — Glass button system, utility classes
|
||
- `packages/app/src/components/chat/ChatMessage.vue` — Message actions, timestamps
|
||
- `packages/app/src/components/chat/ChatInput.vue` — Main input, send button
|
||
- `packages/app/src/components/chat/ChatHeader.vue` — Toolbar buttons
|
||
- `packages/app/src/components/chat/ChatSearch.vue` — Search nav buttons
|
||
- `packages/app/src/components/chat/SettingsModal.vue` — Settings UI
|
||
- `packages/app/src/components/content/ContentPanel.vue` — Tab bar
|
||
- `packages/app/src/components/content/*Grid.vue` — All content grids
|
||
- `packages/app/src/components/content/*Detail.vue` — All detail views
|
||
- `packages/app/src/components/settings/` — Settings components
|
||
- `packages/app/src/components/ui/` — Shared UI components
|
||
|
||
## Design System Rules (must follow for every file you touch)
|
||
|
||
- **Glass morphism only** — use `.glass`, `.glass-card`, `.glass-button`, `.glass-button-sm` from `src/styles/main.css`
|
||
- **No light-mode conditionals** — never use `isDark ?` pattern. The app is dark-only.
|
||
- **No `bg-gray-*` or `bg-white`** — use `bg-white/5`, `bg-white/10`, `bg-black/35` etc.
|
||
- **Text opacity scale** — `text-white/25` → `/40` → `/60` → `/70` → `/80` → `/90` → `/96` → `text-white`
|
||
- **Accent colour** — `text-accent` (`#F7931A`), `bg-accent/15`, `border-accent/30`
|
||
- **Animations** — `animate-scale-in`, `animate-fade-up`, `animate-fade-in` from design system only
|
||
|
||
## How to Fix Touch Targets (Pattern)
|
||
|
||
**Before (violation):**
|
||
```html
|
||
<button class="w-7 h-7 rounded-full" @click="doThing">
|
||
<svg class="w-4 h-4" ...></svg>
|
||
</button>
|
||
```
|
||
|
||
**After (compliant):**
|
||
```html
|
||
<button class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-full" @click="doThing">
|
||
<svg class="w-4 h-4" ...></svg>
|
||
</button>
|
||
```
|
||
|
||
Or use the utility class (after T19):
|
||
```html
|
||
<button class="touch-target rounded-full" @click="doThing">
|
||
<svg class="w-4 h-4" ...></svg>
|
||
</button>
|
||
```
|
||
|
||
## For each task in loop/plan.md:
|
||
|
||
1. Find the first unchecked `- [ ]` item
|
||
2. Read the task description carefully
|
||
3. Read the relevant source files before making changes
|
||
4. Make the change — keep visual design identical, only adjust sizing
|
||
5. Run `pnpm typecheck && pnpm lint` — fix all errors
|
||
6. Run `pnpm test` — fix any failing tests
|
||
7. Commit: `type(scope): description` (conventional commits)
|
||
8. Mark it done `- [x]` in `loop/plan.md`
|
||
9. Move to the next unchecked task immediately
|
||
|
||
## Rules
|
||
|
||
- Never skip a testing gate — if tests fail, fix them before moving on
|
||
- If a task is proving difficult, keep trying different approaches. Make at least 30 genuine attempts.
|
||
- Always run typecheck + lint after every code change
|
||
- The visual design must NOT change — same colors, same layout, same glass morphism
|
||
- Only sizes of tappable areas, font minimums, and gaps change
|
||
- Do not stop until all tasks are checked or you are rate limited
|
||
- Commit and push after each TEST: task
|