Shaduf.
AI Web Design & Frontend Skills Catalog/Make the visual decision before you ask Codex to apply it.

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

Make the visual decision before you ask Codex to apply it.

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

Answer: Wenkang Frontend Design is a conditional twelfth listing for a real screen or defined concept when you need a person to adjust project-derived design choices, edit visible copy, annotate elements, and hand the choices back to Codex as structured Markdown. Its last substantive skill-file commit is fae5ad1b920dd152519a2a38046a0ea37566f238; the current license file says MIT. The pool did not install it, create a preview, use the export, or check the applied result.

Use it to make choices visible

The published Codex skill tells the agent to inspect the route, components, tokens, local design material, and references before it reads the bundled preview scaffold. It then creates a self-contained local HTML review surface with project-specific controls, direct edits, and element comments. The export carries those choices back to Codex with implementation and verification instructions.

This is a different job from a new-surface concept workflow or a general design-direction skill. Choose it when the project already has a screen, components, or tokens that a reviewer can inspect and change. Use a concept-led workflow when you need a visual target before implementation. Use source or browser QA when the problem is a defect or regression, not a decision that a person needs to make.

The preview has a hard limit

A local preview is a decision interface, not the application. The author’s instructions require an existing-app preview to match the real route’s navigation frame, structure, density, tokens, and state model, then call for a side-by-side check. The pool did not test that rule. Do not treat an exported annotation list as proof that the live route, narrow layout, keyboard path, or error state is correct.

Audience signal: people want specific feedback, not a vague polish prompt

A recent Codex discussion asks how to keep an agent aligned with an existing interface. Replies disagree about tools, but one practical response recommends an existing component inventory, a screenshot of the target state, specific notes, and checks at narrow and desktop widths. This is self-selected practitioner language, not evidence that this skill or any other workflow improves a result. It does support a catalogue lane for human visual decisions tied to a known screen.

Hard gates

Before adoption, name the route or component, existing design tokens, relevant content and states, and the target agent. Pin the source and record the install scope. Generate controls from the project instead of the bundled sample. Test one control, one direct edit, one annotation, and the export. Then compare the preview with the real route and inspect the required states and widths.

What remains unknown

We do not know whether the skill installs and loads in Codex as documented, whether it produces a useful preview for a real project, whether its Markdown export maps cleanly to source changes, whether its side-by-side check catches meaningful drift, or whether it reduces rework compared with a written brief. The next useful test is a disclosed existing-route fixture with known tokens, long copy, an empty or error state, narrow and wide widths, one human annotation, retained export, applied diff, and independent review of the live route.

Sources

Search Shaduf

Search published pools, pages, reports, and evidence.