Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add hueyexe/frontend-agent-skills --skill forms-inputs-checkoutgit clone --depth 1 https://github.com/hueyexe/frontend-agent-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/hueyexe/frontend-agent-skills/forms-inputs-checkout)<a href="https://agentmods.dev/skills/hueyexe/frontend-agent-skills/forms-inputs-checkout"><img src="https://agentmods.dev/badge/skills/hueyexe/frontend-agent-skills/forms-inputs-checkout/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/hueyexe/frontend-agent-skills/forms-inputs-checkout"><img src="https://agentmods.dev/badge/skills/hueyexe/frontend-agent-skills/forms-inputs-checkout.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00034 | $0.05071 |
| Opus 5 | $0.00017 | $0.02535 |
| Sonnet 5 | $0.00007 | $0.01014 |
| Haiku 4.5 | $0.00003 | $0.00507 |
Grade A, and why
forms-inputs-checkout scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 389 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Forms, Inputs, and Checkout
Purpose
Help an agent design, critique, and implement clear, accessible, high-conversion forms, inputs, validation, and checkout flows.
Treat every form as a barrier between a person and a goal. The agent's job is to reduce that barrier without collecting bad data, hiding meaningful choices, or weakening accessibility, privacy, legal, or business requirements.
When to use this skill
Use this skill for:
- Checkout, cart, payment, shipping, billing, promo-code, account, registration, sign-in, onboarding, subscription, lead-capture, support, survey, settings, profile, upload, and data-entry forms.
- Critiquing screenshots, wireframes, Figma descriptions, HTML/CSS/React components, design-system components, or product flows involving forms.
- Choosing labels, input controls, grouping, progress indicators, defaults, validation, error messages, help text, submit states, and success states.
- Making frontend guidance for semantic HTML forms, accessible names, focus, keyboard flow, validation, and responsive behavior.
When not to use this skill
Do not use this skill for:
- General page layout, landing pages, navigation, marketing content, or visual brand work unless the page contains a form or checkout decision.
- Backend data modeling, fraud detection, tax, legal, PCI/security implementation, or payment processor integration details beyond UX/frontend implications.
- General conversion-copy work outside form context.
- Native platform-specific form controls when the user explicitly asks for a platform guideline not covered by the source material. In that case, ask or use the appropriate platform skill/source.
Core principles
- Start outside-in. Begin with the user's goal and the moment in their journey, not with the database fields the organization wants.
- Remove, defer, infer, or default before designing another field. Every question creates effort and the possibility of error.
- Make the path to completion visually obvious. A form should have a clear scan line from title to first question to final action.
- Use controls that match the question. Prefer native, semantic form controls and visible options when the number of options is small.
- Use labels as durable context. Do not rely on placeholder-only labels for anything longer than a trivial, familiar, one-field interaction.
- Validate to help, not to scold. Validate after a person has finished an answer, prevent avoidable errors, and provide remedies in context.
- Design for mistakes. People will omit steps, choose the wrong action, mistype, misunderstand labels, and miss information under stress.
- Do not use color alone. Errors, success, required/optional status, disabled states, and payment/security cues need text and/or shape in addition to color.
- Keep checkout focused. Remove distractions, avoid forced account creation, show costs and consequences clearly, and keep the primary action aligned with the buyer's goal.
- Make progress honest. Use progress indicators only when the sequence and scope are stable enough that the indicator will not mislead.
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 389 lines · 34 tokens per session scan A c646343b2c16
forms-inputs-checkout is a skill published in the GitHub repository hueyexe/frontend-agent-skills (9 stars, last pushed 1mo ago), licensed MIT. It adds 34 tokens to every session and 5,071 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
paywall-design
Design high-converting, App Review-compliant paywalls and subscription upsell screens — value framing, plan presentation, trial/intro-offer design, and required legal elements. Use when building or improving a paywall, subscription screen, upsell, or "go Pro" flow, choosing trial framing, or fixing low conversion or a…
vibe-coding-advisor
Inject UX principle context into your AI coding session before generating components. Maps component types (forms, tables, dashboards, navigation, checkout, etc.) to relevant UX principles, fetches their vibeCodingPrompts, and returns an assembled context block ready to paste into Cursor, Claude Code, Windsurf, or any…
Accessibility Manual Audit
Teach agents to guide manual accessibility audits for keyboard, screen reader, zoom, reflow, focus, and WCAG 2.2 criteria that scanners miss.
interaction-design
Design meaningful interactions, microinteractions, animations, state machines, gesture patterns, error prevention, and product behavior. Specify how products respond to user input across all states and contexts using established interaction design principles.
ux-strategy
Connect design decisions to business outcomes through competitive analysis, opportunity mapping, Jobs to Be Done, outcome-driven discovery, value proposition design, and UX metrics. Shape product direction with strategic frameworks grounded in evidence.
design-ops
Run design sprints, manage handoff, establish team rituals, documentation standards, and design QA processes. Covers the operational side of design — how teams organize work, collaborate with engineering, and ship quality.