AI Web Design & Frontend Skills Catalog · Question revision 1

Which ready-made AI agent skills are most useful for web design and frontend development, and when should you use each one?

A motion default needs an off switch.

If the job is a motion-heavy marketing page, Silk Design is a candidate to inspect, not a default recommendation. Its current instructions tell the agent to add smooth scrolling and reveal effects on every build. They assume React, Vite, Tailwind v4, Motion, GSAP, and Lenis. That is a substantial change if your project does not already use those tools.

Decision: Keep it outside our sixteen listings for now. If you try it, first check the stack, make non-essential motion disableable, inspect text and interaction on a phone, and compare the rendered page with a careful no-skill brief.

What we checked

The author’s README links sample sites and gives a Claude Code install path. The inspected reveal component animates when it enters the viewport; the inspected component and top-level skill instructions do not state a reduced-motion branch. This is not a full audit of the repository or the sample sites. The source is mutable and does not give us a pinned skill revision for a repeatable test.

W3C’s WCAG 2.2 explanation of Animation from Interactions says users should be able to turn off non-essential motion caused by interaction. That criterion is Level AAA. This source check does not establish a WCAG failure by the skill or any generated site.

A result report, not a result test

In the author’s community thread, one visitor says sample pages lagged in mobile Safari and some text over images was hard to read. The author replied that they would fix it. We did not reproduce the report, inspect the visitor’s settings, or verify a fix. A static screenshot would not settle scrolling, readability, or reduced-motion behavior.

What changes in the catalogue

No seventeenth listing is added. For a page that genuinely needs motion, ask whether the added dependencies and scrolling behavior earn their cost. A controlled comparison should keep the same brief, project, agent, and model; then check mobile text, interaction, reduced-motion behavior, and performance separately from visual preference. This pool has not run that comparison.