Stats
Actions
Tags
From craft-workspace-webconsulting-skills
Configures Vite 7 for TYPO3 v13/v14 LTS projects with SCSS/Bootstrap 5.3 theming, per-content-element entrypoints, SVG optimization, PostCSS (autoprefixer/cssnano), local fonts, asset hashing, compression, and CSP compliance via vite-asset-collector.
How this skill is triggered — by the user, by Claude, or both
Slash command
/craft-workspace-webconsulting-skills:typo3-viteThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Vite 7 build configuration for TYPO3 v13 and **v14 LTS** sitepackage development with `praetorius/vite-asset-collector`. Current gold standard: v14.3 LTS (released 2026-04-21).
Vite 7 build configuration for TYPO3 v13 and v14 LTS sitepackage development with praetorius/vite-asset-collector. Current gold standard: v14.3 LTS (released 2026-04-21).
v14 context: TYPO3 v14.0 removed the core's built-in frontend CSS/JS concatenation and compression (Breaking #108055) and CSS comment/whitespace stripping (Breaking #107944).
config.concatenateCss/compressCss/concatenateJs/compressJsno longer have any effect. An external build tool (Vite / webpack / esbuild) is required for production-grade asset handling on v14.
Each content element gets its own Vite entrypoint (*.entry.ts) that imports its SCSS and TypeScript. This enables automatic code splitting -- only the CSS/JS needed for visible content elements is loaded.
Never import Bootstrap as a whole. Import only the components you use (bootstrap/scss/grid, bootstrap/scss/buttons, etc.) to minimize CSS bundle size.
Custom SvgCopyOptimizePlugin processes SVGs from Resources/Private/Svg/ through SVGO and writes optimized files to Resources/Public/Svg/. Supports dev-mode file watching.
Assets loaded via <vite:asset> ViewHelper automatically get nonce attributes for Content Security Policy compliance. No inline <script> or <style> tags needed.
| Layer | Technology |
|---|---|
| Build | Vite 7+ with praetorius/vite-asset-collector |
| CSS | Bootstrap 5.3+ (selective imports, custom theming) |
| PostCSS | autoprefixer + cssnano (production) |
| SCSS | Modern Compiler API (api: 'modern-compiler') |
| SVG | Custom SVGO plugin (SvgCopyOptimizePlugin) |
| Compression | Gzip + Brotli (production) |
| Package Manager | npm, pnpm, or yarn |
references/vite-configuration.md -- Complete vite.config.ts, entrypoints, SVG plugin, CSPreferences/scss-architecture.md -- SCSS folder structure, import chain, naming conventions, CSS unitsreferences/bootstrap-theming.md -- Bootstrap variable customization per projectThis skill is based on the excellent work by Netresearch DTT GmbH.
Original repository: https://github.com/netresearch/typo3-vite-skill
Copyright (c) Netresearch DTT GmbH — Methodology and best practices (MIT / CC-BY-SA-4.0)
Special thanks to Netresearch DTT GmbH for their generous open-source contributions to the TYPO3 community, which helped shape this skill collection. Adapted by webconsulting.at for this skill collection
npx claudepluginhub dirnbauer/webconsulting-skillsProvides battle-tested TYPO3 Fluid template patterns for v12+ site packages, covering template hierarchy, CMS-first content architecture, responsive images, and WCAG 2.1 AA accessibility.
Covers Craft CMS 5 front-end Twig development: atomic design, template architecture, Vite buildchain, image presets, multi-brand theming, JavaScript boundaries, and front-end auth with plugin integrations.
Configures Vite build tool, plugin API, SSR, and Vite 8 Rolldown migration. Auto-activates when working with vite.config.ts, Vite plugins, or building SSR apps.