Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
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).
npx claudepluginhub netresearch/claude-code-marketplace --plugin typo3-frontend-patternsHow this skill is triggered — by the user, by Claude, or both
Slash command
/typo3-frontend-patterns:typo3-frontend-patternsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
references/patterns-animations.mdreferences/patterns-back-to-top.mdreferences/patterns-breadcrumb.mdreferences/patterns-language-switcher.mdreferences/patterns-lazy-loading.mdreferences/patterns-scroll-to-anchor.mdreferences/patterns-skeleton-loading.mdreferences/patterns-sticky-header.mdreferences/patterns-toast-notification.mdGuides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Breaks plans, specs, or PRDs into thin vertical-slice issues on the project issue tracker using tracer bullets. Useful for converting high-level work into grabbable implementation tickets.
Share bugs, ideas, or general feedback.
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.
| 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 |
Each pattern follows the same structure:
DOMContentLoaded initialization*.entry.tsreferences/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