typo3-skills

Battle-tested TYPO3 Fluid template patterns for site package development. Use this skill when building or maintaining a TYPO3 v12+ site package — regardless of CSS framework. Covers the full template hierarchy (Layouts → Pages → Partials → Atoms), CMS-first content architecture with lib.dynamicContent, colPos propagation for sidebar-aware styling, responsive image handling, WCAG 2.1 AA accessibility patterns, and progressive-enhancement JavaScript. Complements the typo3-playwright-ddev and typo3-tailwind-migration skills.

Use when merging two TYPO3 site packages, side-packages, or theme extensions into one TYPO3-compliant site package, consolidating files, TypoScript, site sets, Fluid templates, TCA overrides, Composer metadata, assets, or version compatibility.

Use when securing TYPO3 frontend forms (typo3/cms-form), frontend user registration forms (evoweb/sf-register), or installing/configuring Google reCAPTCHA (evoweb/recaptcha) in TYPO3 projects.

Migrate a TYPO3 theme from legacy/custom CSS to Tailwind CSS v4 in a DDEV environment. Use this skill when a TYPO3 project needs to convert its existing CSS-based site package to Tailwind utility classes while maintaining 1:1 visual parity. Covers the complete workflow from visual regression baseline capture through build pipeline setup, design token mapping, Fluid template migration, content element conversion, accessibility auditing, and cross-browser verification. Critical emphasis on regression-test-first approach — always capture baselines before any migration work begins.

Use when upgrading TYPO3 11 to TYPO3 12, checking extension compatibility, Composer blockers, Rector/Fractor migrations, deprecations, platform requirements, or planning a major-version migration. Covers analysis, planning, and execution of TYPO3 11 to 12 upgrades in Composer-based projects.

Use when upgrading TYPO3 12 to TYPO3 13, checking extension compatibility, Composer blockers, Rector/Fractor migrations, deprecations, platform requirements, or planning a major-version migration. Covers analysis, planning, and execution of TYPO3 12 to 13 upgrades in Composer-based projects.

Use when upgrading TYPO3 13 to TYPO3 14, checking extension compatibility, Composer blockers, Rector/Fractor migrations, deprecations, or planning a major-version migration. Covers analysis, planning, and execution of TYPO3 13 to 14 upgrades in Composer-based projects.

Configure TYPO3 v14 XML sitemaps with EXT:seo, multi-language support, page sitemaps, custom record sitemaps, PageType route enhancer mapping, and speaking URL generation for record detail pages. Use when adding, fixing, or extending `/sitemap.xml`, `RecordsXmlSitemapDataProvider`, custom sitemap data providers, EXT:news sitemap setup, hreflang-aware record links, or sitemap route enhancer configuration in a TYPO3 v14 project.

Run the day-to-day Playwright verification workflow for TYPO3 frontend changes in DDEV. Use when testing Fluid, CSS, and UI changes, capturing screenshots, running @stitch-vrt checks, debugging visual diffs, or verifying mounted content element and plugin pages.

Configure TYPO3 routeEnhancers for speaking URLs in site configuration, especially Extbase plugins with controller/action arguments, detail pages, filters, pagination, aliases, and cHash-sensitive parameters. Use when creating or fixing site config routing, mapping plugin GET parameters to route paths, or troubleshooting why TYPO3 falls back to query-string URLs.

Generate, validate, and implement structured data (Rich Snippets) for TYPO3 web pages to improve SEO. Identifies appropriate schema.org types, produces JSON-LD/Microdata/RDFa markup, provides TYPO3 Fluid and TypoScript integration, and validates against Google Rich Results expectations. Use when the user mentions rich snippets, structured data, schema markup, JSON-LD, schema.org, or SEO structured data in a TYPO3 context.

Create navigation menus in TYPO3 v13+ using the `menu` and `language-menu` data processors with PAGEVIEW/FLUIDTEMPLATE. Use this skill when building or modifying any kind of page navigation — main menus, breadcrumbs, language switchers, directory listings, sitemaps, or category-based menus — inside a TYPO3 site package. Covers TypoScript data processor configuration, all `special` menu types, available options, Fluid template rendering of menu items, and nested/multi-level menus.

Integrate and configure favicon, app icon, and web manifest support in TYPO3 v14 projects, including Fluid `f:page.headerData`, TypoScript head tags, `page.shortcutIcon`, site-level route enhancer mapping for `/site.webmanifest` and `/browserconfig.xml`, and practical verification steps. Use when creating or fixing favicon/app icon setup, wiring web manifest delivery, or migrating icon configuration in a TYPO3 v14 project.

