Web Design Guidelines

Everyone means to check accessibility, whether the thing still works for a person moving by keyboard rather than mouse, or listening through a screen reader, the software that reads a page aloud. Almost nobody does check, because the checking is dull and the rules live somewhere else. This skill moves the rules to where the work is. It fetches Vercel's current Web Interface Guidelines, reads the files you name, and reports each problem as a file and a line number rather than as general advice you then have to locate. Two things to know. It reads code, so it catches missing focus states and unlabelled inputs but cannot tell you the page is ugly. And it downloads the rules fresh on every run, which keeps it current but means it needs a connection and can hand you a different answer next month.

Run it when a screen is close to finished and before anyone else sees it, or on a page that has grown by accretion and has never been checked. It is at its most useful on forms, dialogs and anything with keyboard focus. Give it specific files rather than the whole project: a narrow review you act on beats a long list you skim.

1. Open the Terminal app, the window where you type commands, in your project folder and paste the line below to install the skill where your assistant will find it.
2. Ask your assistant to review specific files, for example: review my UI in app/checkout for the web design guidelines. Naming the files matters, because pointed at everything it returns more than anyone reads.
3. Work through what it reports and fix things yourself, or approve its fixes one at a time. Treat each finding as a claim to check rather than an order: the rules are general, your screen is particular, and occasionally you will have had a reason.