UI Spatial Canvas

Quick Index (Action-Routed)

Read First (All Actions)

1. Mission
2. Use This Skill When
3. Scope Boundary
4. Core Constraints (Non-Negotiable by Default)

Action Modules (Read As Needed)

1. Designing modality-specific flows:

• Interaction Modalities

1. Commerce integration decisions:

• Commerce Pattern

1. Visual system design:

• Visual Language

1. Building and validating implementation:

• Implementation Workflow
• Accessibility and Safety Guardrails
• Exception Policy
• Acceptance Checklist

Output

1. Deliverable Format
2. Documentation Requirements

Mission

Design and implement a frictionless, content-first interface that behaves like a focused application workspace rather than a conventional scrolling website.

Use This Skill When

1. building or refactoring end-user, member, and admin UI flows
2. designing interaction models for browse, create, manage, or transact workflows
3. defining frontend visual language (typography, overlays, motion, adaptive backgrounds)
4. reducing click depth and navigation friction in user-critical flows

Scope Boundary

This skill applies the Spatial Canvas UI paradigm.

Use Thoughtful Approach for:

1. generic end-user expectation modeling
2. must-have vs nice-to-have feature triage
3. scope-safe product enhancement decisions outside Spatial Canvas specifics

Core Constraints (Non-Negotiable by Default)

1. no-scrollbar-first design:

• avoid horizontal and vertical scrollbars across desktop/mobile
• if unavoidable, scope the exception tightly and document why

1. unified tabular root:

• major domains stay at root-level tabs (for example: Home, Workspace, Tasks, Settings)

1. 1-click home anchor:

• users can always return to core root in one click or one gesture

1. minimal click-depth:

• optimize actions to smallest safe step count

1. in-situ actions:

• actions happen in context (overlay/modality) instead of route detours

Interaction Modalities

Explore (Public)

1. framed viewport navigation (swipe, arrow keys, wheel transitions)
2. no endless scroll as primary navigation pattern
3. focused detail view with contextual overlay actions (share, save, open, compare)

Workstream (Member)

1. root tabs for progress domains (for example: queue, active, completed)
2. fast triage interactions (gesture, shortcut, tap-zone based)
3. immediate contextual actions for editing, assigning, sharing, or approval

Operations (Admin)

1. flat root admin tabs for high-frequency actions
2. spatial organization for high-volume management workflows
3. command palette support for expert speed paths

Commerce Pattern

1. avoid separate high-friction storefront detours when possible
2. provide in-situ transaction or upgrade modality in the working context
3. prefer express completion paths for low-step conversion

Visual Language

1. typography as structure:

• use deliberate font pairings aligned to product voice and readability goals

1. adaptive theming:

• background and overlays should react to current task/context without reducing legibility

1. glass-and-grain overlays:

• use depth/translucency only when it improves focus and hierarchy

Implementation Workflow

1. map key user journeys (discover, execute, review, complete)
2. flatten information architecture to root-level navigation before styling
3. define home-anchor behavior globally (header, gesture, or persistent control)
4. design no-scroll viewport layouts for mobile and desktop first
5. place high-value actions in-context on the active surface
6. reduce click count per core flow and remove unnecessary intermediates
7. apply typography, overlay, and motion system
8. validate accessibility, focus order, and keyboard navigation
9. run responsive and regression checks for critical flows
10. document rationale and exceptions in repo docs

Accessibility and Safety Guardrails

1. preserve readable contrast and visible focus states
2. ensure keyboard equivalents for gesture-heavy flows
3. provide non-gesture fallback controls for all critical actions
4. do not trade payment/auth correctness for click reduction

Exception Policy

If constraints conflict:

1. prioritize correctness, accessibility, and legal/compliance requirements
2. allow scoped deviation from no-scrollbar rule only with documented rationale
3. preserve existing design-system patterns unless user explicitly requests Spatial Canvas override

Documentation Requirements

1. record major UI decisions and tradeoffs in canonical docs
2. add concise code comments for non-obvious interaction logic
3. capture any constraint exceptions with impact and rationale

Acceptance Checklist

1. root tabs are clear and immediately reachable
2. home anchor is always one action away
3. core flows have minimized interaction steps
4. in-situ overlays work across target viewports
5. keyboard and fallback controls exist for gesture-first flows
6. no-scrollbar-first goal achieved or deviations documented
7. docs updated for behavior and architecture changes

Anti-Patterns

1. deep nested menus hiding primary domains
2. route hopping for simple contextual actions
3. infinite-scroll dependence for core navigation
4. decorative motion that increases friction
5. aggressive visual effects that reduce readability

Deliverable Format

When applying this skill, provide:

1. updated interaction map
2. changed UI surfaces/components
3. click-depth improvements by flow
4. accessibility/fallback coverage summary
5. documented exceptions (if any)

Source Reference

Primary source for this skill:

• this SKILL.md

Related Skills

• UI Design Skills: apply source-grounded UX principles before visual/theming decisions.
• Order of Operations: sequence UI architecture, implementation, and validation correctly.
• Regression Prevention: protect critical flows while redesigning interaction patterns.
• Doc Maintenance: keep README/docs aligned with UX and workflow changes.
• Token Reduction: keep UI design communication concise and outcome-first.