Install, configure, and template the TYPO3 News Extension (`georgringer/news`) in DDEV-based TYPO3 projects. Use this skill when adding EXT:news to a project, wiring Site Set or TypoScript settings, choosing the correct News frontend plugin, overriding List/Detail/SearchForm/SelectedList templates, extracting reusable News partials, styling News markup with a Tailwind v4 pipeline, preserving EXT:news SEO view helpers in detail templates, or creating Playwright VRT coverage for News pages.

Use when adding AdSense for Search (AFS) to a site, configuring AFS in the AdSense console, integrating AFS into TYPO3, optimizing search ad revenue, or troubleshooting AFS. Covers AFS sign-up prerequisites, search styles, code placement, parameter tuning, Related Search, Shopping ads, responsive design, and policy compliance.

Implement and optimize Google AdSense on websites, including site approval, AdSense code placement, Auto ads, manual ad units, ads.txt, GA4 linking, blocking controls, experiments, and publisher-policy-safe monetization. Use when the user wants to add or troubleshoot AdSense, prepare a site for AdSense review, configure the AdSense UI for stronger revenue, or produce exact step-by-step AdSense setup instructions that stay aligned with privacy and compliance requirements.

Implement Google Analytics 4 on websites, configure privacy-compliant Google tag or GTM measurement, define GA4 events and key events, link AdSense revenue reporting, and provide exact Google Analytics UI steps. Use when the user wants to add or troubleshoot GA4, wire analytics into a website, track registrations/newsletter/lead goals, connect AdSense reporting, or keep Analytics aligned with consent/CMP requirements and data-protection law.

Implement Google's consent management platform for websites that use AdSense, Ad Manager, Google Ads, Google Analytics 4, or Google Tag Manager/gtag.js. Use when the user asks to set up Google CMP / Privacy & messaging / Funding Choices, configure Consent Mode v2, meet the Google-certified CMP + TCF requirement for EEA/UK/Switzerland traffic, or maximize Google ad revenue while staying privacy-compliant.

Implement Google Tag Manager on websites, including web-container installation, Google tag setup, consent-aware GTM architecture, triggers/variables/tags, preview and publish workflows, and exact Tag Manager UI instructions. Use when the agent needs to add or repair GTM, migrate from direct gtag.js to GTM, centralize Google tags, wire privacy-compliant GA4 or Google Ads tagging through GTM, compare client-side vs server-side tagging, or keep GTM aligned with GDPR, ePrivacy, UK, Swiss, and U.S. state privacy requirements.

Tailwind CSS v4 PostCSS build workflow, @theme token configuration, @source directives, CSS partial organization, and compilation steps for a TYPO3/DDEV project. Use this skill whenever modifying any CSS file under Resources/Private/Assets/Css/, adding or changing Tailwind utility classes in Fluid templates, adding new design tokens or colors, troubleshooting missing or broken CSS styles, or creating new CSS partials. Also use when build output appears stale or classes are missing from compiled output.

Install, configure, and build custom grid/container content elements in TYPO3 using the b13/container extension. Use this skill whenever the user asks for TYPO3 containers, nested content elements, two-column or three-column content grids, `B13\Container\Tca\Registry`, `ContainerConfiguration`, `ContainerProcessor`, `b13/container`, EXT:container, or wants to add configurable background colors, optional left/right margins, or a maximum width option to grid content elements.

Create, edit, and troubleshoot TYPO3 Content Blocks from the friendsoftypo3/content-blocks extension. Use this skill whenever the user asks for TYPO3 Content Blocks, content block `config.yaml`, `ContentBlocks/ContentElements`, `ContentBlocks/PageTypes`, `ContentBlocks/RecordTypes`, Content Block fields, templates, backend previews, icons, generated fields, the `make:content-block` command, `content-blocks:lint`, schema validation errors, missing CType/page/record types, broken labels, or Content Block rendering/debugging.

Implement, configure, and analyze Content Security Policies (CSP) in TYPO3 v12-v14. Provides step-by-step instructions to enable CSP in report-only mode, monitor violations in the TYPO3 backend module, iteratively whitelist required sources, and transition to full enforcement — all without breaking site functionality. Use when the user wants to add or harden CSP on a TYPO3 site, interpret CSP violation reports, configure site-specific csp.yaml files, add extension-level CSP rules, troubleshoot blocked scripts/styles/images/iframes, or understand which TYPO3 feature flags control enforcement vs. report-only mode.

