| name | typo3-frontend-patterns |
| description | Use when implementing common UI components in TYPO3 v13/v14 LTS sitepackages with Fluid 4/5, TypeScript, and SCSS — sticky header, lazy loading, breadcrumb, language switcher, animations, scroll-to-anchor, skeleton loading, toast notifications, back-to-top. Also triggers for: Fluid 5 strict-typed ViewHelpers, Camino theme, native dialog modal, post-v14 external build tools (#108055; see typo3-vite-skill). |
TYPO3 Frontend Patterns
Reusable implementation patterns for TYPO3 v13 and v14.3 LTS sitepackage development. Each pattern provides a complete implementation with Fluid template, TypeScript plugin, SCSS partial, and accessibility considerations.
v14 heads-up: the core no longer concatenates or compresses frontend CSS/JS (Breaking #108055). Pair these patterns with an external build tool — see typo3-vite-skill. Fluid 5 (v14) enforces strict ViewHelper typing (#108148): all VHs in pattern templates must have typed arguments + render(): string. Camino (v14.1+, #108539) is the v14 core's default theme alternative to bootstrap-package — patterns stay theme-agnostic.
These patterns solve common frontend problems that every TYPO3 sitepackage encounters. Instead of building from scratch, use these proven implementations that handle edge cases (scroll performance, reduced-motion, keyboard navigation, ARIA live regions) correctly from the start.
Available Patterns
| Pattern | Description | Key Features |
|---|
| Sticky Header | Scroll-triggered fixed header | IntersectionObserver, CSS transitions |
| Lazy Loading | Deferred component initialization | IntersectionObserver, placeholder content |
| Breadcrumb | Breadcrumb navigation | JSON-LD structured data, Schema.org |
| Language Switcher | Multi-language navigation | b13/menus LanguageMenu, flag icons |
| Animations | Scroll-triggered animations | prefers-reduced-motion support |
| Scroll to Anchor | Smooth scroll with offset | Header height compensation |
| Skeleton Loading | CSS placeholder animations | Content layout stability |
| Toast Notification | Notification messages | Auto-dismiss, ARIA live region |
| Back to Top | Scroll-to-top button | Visibility threshold, smooth scroll |
Implementation Convention
Each pattern follows the same structure:
- Fluid template -- Markup with semantic HTML and ARIA attributes
- TypeScript plugin -- Behavior with
DOMContentLoaded initialization
- SCSS partial -- Styling with Bootstrap integration
- Vite entrypoint -- Code splitting via
*.entry.ts
References
references/patterns-sticky-header.md -- Scroll-triggered fixed header with IntersectionObserverreferences/patterns-lazy-loading.md -- Deferred component initialization with placeholder contentreferences/patterns-animations.md -- Scroll animations with prefers-reduced-motion supportreferences/patterns-breadcrumb.md -- Breadcrumb navigation with JSON-LD structured datareferences/patterns-language-switcher.md -- Multi-language navigation with b13/menus LanguageMenureferences/patterns-scroll-to-anchor.md -- Smooth scroll with sticky header offset compensationreferences/patterns-skeleton-loading.md -- CSS placeholder animations for content loadingreferences/patterns-toast-notification.md -- Auto-dismiss notifications with ARIA live regionreferences/patterns-back-to-top.md -- Scroll-to-top button with visibility threshold
