netresearch

TYPO3 Frontend Patterns Skill — Development skill for Claude Code

Development community intermediate

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