Run any Skill in Manus with one click

theme-design

Stars71

Forks28

UpdatedMarch 23, 2026 at 21:17

Figma-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 refer

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

ahmed-lakosha

ahmed-lakosha/odoo-plugins

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

More from this repository

same repository

odoo-i18n

ahmed-lakosha/odoo-plugins

Comprehensive Odoo i18n toolkit for extracting translatable strings, validating .po files, generating translation reports, managing Arabic/RTL layouts, and handling multilingual deployments across Odoo 14-19. <example> Context: User wants to extract translatable strings user: "Extract all translatable strings from my Odoo 17 module to a .pot file" assistant: "I will use the odoo-i18n skill to scan Python _() calls, XML translate attributes, and field strings, then generate a properly structured .pot template file." <commentary>Core trigger - translation extraction workflow.</commentary> </example> <example> Context: User wants Arabic translation user: "Generate an Arabic .po file for my Odoo module" assistant: "I will use the odoo-i18n skill to create an ar.po file with RTL-aware formatting and placeholder translations for all extractable strings." <commentary>Language-specific trigger - Arabic/RTL translation generation.</commentary> </example> <example> Context: User wants to validate a translation file

2026-03-2471

odoo-docker

ahmed-lakosha/odoo-plugins

Docker infrastructure manager for Odoo — production deployment, nginx proxy, CI/CD pipelines, performance tuning, multi-version image management, container debugging, and centralized workspace orchestration for Odoo 14-19 Enterprise. v2.0 consolidates nginx, debug, and perf into natural language triggers alongside the /odoo-docker sub-command interface. <example> Context: User wants to deploy Odoo to production with Docker user: "Deploy my Odoo 17 project to production using Docker" assistant: "I will use the odoo-docker skill to generate a production docker-compose.yml with Odoo, PostgreSQL, and nginx containers, with proper volume mounts and restart policies." <commentary>Core trigger - production Docker deployment.</commentary> </example> <example> Context: User wants nginx reverse proxy configuration user: "Set up nginx as a reverse proxy in front of my Odoo Docker container" assistant: "I will use the odoo-docker skill to generate an nginx.conf with SSL termination, WebSocket longpolling proxy, and pr

2026-03-2371

frontend-js

ahmed-lakosha/odoo-plugins

Odoo 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.</comme

2026-03-2371

theme-create

ahmed-lakosha/odoo-plugins

Odoo 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.<

2026-03-2371

theme-scss

ahmed-lakosha/odoo-plugins

Complete 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 f

2026-03-2371

theme-snippets

ahmed-lakosha/odoo-plugins

Complete 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 s

2026-03-2371

name	theme-design
description	Figma-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 reference.</commentary> </example>
version	8.0.0
author	TaqaTechno
license	MIT
allowed-tools	["Read","Grep","Glob","WebFetch"]

Figma-to-Odoo Design Workflow

Design Workflow Methodology

1. ANALYZE DESIGN → Extract colors, fonts, layout, components
2. COMPARE TO ODOO TEMPLATES → Match header, footer, page layouts
3. CHOOSE CLOSEST TEMPLATE → Select best matching built-in template
4. CONFIGURE VIA VARIABLES → Set $o-website-values-palettes
5. ENHANCE WITH CUSTOM CSS → Only what templates can't provide
6. CREATE CUSTOM SNIPPETS → Components not available in Odoo

Figma Extraction Pipeline

Using Figma MCP

1. Use Figma MCP with prompt:
   "Convert this Figma design to HTML for Odoo <version> website theme.
   Use Bootstrap v5.1.3 classes (not Tailwind).
   Apply proper Odoo theme structure with sections and containers."

2. Extract Color Palette:
   "Extract the color palette and map to o-color-1 through o-color-5."

3. Extract Typography:
   "Convert text styling to Bootstrap typography classes."

Using Chrome MCP (Browser Automation)

Navigate to Figma URL → Open Pages (not components!)
Click on page elements to extract:
- Header/navbar → primary color
- CTA buttons → secondary color
- Section backgrounds → o-color-3
- Body text → text color, font family
- Headings (H1-H6) → heading fonts, sizes

Pages to check: Homepage, About/Services, Contact, Footer area

Color Mapping

Design Element	Maps To
Primary brand color (buttons, links)	`o-color-1`
Accent/CTA color	`o-color-2`
Light section backgrounds	`o-color-3`
Main content background	`o-color-4`
Dark text / headings	`o-color-5`

Header Templates (11 Primary + Variants)

XML ID	Name	Best For
`website.template_header_default`	Default	Most websites
`website.template_header_hamburger`	Hamburger	Minimal designs
`website.template_header_stretch`	Stretch	Wide layouts
`website.template_header_vertical`	Vertical	App-like sites
`website.template_header_search`	Search	E-commerce, directories
`website.template_header_sales_one`	Sales 1	Online stores
`website.template_header_sales_two`	Sales 2	Large catalogs
`website.template_header_sales_three`	Sales 3	Product-focused
`website.template_header_sales_four`	Sales 4	Fashion, retail
`website.template_header_sidebar`	Sidebar	Dashboard sites
`website.template_header_boxed`	Boxed	Modern brands

