Odoo Frontend Plugin
Odoo frontend theme development for versions 14-19. Theme creation, SCSS variables, Figma integration, snippets, and JavaScript patterns.
Skills in this plugin
5- ▌ Theme Scss · ahmed-lakoshaComplete SCSS variable reference for Odoo themes. Covers all three core variable systems: $o-theme-font-configs (Google Fonts), $o-color-palettes (color system with 5 semantic colors), and $o-website-values-palettes (115+ keys for typography, buttons, inputs, headers, footers, layout). Includes SCSS load order rules and color derivation. <example> Context: User asks about SCSS variables user: "What SCSS variables can I configure in my Odoo theme?" assistant: "I will use the theme-scss skill to show the complete variable reference." <commentary>Variable reference lookup.</commentary> </example> <example> Context: User wants to configure colors user: "How do I set up o-color-1 through o-color-5?" assistant: "I will explain the semantic color system and palette configuration." <commentary>Color palette configuration.</commentary> </example> <example> Context: User gets undefined variable error user: "I get 'Undefined variable $o-color-palettes' in my theme" assistant: "This is a SCSS load order issue. Theme file
- ▌ Frontend JS · ahmed-lakoshaOdoo frontend JavaScript patterns for website themes. Covers publicWidget framework (complete pattern with editableMode handling), Owl v1/v2 component patterns, _t() translation best practices, Bootstrap 4-to-5 migration, version detection, and critical development rules. Supports Odoo 14-19. <example> Context: User wants to create a publicWidget user: "Create a publicWidget for my Odoo website" assistant: "I will create a publicWidget with editableMode handling and proper cleanup." <commentary>publicWidget creation.</commentary> </example> <example> Context: User asks about Owl components user: "How do I create an Owl component in Odoo 18?" assistant: "I will show the Owl v2 pattern with static template and props." <commentary>Owl component pattern.</commentary> </example> <example> Context: User needs help with translations user: "How do I translate JavaScript strings in Odoo?" assistant: "Use _t() at DEFINITION TIME for static labels, not runtime wrappers." <commentary>Translation best practices.</commenta
- ▌ Theme Create · ahmed-lakoshaOdoo theme scaffolding and creation pipeline. Generates complete, installable Odoo theme modules with proper file structure, SCSS configuration, page templates, mirror models, theme.utils activation, and auto-fix installation. Supports Odoo 14-19. <example> Context: User wants to create a new Odoo website theme user: "Create a new website theme for Odoo 17" assistant: "I will use the theme-create skill to scaffold a complete theme module." <commentary>Core trigger - new theme creation.</commentary> </example> <example> Context: User wants to scaffold a theme from Figma user: "Build an Odoo 17 theme from this Figma design" assistant: "I will scaffold the theme module and extract design tokens from Figma." <commentary>Theme creation with Figma extraction.</commentary> </example> <example> Context: User wants mirror models for multi-website user: "Create theme mirror models for my website pages" assistant: "I will generate theme.ir.ui.view and theme.website.page records." <commentary>Mirror model generation.</co
- ▌ Theme Design · ahmed-lakoshaFigma-to-Odoo design workflow and complete page template reference. Covers Figma extraction pipeline (colors, typography, layout), Chrome MCP automation, design-to-template matching methodology, header/footer decision flowcharts, and dynamic page reference (11 headers, 9 footers, shop, blog, cart templates with XML IDs). <example> Context: User wants to implement a Figma design user: "Implement this Figma design as an Odoo 17 theme" assistant: "I will analyze the Figma design and match it to Odoo templates." <commentary>Design-to-code workflow.</commentary> </example> <example> Context: User asks which header template to use user: "Which Odoo header template matches a hamburger menu design?" assistant: "Use template_header_hamburger." <commentary>Template matching query.</commentary> </example> <example> Context: User wants to know footer options user: "What footer templates are available in Odoo?" assistant: "There are 9 footer templates ranging from default to slideout." <commentary>Footer template referenc
- ▌ Theme Snippets · ahmed-lakoshaComplete Odoo website snippet reference and creation guide. Covers snippet architecture, 81+ static snippet templates (structure, gallery, features, dynamic, inner content, mega menus), dynamic snippets system, snippet options (we-* elements), custom snippet creation for Odoo 14-19, and version-aware registration (simple vs groups). <example> Context: User wants to create a custom snippet user: "Create a custom snippet for my Odoo website" assistant: "I will create a version-aware snippet with template, registration, and options." <commentary>Custom snippet creation.</commentary> </example> <example> Context: User wants to know available snippets user: "What snippets are available in Odoo?" assistant: "Odoo has 81+ static snippets across 6 categories." <commentary>Snippet inventory reference.</commentary> </example> <example> Context: User wants a dynamic snippet user: "Create a dynamic snippet that shows latest products" assistant: "I will create a dynamic snippet with filter, display template, and data sour