Skill Wiki
Consistent Form Action Placement
Primary and secondary form actions (submit, cancel, back) must use clear, consistent labels and be placed in a predictable position throughout a product, so users build reliable spatial memory for action buttons.
$ prime install @community/rule-consistent-form-action-placementProjection
Always in _index.xml · the agent never has to ask for this.
ConsistentFormActionPlacement [rule] v1.0.0
Primary and secondary form actions (submit, cancel, back) must use clear, consistent labels and be placed in a predictable position throughout a product, so users build reliable spatial memory for action buttons.
Loaded when retrieval picks the atom as adjacent / supporting.
ConsistentFormActionPlacement [rule] v1.0.0
Primary and secondary form actions (submit, cancel, back) must use clear, consistent labels and be placed in a predictable position throughout a product, so users build reliable spatial memory for action buttons.
Applies To
@community/type-html-artifact
Severity
warning
Placement Convention
- Desktop: Primary action right-aligned in the form footer; secondary (Cancel/Back) to its left.
- Mobile: Primary action full-width; secondary as a text link below or styled as a secondary button.
- Multi Step: Back left, Continue/Next right — consistent across all steps.
Label Rules
- Use verb + noun: 'Save changes', 'Create account', 'Place order', 'Send message'.
- Never use 'Submit', 'OK', 'Confirm' without a noun clarifying what is being confirmed.
- Destructive actions (Delete, Remove) must use a distinct color (error/red tone) and a confirmation step.
- On the final step of a wizard, change 'Continue' to the final action label: 'Create workspace'.
Loaded when retrieval picks the atom as a focal / direct hit.
ConsistentFormActionPlacement [rule] v1.0.0
Primary and secondary form actions (submit, cancel, back) must use clear, consistent labels and be placed in a predictable position throughout a product, so users build reliable spatial memory for action buttons.
Applies To
@community/type-html-artifact
Severity
warning
Placement Convention
- Desktop: Primary action right-aligned in the form footer; secondary (Cancel/Back) to its left.
- Mobile: Primary action full-width; secondary as a text link below or styled as a secondary button.
- Multi Step: Back left, Continue/Next right — consistent across all steps.
Label Rules
- Use verb + noun: 'Save changes', 'Create account', 'Place order', 'Send message'.
- Never use 'Submit', 'OK', 'Confirm' without a noun clarifying what is being confirmed.
- Destructive actions (Delete, Remove) must use a distinct color (error/red tone) and a confirmation step.
- On the final step of a wizard, change 'Continue' to the final action label: 'Create workspace'.
Rationale
Inconsistent action placement violates Nielsen's consistency heuristic. Users who learn 'Continue is bottom-right' should not encounter 'Next' bottom-left on the next step. Generic labels like 'Submit' force users to reason about what will happen; specific labels like 'Create account' or 'Place order' confirm the outcome.
Applies To
@community/type-html-artifact
Severity
warning
Placement Convention
- Desktop: Primary action right-aligned in the form footer; secondary (Cancel/Back) to its left.
- Mobile: Primary action full-width; secondary as a text link below or styled as a secondary button.
- Multi Step: Back left, Continue/Next right — consistent across all steps.
Label Rules
- Use verb + noun: 'Save changes', 'Create account', 'Place order', 'Send message'.
- Never use 'Submit', 'OK', 'Confirm' without a noun clarifying what is being confirmed.
- Destructive actions (Delete, Remove) must use a distinct color (error/red tone) and a confirmation step.
- On the final step of a wizard, change 'Continue' to the final action label: 'Create workspace'.
Source
prime-system/examples/frontend-design/primes/compiled/@community/rule-consistent-form-action-placement/atom.yaml