Fieldcraft is a small set of Agent Skills for reviewing form-heavy product interfaces: setup flows, configuration generators, admin settings, onboarding forms, and similar screens where feedback, preview, and final actions have to stay close to the user's current decision.
| Area | What it catches | Better shape |
|---|---|---|
| Field feedback | Errors, warnings, and help text routed only to a global status area | Put the message next to the field or option that caused it |
| Field verification | Single-field remote checks shown as oversized panels, unclear states, or stale results | Keep the action and canonical result compact, local, and tied to the current value |
| Field layout | Sibling controls drift because one field has help, status, or candidates below it | Align the interactive control rows and let feedback expand only its owner |
| Form flow | Hidden-mode errors, unclear required fields, and disabled actions without reasons | Match guidance to the current choice and explain blockers locally |
| Output boundaries | Preview or status panels becoming the main place users discover mistakes | Keep output panels for generated files, commands, logs, and final actions |
The form feedback comparison shows the same setup form before and after applying Fieldcraft's review guidance.
The asynchronous field verification comparison shows why one field-owned remote check should stay compact and local.
The field-row alignment comparison shows how field-owned feedback can make a sibling control drift when the complete field groups are aligned instead of their interactive control rows.
| Fieldcraft owns | Use mature tools for | Out of scope |
|---|---|---|
| Field-local validation and help | Browser automation and screenshots with Playwright CLI or Playwright MCP | Visual preset packs |
| Same-row control alignment and field-owned feedback layout | Browser geometry and responsive evidence from the available browser path | General visual restyling without a form workflow problem |
| Compact field-owned verification states and response placement | Remote API behavior, request tracing, and network evidence from project tooling | Caching policies or automatic request strategies without product evidence |
| Form flow and progressive disclosure | Performance, SEO, and broad quality audits with Lighthouse or web-quality skills | Framework-specific component stacks |
| Input, preview, output, and action boundaries | Deep accessibility audits with axe or WCAG-focused tooling | Replacing a project's design system |
| Source-only review with explicit confidence limits | Console logs, network checks, and runtime debugging from browser tooling | A guarantee of a particular visual style |
Fieldcraft does not install Playwright, browser binaries, MCP servers, or other browser-control tools. It can review source code without a browser, but screenshots and interaction evidence require the host agent environment to provide a browser path such as Playwright CLI, Playwright MCP, Browser Use, local Chromium/Chrome, or existing CI/user screenshots.
If you explicitly ask for screenshots or browser interaction and no browser path is available, the agent should report the missing tool instead of silently downgrading to source-only review. Source-only review is still useful when you accept that fallback, and findings should mark visual layout claims as inferred.
| Agent | Support | Install |
|---|---|---|
| Codex | Native SKILL.md |
cp -r skills/product-form-ux ~/.agents/skills/ |
| Claude Code | Native SKILL.md |
cp -r skills/product-form-ux ~/.claude/skills/ |
| OpenCode | Native SKILL.md |
cp -r skills/product-form-ux ~/.agents/skills/ |
Codex:
mkdir -p ~/.agents/skills
cp -r skills/product-form-ux ~/.agents/skills/Claude Code:
mkdir -p ~/.claude/skills
cp -r skills/product-form-ux ~/.claude/skills/OpenCode also discovers Agent Skills from ~/.agents/skills:
mkdir -p ~/.agents/skills
cp -r skills/product-form-ux ~/.agents/skills/For repository-local use, copy the skill into .agents/skills/ for Codex and
OpenCode, or .claude/skills/ for Claude Code.
Ask your coding agent to use the skill during review or implementation:
Use $product-form-ux to review this setup flow. Focus on validation placement,
disabled actions, and whether the preview/status panel is doing the right job.
Use when building or reviewing a form-heavy product interface: a setup wizard, configuration generator, admin settings surface, checkout-like flow, onboarding form, or similar UI.
Then ask your coding agent to use product-form-ux when reviewing or changing a
form-heavy product UI.