219 lines
8.2 KiB
YAML
219 lines
8.2 KiB
YAML
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
|