Vibe Coding Prompts

Accessibility Acceptance Criteria Builder

Turn a feature brief into concrete accessibility behavior, acceptance criteria, and tests that an AI coding assistant can implement and verify.

FreeClaudeChatGPT
Best for

Vibe coders who need implementation-ready accessibility requirements before asking an AI assistant to build a feature.

Suitable LLM groups
FrontierReasoning
Download Prompt.md
Prompt
You are an accessibility-focused frontend architect who specializes in testable inclusive interaction requirements.

Inputs:
1. Feature, users, and primary tasks: {{feature_context}}
2. Planned interface, components, and interactions: {{interface_design}}
3. Content, media, validation, and dynamic updates: {{content_and_states}}
4. Platforms, frameworks, and assistive technology targets: {{technical_context}}
5. Accessibility standard, supported browsers, and constraints: {{constraints}}

Do the following:
1. Map the feature into semantic structure, accessible names, relationships, reading order, focus order, keyboard commands, pointer alternatives, and expected assistive-technology announcements.
2. Define behavior for zoom, reflow, contrast, color independence, target size, text spacing, reduced motion, high contrast, localization, errors, status updates, and time limits where relevant.
3. Write specific Given-When-Then acceptance criteria for every meaningful interaction and state, including loading, empty, validation, error, success, disabled, and permission-limited conditions.
4. Separate checks suitable for automated tools from keyboard, screen-reader, zoom, visual, cognitive, and user testing, and identify the limitations of automation.
5. Produce an accessibility specification, acceptance-criteria table, implementation notes, test matrix, manual test script, and definition-of-done checklist. Do not claim conformance based only on automated scans.

How to use

  1. Describe every interaction and dynamic state.
  2. Name the accessibility standard and target technologies.
  3. Include non-pointer alternatives for gestures.
  4. Turn the criteria into the coding prompt and definition of done.

Example input

Feature: Drag-and-drop lesson planner for teachers. Interface: lessons can be reordered between weekdays, edited in a modal, duplicated, and deleted with undo. Content: dynamic save status and validation for overlapping times. Stack: React and dnd-kit. Targets: keyboard, NVDA with Firefox, VoiceOver with Safari, 400% zoom, and WCAG 2.2 AA. Constraint: drag behavior must also work without a pointer.

Example output

The criteria require semantic day lists, visible and announced item position, keyboard pickup, movement, drop, and cancel controls, plus non-drag move actions. Focus returns to the initiating lesson after modal close or undo. Overlap errors are linked to fields and summarized, while save status uses a polite live region without repeated noise. The matrix separates axe checks from manual keyboard, NVDA, VoiceOver, zoom, reduced-motion, and high-contrast testing.

Customization tips

  • Use Given-When-Then behavior for complex interactions.
  • Specify focus destination after every dialog or deletion.
  • Test zoom and reflow with realistic content.
  • Do not rely on automated accessibility tools alone.

Tags

#web-accessibility#acceptance-criteria#wcag#accessible-components#vibe-coding

FAQ

What is this prompt for?
It creates precise accessibility behavior and acceptance tests for a feature before implementation.
How should I customize it?
Provide the feature, interactions, components, dynamic states, framework, standard, browsers, assistive technologies, and constraints.
Are there any limitations?
It cannot certify conformance or replace testing with disabled users, and assistive-technology behavior may vary by implementation and platform.
How is it different from a basic prompt?
It maps semantics, keyboard, focus, announcements, visual access, dynamic states, and manual versus automated tests into verifiable acceptance criteria.
Free

AI Coding Task Sequence Generator

Convert a feature brief into small, dependency-aware AI coding tasks with checkpoints that prevent one oversized generation from destabilizing the app.

ClaudeChatGPT
#task-decomposition#ai-coding-workflow#incremental-delivery
Free

App Performance Budget Planner

Set measurable performance budgets for an AI-built app and turn them into architecture choices, tests, and regression gates.

ClaudeChatGPT
#web-performance#performance-budget#core-web-vitals
Free

Behavior-Preserving Refactor Planner

Break a risky cleanup into verifiable steps that preserve user-visible behavior while improving an AI-built codebase.

ClaudeChatGPT
#refactoring#behavior-preservation#technical-debt

Related Skills

UI & Web BuildingFree

Accessible Component Pattern Designer

Design accessible UI components with semantics, keyboard behavior, focus, states, announcements, content rules, and tests.

ClaudeChatGPT
#accessible components#WCAG#keyboard UX
UI & Web BuildingFree

Frontend Accessibility Compliance Reviewer

Review frontend interfaces for accessibility, keyboard use, semantics, focus, forms, contrast, motion, and assistive technology support.

ClaudeChatGPTCursor
#web accessibility#WCAG#frontend audit

Related Articles

Article · Vibe Coding

How do I use AI tools like Lovable or Cursor to build an app?

AI app builders work best when users provide a scoped feature request, data model, user flow, UI constraints, acceptance criteria, and test cases.

Jul 9, 20268 min read
Read How do I use AI tools like Lovable or Cursor to build an app?
Article · Vibe Coding

What is vibe coding, and where does it break?

Vibe coding can help users prototype quickly with natural language, but it breaks when requirements, security, data model, testing, and maintainability are ignored.

Jul 9, 20268 min read
Read What is vibe coding, and where does it break?
Article · AI Coding

How do I write a bug report that an AI coding tool can fix?

A strong AI-ready bug report includes steps to reproduce, expected behavior, actual behavior, environment, logs, screenshots, and acceptance criteria.

Jul 9, 20268 min read
Read How do I write a bug report that an AI coding tool can fix?