odoo-frontend_skill

Overview

This skill delivers advanced Odoo frontend development focused on production-ready theme creation, modern frontend patterns, and version-aware tooling for Odoo 14–19. It includes an automated /create-theme generator, a theme activation system, full dynamic page references, PWA support, and real-time features to build performant, accessible websites. The workflow integrates Figma-driven design conversion, TypeScript/modern JS, testing suites, and CI-ready builds for repeatable, maintainable themes.

How this skill works

The skill auto-detects the Odoo version and maps the correct Bootstrap and Owl variations before scaffolding a complete theme module with proper structure, assets, and configuration. It provides theme.utils activation hooks, a comprehensive $o-website-values-palettes reference, publicWidget patterns (with editableMode handling), and utilities for PWA, WebSocket/SSE real-time features, and accessibility checks. A CLI (/create-theme) or Python script generates theme modules and optional quick arguments for colors, fonts, and target version.

When to use it

• Starting a new Odoo website or migrating an existing theme across Odoo 14–19.
• Generating a production-ready theme scaffold with consistent variables and assets.
• Implementing PWA features, service workers, or real-time live updates on the website.
• Standardizing theme palettes, fonts, and component semantics across projects.
• Automating frontend tests (Jest/Cypress) and integrating CI/CD builds.

Best practices

• Never modify core Odoo files; keep themes isolated in their own modules.
• Use separate .js and .scss files; avoid inline JS/CSS to keep assets cacheable.
• Rely on $o-website-values-palettes for theme configuration before adding custom XML.
• Detect Odoo version first to choose Bootstrap/Owl variants and snippet structures.
• Use publicWidget patterns and editableMode for website-builder compatibility and accessibility.

Example use cases

• Rapidly scaffold a branded theme for Odoo 17 with specified color palette and Google Fonts.
• Migrate a theme from Odoo 15 to 19 with automatic Bootstrap and Owl adjustments.
• Add offline support and push notifications to an Odoo website using PWA helpers.
• Create reusable snippet options and publicWidget components that respect editableMode.
• Integrate visual regression and end-to-end tests into CI for theme releases.