apiVersion: devrunbook.io/v1alpha1
kind: Playbook
metadata:
  id: audits.frontend-ux-audit
  slug: frontend-ux-audit
  version: 1.0.0
  title: Frontend UX and Interaction Audit
  summary: Evaluate hierarchy, interaction clarity, responsive behavior, empty states, consistency and perceived product quality
    using the running application where available.
  category: audits
  tags:
  - frontend
  - ux
  - accessibility
  lifecycle: reviewed
  riskTier: low
  authors:
  - name: DevRunbook Core Team
  license: MIT
package:
  files:
  - path: prompt.md
    role: template
    digest: true
    exportByDefault: false
  - path: README.md
    role: documentation
    digest: true
    exportByDefault: false
  - path: CHANGELOG.md
    role: changelog
    digest: true
    exportByDefault: false
  - path: examples/minimal.yaml
    role: example
    digest: true
    exportByDefault: false
  - path: evaluations/static-structure.yaml
    role: evaluation
    digest: true
    exportByDefault: false
spec:
  type: guided
  intent:
    problem: Development work around frontend ux and interaction audit is often underspecified, inconsistently executed or
      reported without enough evidence.
    outcome: Evaluate hierarchy, interaction clarity, responsive behavior, empty states, consistency and perceived product
      quality using the running application where available.
    whenToUse:
    - Use this playbook when the repository needs a bounded frontend ux and interaction audit task with explicit evidence
      and completion criteria.
    - Use it when Codex should follow a repeatable workflow rather than improvise from a one-line request.
    whenNotToUse:
    - Do not use it when the desired outcome or authority boundaries are still materially undecided.
    - Do not use it to access unavailable production credentials, bypass safeguards or claim validation that cannot be performed.
  modes:
  - inspect
  - plan
  defaultMode: inspect
  autonomy:
    min: observe
    max: diagnose
    default: diagnose
  inputs:
  - key: targetFlows
    label: Target flows
    description: List the user journeys or operational flows that should receive the deepest review.
    type: string-list
    required: true
    sensitive: false
    includeInOutput: true
  - key: supportedViewports
    label: Supported viewports
    description: Select the viewport classes that must be inspected.
    type: multiselect
    required: true
    sensitive: false
    includeInOutput: true
    default:
    - mobile
    - laptop
    - desktop
    options:
    - mobile
    - tablet
    - laptop
    - desktop
    - ultrawide
  compatibility:
    repositoryRequired: true
    languages: []
    frameworks: []
    packageManagers: []
    databases: []
    deploymentTypes: []
    requiredProfileCapabilities: []
    incompatibleConditions: []
  guardrails:
  - id: guardrail-1
    severity: blocking
    text: Inspect the running application where available; do not infer all user behavior from component code alone.
  - id: guardrail-2
    severity: blocking
    text: Do not alter production code in inspect mode.
  - id: guardrail-3
    severity: blocking
    text: Include loading, empty, error, disabled, responsive and keyboard states in the evidence set.
  workflow:
  - id: identify-flows
    title: Identify critical flows
    instruction: Map the selected flows, roles, routes and major states before evaluating visual polish.
    required: true
  - id: run-app
    title: Open the application
    instruction: Use the documented safe development workflow and record unavailable dependencies or degraded states.
    required: true
  - id: inspect-viewports
    title: Inspect viewports
    instruction: Review each selected viewport for hierarchy, density, clipping, overflow and action placement.
    required: true
  - id: inspect-interactions
    title: Inspect interactions
    instruction: Exercise keyboard, pointer, validation, loading, empty and error behavior for critical actions.
    required: true
  - id: compare-consistency
    title: Compare consistency
    instruction: Find inconsistent patterns in navigation, forms, tables, feedback, terminology and design tokens.
    required: true
  - id: prioritize
    title: Prioritize findings
    instruction: Rank findings by user impact, frequency, severity, effort and implementation dependency.
    required: true
  validation:
    commandRoles:
    - dev-start
    - end-to-end-test
    - smoke-test
    checks:
    - id: check-1
      type: assertion
      description: Every high-priority finding references a concrete screen, state and user consequence.
      blocking: true
      evidence: Referenced files, command results or explicit review notes.
    - id: check-2
      type: assertion
      description: All selected flows and viewports have recorded evidence or a stated blocker.
      blocking: true
      evidence: Referenced files, command results or explicit review notes.
    - id: command-dev-start
      type: command
      description: Run the resolved dev-start command when the repository profile provides it and record the result.
      blocking: true
      evidence: Resolved command, exit status and concise result summary.
    - id: command-end-to-end-test
      type: command
      description: Run the resolved end-to-end-test command when the repository profile provides it and record the result.
      blocking: true
      evidence: Resolved command, exit status and concise result summary.
    - id: command-smoke-test
      type: command
      description: Run the resolved smoke-test command when the repository profile provides it and record the result.
      blocking: true
      evidence: Resolved command, exit status and concise result summary.
  completion:
    criteria:
    - Findings reference concrete screens and interaction states.
    - Recommendations are prioritized by user impact and effort.
    - Validation evidence and unresolved limitations are reported honestly.
  failurePolicy:
    onValidationFailure: Investigate failures caused by the current work, repair them when they remain within scope, rerun
      affected validation and report any genuine blocker without claiming success.
    onAmbiguity: Use repository evidence and existing conventions for minor reversible choices. Preserve current behavior
      and stop before any material irreversible decision that the specification does not resolve.
    onMissingContext: Inspect the repository for missing non-sensitive context. Never invent commands, credentials, production
      behavior or validation results; report what remains unavailable.
    onOutOfScopeCause: Explain the evidenced out-of-scope cause, avoid unrelated changes and provide the smallest safe follow-up
      recommendation.
    onExternalDependencyUnavailable: Use an approved local substitute or fixture only when it preserves the behavior under
      test. Otherwise record the blocked validation and do not claim the external path succeeded.
    onUnableToReproduce: Record attempted reproduction, environment and observed evidence. Do not apply speculative production
      changes; provide the narrowest next diagnostic action.
  reporting:
    sections:
    - id: outcome
      title: Outcome
      required: true
      description: State the delivered result or audit conclusion without overstating evidence.
    - id: evidence
      title: Evidence and scope
      required: true
      description: List inspected or changed areas and the evidence supporting the result.
    - id: validation
      title: Validation
      required: true
      description: Report commands, manual checks and their actual outcomes.
    - id: risks
      title: Risks and limitations
      required: true
      description: State residual risk, inaccessible evidence and untested conditions.
    - id: follow-up
      title: Recommended follow-up
      required: true
      description: List the smallest useful next actions or state None.
  template:
    main: prompt.md
    partials: []
  exports:
    prompt: true
    markdown: true
    runPack: false
    agentsSuggestion: false
quality:
  reviewStatus: editorial-reviewed
  testedStacks: []
  knownLimitations:
  - Repository-specific effectiveness depends on the accuracy of the selected profile and the evidence available to Codex.
  evaluationCaseIds:
  - frontend-ux-audit.static-structure