今日热榜中文

Use AI to improve web design and mobile usability

Start with the specific web-design-guidelines skill to locate control, form, keyboard and mobile-layout issues. Use review-animations when the remaining problem is motion.

Start with the web-design-guidelines skill

For an existing page with hard-to-find buttons, confusing forms or awkward mobile interactions, choose web-design-guidelines from Vercel Agent Skills. A skill supplies task instructions. This one reads the files you specify and reviews them against current interface rules.

Its review covers keyboard access, control labels, form feedback, touch interactions and layout. Provide one page’s files, request locations and then decide what to change. This recommendation concerns the specific skill’s purpose, not the whole pack’s star count.

Prepare before starting

A screenshot can support a visual discussion, but this skill primarily reviews code. Request findings before making focused changes. You do not provide passwords or keys to this website, and this plan does not require a new paid service.

  1. The files or directory for an existing page, its intended users, their task and the interaction you want to improve.
  2. A skills-compatible assistant. Follow Vercel’s README and select web-design-guidelines for this review rather than installing every skill.
  3. A reachable local preview and, when available, the phone you want to check. Follow the code review with browser and phone checks; page inspection requires an available browser tool.

Copy this first prompt

Use web-design-guidelines to review [page files or directory]. The page helps [intended users] complete [specific task]. Fetch the latest rules, then focus on buttons, forms, keyboard access and mobile layout. Rank findings by impact and include the file and line, the user problem and the smallest suggested change. Report findings first without editing code. If you inspect the browser, state the URL and screen width; mark any effect you have not observed as needing verification.

How can you verify the improvement?

  1. Each finding should identify code and a user action: for example, whether Tab shows the selected control or a form error explains what to do next.
  2. After changes, check a desktop browser and a phone-width preview for overflowing text, usable buttons, inputs and error messages. For device confirmation, repeat the workflow on a physical phone.
  3. For motion, repeat actions rapidly and check the system’s reduced-motion setting. Keep before-and-after records and distinguish code review, browser preview and physical-device checks.

Actual example

When should you switch to review-animations?

For a slow dialog animation, awkward click feedback or a stuttering transition, choose review-animations from Emil Kowalski Skills. It reviews existing motion code for purpose, timing, interruption and reduced-motion behavior.

Provide the component code and a specific question. Its output is an animation review; it does not establish the mobile usability of the whole page. Continue the page review for ordinary form and layout issues.

Sources and next step

Sources checked on 2026-10-13. This plan recommends two specific skills and supplies a first prompt. Use your observed findings and checks to judge the changes.

Sources and ranking

This directory lists AI development plugins with public source code and a clear purpose. Browse by task, then open an introduction to learn what a project does, who it is for, and what you need to get started. It covers selected projects, not every AI plugin.

How do the three plugin types differ?

Tool connections (MCP) let AI assistants use external tools such as browsers, code repositories and databases. MCP is the protocol used for these connections.

Reusable skills give a compatible AI assistant instructions and guidance for a particular task.

Editor plugins run inside the software you use to write code, adding AI chat, completions or suggested edits.

How does “Most starred” work?

Projects are sorted by their total GitHub stars. Stars indicate interest; they are not downloads, active users or quality scores. A skill pack counts as one project. Daily star growth is not shown without historical records.

What does “Recently updated” mean?

It uses the most recent code push, which may not be a new release. The 7-day filter checks that project update time; ranking still uses all-time stars. Each introduction shows when its star count was collected. Failed updates keep the last saved data.

Introductions are based on public project documentation. These projects have not each been installed and tested here. Check the project documentation for setup, compatibility and service costs. Refreshing this list only reads saved data; it does not start collection.

UTC+8