Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From typo3-vite
Use when configuring Vite 7 for TYPO3 v13/v14 LTS projects, setting up SCSS architecture with Bootstrap 5.3 theming, creating entrypoints per content element, optimizing SVGs, configuring PostCSS (autoprefixer, cssnano), loading local fonts, or customizing Bootstrap variables. v14 removed core asset concat/compression (#108055) — external build tool is now mandatory. Also triggers for: vite-asset-collector, asset hashing, Gzip/Brotli compression, SCSS import chain, selective Bootstrap imports, CSP compliance, post-v14 frontend build pipelines.
npx claudepluginhub netresearch/claude-code-marketplace --plugin typo3-viteHow this skill is triggered — by the user, by Claude, or both
Slash command
/typo3-vite: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).
Guides 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.
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 project