This commit is contained in:
@@ -0,0 +1,218 @@
|
||||
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
|
||||
Reference in New Issue
Block a user