TYPO3 Frontend Patterns Skill — Development skill for Claude Code
Reusable frontend patterns (sticky header, breadcrumb, lazy loading).
How to install TYPO3 Frontend Patterns Skill
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open netresearch/typo3-frontend-patterns-skill and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What TYPO3 Frontend Patterns Skill does
Reusable frontend implementation patterns for TYPO3 v13+ sitepackage development. Each pattern provides a complete implementation with Fluid template, TypeScript plugin, SCSS partial, and accessibility considerations.
Alternatives in Development
- Bypass 403 — Probe a 403/401 endpoint with the most-paid bypass tricks (header injection, path encoding, method swap, WAF f 4.5k ★
- License — Check that every Python source file carries the required SPDX Apache-2.0 license header 1.1k ★
- Claude Instructions For Local Skill Loading — This file tells Claude how to load skills locally 845 ★
README
TYPO3 Frontend Patterns Skill
Reusable frontend implementation patterns for TYPO3 v13+ sitepackage development. Each pattern provides a complete implementation with Fluid template, TypeScript plugin, SCSS partial, and accessibility considerations.
Installation
Claude Code Marketplace
claude install netresearch/typo3-frontend-patterns-skill
Composer
composer require netresearch/typo3-frontend-patterns-skill
Available Patterns
| Pattern | Description |
|---|---|
| Sticky Header | Scroll-triggered fixed header with requestAnimationFrame optimization |
| Lazy Loading | Deferred component initialization using IntersectionObserver |
| Breadcrumb | Breadcrumb navigation with JSON-LD structured data and Schema.org markup |
| Language Switcher | Multi-language navigation using b13/menus LanguageMenu DataProcessor |
| Animations | Scroll-triggered animations with prefers-reduced-motion support |
| Scroll to Anchor | Smooth scroll to anchor links with sticky header offset compensation |
| Skeleton Loading | CSS-only shimmer placeholder animations for async content |
| Toast Notification | Lightweight notification system with auto-dismiss and ARIA live regions |
| Back to Top | Scroll-to-top button with visibility threshold and smooth scroll |
License
MIT
Related Skills
Agentic MCP Skill
Agentic-MCP, Progressive MCP client with three-layer lazy loading. Validates AgentSkills.io pattern for effici
Forge Load
Lazy skill loading library for non-Claude-Code providers — part of the forge module framework
Lazy Skills
Progressive skill-loading orchestrator for Claude Code. Auto-routes multi-step tasks across connected skills w
TYPO3 A11y Skill
WCAG 2.1 AA accessibility patterns for TYPO3 projects
Frontloom Angular
Use this skill for Angular frontend tasks. Enforces idiomatic Angular patterns including signals, standalone c
Frontloom Astro
Use this skill for Astro frontend tasks. Enforces idiomatic Astro patterns including content-first architectur
Related Agents
Narwhal Performance
Web-performance specialist for the narwhal audit — Core Web Vitals hygiene, render-blocking resources, image w
Implement Performance Explorer
Explores 3 performance optimization approaches - caching, lazy loading, and
Angular SPA
Expert Angular frontend developer. Use for building SPA UIs with standalone components, signals, lazy routing,