| 1 | # Skills for building apps with agents |
| 2 | |
| 3 | Eight skills for Claude Code and Codex, distilled from about 60 sessions in which |
| 4 | agents built three of Clover's apps: |
| 5 | |
| 6 | - **Snowbound**: a OneNote 2010 remake that one agent maintained for ten days; |
| 7 | - **Clover Chat**: a chat app whose clickable HTML prototype became the spec for |
| 8 | the real thing; |
| 9 | - **the snow globe**: a home-server dashboard. |
| 10 | |
| 11 | Quotes attributed to Clover are hers, kept for flavour and because they carry |
| 12 | the reasons. `ui-copy` quotes published design systems. |
| 13 | |
| 14 | | Skill | Use it for | |
| 15 | | --- | --- | |
| 16 | | `ui-copy` | Every word a person reads on screen | |
| 17 | | `ui-prototype` | A clickable HTML mock of the whole app before building the real UI, then building from it | |
| 18 | | `ux-flows` | How screens, menus, settings, onboarding and errors should behave | |
| 19 | | `ui-craft` | How it looks and moves: measured against the reference, nothing jumping | |
| 20 | | `ux-testing` | Finding problems the way a user would, before handing anything over | |
| 21 | | `accessibility` | Keyboard paths and the accessibility tree, tested without ever turning a screen reader on | |
| 22 | | `ui-review-loop` | Turning a batch of feedback into one round of fixes | |
| 23 | | `maintain-it` | Handing a solo repo to one agent that plans, ships to main, releases and keeps the tracker true | |
| 24 | |
| 25 | ## Install |
| 26 | |
| 27 | Copy all eight folders into `~/.claude/skills/` for Claude Code, into |
| 28 | `~/.codex/skills/` for Codex, or into both. They refer to each other by name, |
| 29 | so install the set together. |
| 30 | |
| 31 | They work best with: |
| 32 | |
| 33 | - sub-agents; |
| 34 | - a tool for asking multiple-choice questions; |
| 35 | - a browser the agent can drive: the in-app browser, or Chrome plus Node 22 for |
| 36 | `ux-testing/scripts/drive.mjs`; |
| 37 | - for `maintain-it`, an issue tracker the agent can write to. |
| 38 | |
| 39 | ## Your taste |
| 40 | |
| 41 | Taste is yours. Put it where agents read it, such as AGENTS.md, CLAUDE.md or |
| 42 | memory. Until you do, `ui-craft` uses Clover's taste as a worked example and |
| 43 | asks before leaning on it. |
| 44 | |
| 45 | ## Prompting moves |
| 46 | |
| 47 | The skills make agents offer most of these. Asking for them directly gets you |
| 48 | there sooner. |
| 49 | |
| 50 | ``` |
| 51 | start "mock this before we build it", plus a two-sentence pitch, the look to inherit, |
| 52 | 2–3 reference apps, and which surface is the hard custom one |
| 53 | answer the question round; free-text answers are followed literally |
| 54 | review use the mock-controls panel; send numbered screenshots with one-liners; |
| 55 | send small things as you go |
| 56 | name it "the way Discord does muting": naming the product that already solved it lands fastest |
| 57 | unstick "something's off" gets an A/B/C sheet; open-ended taste gets variants |
| 58 | before "run a fresh-eyes pass"; "sweep it" once nits pile up |
| 59 | handoff "match the mock literally", plus which sizes, fonts and materials are exact targets |
| 60 | maintain "you're the maintainer": then settle the contract it asks about (push, release, |
| 61 | tracker access, budget, what stays yours) |
| 62 | ``` |
| 63 | |
| 64 | When a word could mean two things ("theme", "half", "tighter"), the agent is |
| 65 | supposed to restate it before building. If it doesn't, ask it to. |