Header Alignment Variants

..._align_center / ..._align_right — Desktop alignment
..._mobile_align_center / ..._mobile_align_right — Mobile alignment

Header Visibility (mutually exclusive)

XML ID	Effect
`website.header_visibility_standard`	Scrolls with page
`website.header_visibility_fixed`	Sticks to top
`website.header_visibility_disappears`	Hides on scroll down
`website.header_visibility_fade_out`	Fades out

Header Components (combinable)

XML ID	Component	Default
`website.option_header_brand_logo`	Logo image	Active
`website.option_header_brand_name`	Text name	Inactive
`website.header_call_to_action`	CTA button	Active
`website.header_search_box`	Search bar	Active
`website.header_social_links`	Social icons	Inactive

Header Decision Flowchart

Is navigation hidden? → YES → template_header_hamburger
                       → NO → Vertical sidebar? → YES → Full page? → sidebar / vertical
                                                 → NO → E-commerce? → YES → Categories? → sales_two / sales_one
                                                                    → NO → Search prominent? → template_header_search
                                                                                             → Boxed? → boxed / stretch / default

Footer Templates (9 Options)

XML ID	Name	Best For
`website.footer_custom`	Default	General use
`website.template_footer_descriptive`	Descriptive	Corporate sites
`website.template_footer_centered`	Centered	Landing pages
`website.template_footer_links`	Links	Large sites
`website.template_footer_minimalist`	Minimalist	Clean designs
`website.template_footer_contact`	Contact	Service businesses
`website.template_footer_call_to_action`	CTA	Marketing sites
`website.template_footer_headline`	Headline	Brand statements
`website.template_footer_slideout`	Slideout	Modern/trendy

Footer Decision Flowchart

Minimal (just copyright)? → YES → template_footer_minimalist
                          → NO → Center-aligned? → template_footer_centered
                                 Newsletter/CTA? → template_footer_call_to_action
                                 Contact info? → template_footer_contact
                                 Primarily links? → template_footer_links
                                 Detailed description? → template_footer_descriptive
                                 Default → footer_custom

Shop Page Templates (website_sale)

Layout Options

XML ID	Feature
`website_sale.products_design_card`	Card layout
`website_sale.products_design_grid`	Grid layout
`website_sale.products_thumb_4_3`	4:3 image ratio
`website_sale.products_thumb_cover`	Image fills container (default)

Categories & Filters

XML ID	Feature	Default
`website_sale.products_categories`	Left sidebar	Inactive
`website_sale.products_categories_top`	Top nav	Active
`website_sale.products_attributes`	Attribute filters	Active
`website_sale.filter_products_price`	Price filter	Inactive
`website_sale.search`	Search box	Active
`website_sale.sort`	Sort dropdown	Active

Product Detail Options

XML ID	Feature	Default
`website_sale.product_comment`	Reviews	Inactive
`website_sale.product_buy_now`	Buy Now button	Inactive
`website_sale.alternative_products`	Alternatives	Active

Blog Templates (website_blog)

Blog Listing

XML ID	Feature	Default
`website_blog.opt_blog_cover_post`	Featured banner	Active
`website_blog.opt_blog_list_view`	List view	Inactive
`website_blog.opt_blog_cards_design`	Card components	Inactive
`website_blog.opt_blog_sidebar_show`	Sidebar	Inactive

Blog Post Detail

XML ID	Feature	Default
`website_blog.opt_blog_post_breadcrumb`	Breadcrumbs	Active
`website_blog.opt_blog_post_read_next`	Read next	Active
`website_blog.opt_blog_post_comment`	Comments	Inactive

Cart & Checkout

XML ID	Feature	Default
`website_sale.suggested_products_list`	Suggested products	Active
`website_sale.reduction_code`	Promo code	Active
`website_sale.accept_terms_and_conditions`	T&C checkbox	Inactive

Generating Theme Configuration from Design

After analyzing the design and matching templates:

// primary_variables.scss — Generated from Design Analysis
$o-theme-font-configs: (
    'Poppins': (
        'family': ('Poppins', sans-serif),
        'url': 'Poppins:300,400,500,600,700',
    ),
);

$o-website-values-palettes: (
    (
        'color-palettes-name': 'default-1',
        'font': 'Poppins',
        'headings-font': 'Poppins',
        'header-template': 'hamburger',
        'header-links-style': 'pills',
        'logo-height': 48px,
        'footer-template': 'contact',
        'footer-scrolltop': true,
        'btn-padding-y': 0.75rem,
        'btn-border-radius': 8px,
        'link-underline': 'never',
    )
);

Then create theme.utils to activate the matched templates programmatically:

def _theme_yourtheme_post_copy(self, mod):
    self.enable_view('website.template_header_hamburger')
    self.enable_view('website.template_footer_contact')
    self.enable_view('website.option_header_brand_logo')
    self.disable_view('website.header_visibility_standard')
    self.enable_view('website.header_visibility_fixed')