Build TYPO3 v13+/v14+ Extbase frontend plugins from scratch — covers all layers from ext_localconf.php plugin registration through Domain Models, Repositories, Controllers, TCA configuration, TypoScript setup, ext_tables.sql, and Services.yaml dependency injection. Use this skill when creating a new Extbase plugin, adding a new controller or action, creating a new domain model with properties (including sys_category relations, fe_users ownership, Country fields, ObjectStorage relations, FileReference images), configuring TCA for custom tables, registering plugins in tt_content, or troubleshooting Extbase persistence mapping issues. Also use when adding CRUD operations (list, show, new, create, edit, update, delete) to a controller or integrating frontend user access control.

Create and configure TYPO3 v14 FlexForms for Extbase plugins and plain content elements. Use this skill when requested to add plugin settings, configure plugin registration with an XML FlexForm, add categories to a FlexForm, or when fixing broken FlexForms by removing legacy `TCEforms` tags.

Create, configure, edit, and style TYPO3 v14 forms built with EXT:form using versioned YAML files in an extension or site package instead of database storage. Use this skill when adding or modifying YAML form setup in `Configuration/Form/`, creating or updating `.form.yaml` definitions under `Resources/Private/Forms/`, configuring extension-path persistence for the form editor, exposing styling hooks such as `containerClassAttribute` or `elementClassAttribute`, overriding TYPO3 form templates, or integrating TYPO3 forms with a frontend CSS workflow.

Build a TYPO3 v13+ language switcher menu that uses the `language-menu` DataProcessor, auto-redirects first-time visitors to their browser's preferred language, and persists the user's manual language choice in a cookie. Use this skill when adding or modifying a language selection menu in a TYPO3 site package — covers TypoScript configuration, Fluid template rendering, JavaScript browser-detection + cookie logic, and the hidden data-attribute bridge pattern between Fluid and JS.

Set up and maintain Playwright infrastructure for TYPO3 projects running in DDEV. Use when initializing Playwright, installing browsers and add-ons, creating config and scripts, generating initial baselines, or fixing broken Playwright environment issues. For day-to-day frontend verification and VRT execution, use `typo3-playwright-workflow`.

Configure TYPO3 Rich Text Editor setups with EXT:rte_ckeditor / CKEditor 5. Use this skill when asked to install or enable the TYPO3 RTE, create or modify RTE YAML presets, register presets in `ext_localconf.php` or `system/additional.php`, assign presets with Page TSconfig or TCA `richtextConfiguration`, customize toolbars, styles, headings, link browser options, content CSS, HTML processing, or install and activate CKEditor plugins or TYPO3 extensions that add RTE functionality.

Create and modify custom TYPO3 Scheduler tasks for TYPO3 v14 only. Use this skill when adding a new scheduler task class, registering a task type in `tx_scheduler_task`, adding or changing scheduler task configuration fields, migrating an existing task away from `AdditionalFieldProviderInterface`, or updating an existing custom scheduler task's TCA, validation, storage, or execution behavior.

Decide where TYPO3 v14 site-handling configuration belongs: site-specific files in `config/sites/site-id/`, reusable Site Set files in `Configuration/Sets/SetName/` inside a site package or extension, and typed site setting definitions. Use this skill whenever configuring TYPO3 v14, configuring a TYPO3 extension or Extbase plugin, integrating configuration into an extension/plugin, moving TypoScript or Page TSconfig into the right place, or deciding whether configuration belongs in `config/sites` or `Configuration/Sets`.

Make TYPO3 v13+/v14+ extension records translatable and ensure Extbase or frontend plugin code returns localized records for the active site language. Use when a custom table in an extension needs TYPO3 localization support, when selected record fields must be translatable or language-synchronized, when TCA and SQL translation columns must be added, or when repositories and controllers still return default-language records instead of overlays. Apply whenever certain records of an extension need to be translatable or when controllers must provide translated records. Do not use this skill for Fluid template or XLF label translation.

Add or fix frontend TypoScript conditions for TYPO3 v14. Use when you need conditional TypoScript for specific page IDs, rootlines, site identifiers, languages, requests, TYPO3 versions, or logged-in frontend/backend users and groups in `setup.typoscript`, imported TypoScript files, or site package TypoScript constants that use site settings.