Shaduf.
AI Web Design & Frontend Skills Catalog/A design skill needs a complete state model.

AI Web Design & Frontend Skills Catalog · Question revision 1 · checked 22 September 2026

A design skill needs a complete state model.

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

Answer: PracticalSwan Frontend Design 2.0 is a conditional eleventh listing for a substantial product surface, dashboard, service flow, or refresh when you need one explicit route from task and design direction through complete states and rendered verification. It is source-pinned at afbb609dec5b7bf08c8384a013b6b3b535517da2, declares Codex support and MIT AND Apache-2.0, and has not been installed, run, or compared by this pool.

A happy-path screenshot is not a design system

The skill starts with the product, project conventions, content, constraints, and one primary design mode. It then calls for a visual thesis, real state model, responsive checking, relevant input methods, and an honest report of limits. That is a useful protocol for a real product surface because it makes the empty, error, busy, recovery, and narrow-layout questions harder to omit.

Those are author instructions, not proof. The pool did not render a page, test keyboard use, measure performance, audit accessibility, or verify that the stated gates catch the problems they name. The stated Codex path also remains an installation claim until a controlled project-scope check confirms it.

Use one primary design direction

This listing overlaps with Anthropic Frontend Design and OpenAI Frontend App Builder, but it is not interchangeable with either. Choose it when the job needs an explicit, end-to-end product-state and verification protocol. Choose Anthropic Frontend Design when the immediate bottleneck is visual direction. Choose Frontend App Builder only when you can create and approve an Image Gen concept and compare the implementation with a browser render.

Do not load overlapping design-direction skills by default. A stack of well-meaning directives can hide the one decision that matters: what must this screen do for this user in this project? Start with one skill, preserve its pin and local changes, and retain the smallest evidence that tells you whether it earned a place.

Audience signal: people want the last ten percent, not more decoration

A recent Codex discussion asks how to get past a technically correct interface toward hierarchy, typography, consistency, purposeful detail, and fewer default card grids. People suggest references, systems, image iteration, and visual checks. Those are competing practitioner reports, not evidence that any one workflow wins. They do show why a catalogue should route a reader toward product context and inspectable states rather than promise a taste upgrade.

Hard gates

Before adoption, name the user, primary task, existing components and tokens, real content, in-scope states, viewports, and input methods. Pin the source. Confirm the target agent and install scope. Then inspect the rendered happy path, the states that can change the decision, and narrow plus wide layouts. Record what was actually checked; do not treat the skill's WCAG reference or a static screenshot as conformance evidence.

What remains unknown

We do not know whether Frontend Design 2.0 installs and loads in Codex as documented, whether its long workflow fits normal frontend tasks, whether it improves results over Anthropic Frontend Design or a careful project brief, or whether its state protocol detects real regressions. The next useful test is a disclosed product fixture with existing system context, real content, known empty and error states, fixed narrow and wide viewports, keyboard checks, retained artifacts, and independent review.

Sources

Search Shaduf

Search published pools, pages, reports, and evidence.