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

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

Safari and WebGL video textures

Safari struggles to update several WebGL video textures in one frame, especially during motion on first load. Pause texture uploads while things move and hold the last frame. Source: X/@joshpuckett, 2026-08-25

Scrollbar gutter

If the page shifts about 15 px when a modal opens, the scrollbar vanished because the modal library set overflow: hidden on the body. Reserve the space up front with html { scrollbar-gutter: stable; }. Source: X/@gabriell_lab, 2026-08-12

Native-feeling mobile web

Emil Kowalski's table of mobile fixes: wrap hover styles in @media (hover: hover) and (pointer: fine); remove the tap highlight; use 100dvh for apps and 100svh for heroes; keep inputs at 16 px or more to stop zoom; give feedback on pointer-down and set touch-action: manipulation; set overscroll-behavior: none; use viewport-fit=cover with safe-area insets for the notch; user-select: none where long-press selects text; touch-action: pan-y on gesture surfaces; theme-color per scheme; and test on real hardware. Source: X/@emilkowalski, 2026-08-11, image reviewed

A draggable tab whose corners flatten as it moves, now with native squircles from CSS corner-shape and separate X and Y radii. Source: X/@k_grajeda, 2026-08-11

A visual builder for CSS Grid and Flexbox layouts that copies out the HTML and CSS. Source: X/@rammcodes, 2026-08-03

overscroll-behavior: contain stops the page behind a modal from scrolling when the modal reaches its end. Source: X/@gabriell_lab, 2026-07-28

Put a modal's backdrop-filter on a separate pseudo-layer instead of the modal itself to cut paint and compositing work during animation. Source: X/@gabriell_lab, 2026-07-18

Another drag-to-build grid generator that outputs HTML and CSS. Source: X/@rammcodes, 2026-07-19

---

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. private page