Frontend Tactics Atlas
A catalog of implementation moves, chosen after methodology and art direction are set. Tactics support the product job and visual thesis. Do not layer them because they sound premium. Source: frontend-frontier-pack/codex-skill/frontend-frontier/references/frontend-tactics-atlas.md
Design Position
| Field | Value |
|---|---|
| Design family | Method, tactics, and prompting |
| Use when | Use when shaping a design brief, tactic set, prompt, or review with Frontend Tactics Atlas. |
| System map | Design System Map |
| Proof path | Brief or review output should name the chosen method, tactics, constraints, and rendered proof path. |
Shell and Navigation
Floating nav -- use when hero has a scene or background worth seeing through. Avoid on dense/docs pages. Command palette -- use when power users need fast recall. Support keyboard, fuzzy search, recent actions. Prefer cmdk. Embedded host-native shell -- match host expectations (Shopify, Atlassian, Slack).
Layout and Information Density
Bento grids -- scan-friendly chunking. One module should dominate. Editorial grid -- use labels, captions, spacing discipline for authority. Card-container admin -- predictable scanning, one primary action per container.
Motion Tactics
Component motion (Motion): layout transitions, hover/press, overlays, menus, micro-interactions. Scroll storytelling (GSAP + ScrollTrigger, Lenis): landing pages with chapters, product walkthroughs, pinned heroes. Every section must advance understanding. View transitions: route/state continuity, progressive enhancement. Ambient surfaces: shader drift, subtle noise, light movement. Keep text zones calmer.
3D and Shader Tactics
Real 3D hero (R3F + drei): when space is the metaphor. Shader-first surface (OGL): when the material is the message. DOM + canvas orchestration: Motion/GSAP for shell, R3F/OGL for the surface.
Forms and Input
Progressive disclosure: advanced options hidden until needed. Natural-language input: date/time/scheduling/search. Always show parsed interpretation. Inline validation: validate on useful boundaries, do not scream early. Server-side validation still mandatory.
Data Display
Tables: scan, compare, filter, bulk act. Reveal secondary actions on hover/selection. Support keyboard, density, empty/loading states. Dashboards: lead with the question users most want answered. tabular-nums. No decorative chart noise. Real-time charts: animate quietly, stabilize axes. Dense inspectors: section aggressively, use progressive disclosure.
Wait-State and Feedback
Skeletons: match final layout, do not shimmer forever. Optimistic UI: when action usually succeeds. Clear rollback. Wait UX: show progress, phase, or useful next step. Toasts: lightweight confirmation, not durable state. Sonic/haptic feedback: sparse and semantic, capability-check first.
Search, Filters, Discovery
Search-first: useful defaults, recent/suggested queries, searchable objects. Faceted filtering: show active filters clearly, make undo cheap. Saved views: persist view state.
AI Interface Tactics
Agent/chat panel: preserve inspectable artifacts and actions. Chat should not be the only control plane. AI with explicit state: show status, confidence, provenance. Hybrid direct-manipulation + AI: direct controls remain first-class.
Docs Tactics
Searchable shell: Fumadocs or comparable. Navigation clarity beats decorative motion. Interactive code/playgrounds: instant reset, copyable snippets. Pattern catalog: example, rationale, states, a11y notes, code.
Accessibility (Always)
APG-aligned widgets: follow ARIA Authoring Practices. Reduced-motion: simplify, do not merely slow down. Contrast discipline: clear language, visible focus, durable contrast during animation.
Selection Cheat Sheet
- Trust-critical flow: content-first, strong wait UX, explicit recovery
- Narrative marketing: GSAP story, shader/3D only if conceptually justified
- Embedded admin: card layout, saved views, tables, command palette
- Docs: Fumadocs, strong IA, search, subtle motion
- Frontier microsite: shader-first or 3D hero, asset staging, reduced-motion fallback
- AI workspace: hybrid direct-manipulation + AI, persistent state, interruptible UI
Timeline
- 2026-07-01 | Design category refresh added this page to the Method, tactics, and prompting family, linked it to Design System Map, and kept it standalone because Frontend Tactics Atlas owns a distinct design decision surface in this family. Source: User request, 2026-07-01