Stats
Actions
Tags
From odoo-dev-toolkit
Create beautiful, SEO-optimized website pages using QWeb templates for Odoo 18. Use this skill whenever the user wants to build, create, or generate a web page, landing page, service page, about page, blog-style page, product page, portfolio page, contact page, or any other website page for an Odoo 18 instance. Also trigger when the user mentions "QWeb", "Odoo website", "Odoo page", "Odoo template", or asks for a page with SEO optimization for Odoo. This skill covers the full spectrum of page types — from simple informational pages to complex animated landing pages with conversion funnels. If someone says "make me a page" or "build a website section" and the context is Odoo, use this skill. Czech triggers (CZ): Trigger also when the user speaks Czech and mentions: "vytvoř stránku", "udělej stránku", "postav stránku", "nová stránka", "landing page", "webová stránka", "stránka pro Odoo", "QWeb šablona", "QWeb stránka", "šablona pro web", "SEO stránka", "prodejní stránka", "kontaktní stránka", "portfolio stránka", "stránka služeb", "o nás stránka", "blog stránka", "produktová stránka", "udělej mi web", "vytvoř mi web", "potřebuji stránku", "chci stránku", or any Czech request involving creating a website page for Odoo.
How this skill is triggered — by the user, by Claude, or both
Slash command
/odoo-dev-toolkit:odoo-qweb-pageThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You create complete, production-ready QWeb website pages for Odoo 18. Every page you produce is a single self-contained `.xml` file with inline CSS and JS, optimized for SEO from the ground up.
You create complete, production-ready QWeb website pages for Odoo 18. Every page you produce is a single self-contained .xml file with inline CSS and JS, optimized for SEO from the ground up.
Before you start writing any code, read the reference file at references/qweb-patterns.md in this skill's directory. It contains the exact template structure, SEO patterns, and CSS/JS conventions you need to follow. This is essential — the patterns there are battle-tested and ensure your output works correctly in Odoo 18.
Search engines are how people find websites. Every page you create must include:
additional_title — a compelling, keyword-rich page title (50-60 chars ideal)meta_description — a persuasive summary with a call-to-action (150-160 chars)The reason this matters so much: a beautiful page that Google can't understand is invisible. Structured data can earn rich snippets in search results, which dramatically increases click-through rates.
Each page is a single QWeb XML file. All CSS goes in a <style> block and all JS in a <script> block, both injected into <head> via <xpath expr="head" position="inside">. This keeps deployment simple — one file, one page, no external dependencies to manage.
Pages should look professional and modern out of the box. Use CSS custom properties (variables) for theming, smooth animations for engagement, and responsive design that works on all devices. The visual quality should match what a professional web agency would deliver.
QWeb templates have specific syntax requirements. The reference file covers all of them, but the critical rules:
FILE FORMAT — NEVER violate these:
<?xml version="1.0" encoding="UTF-8"?> — no XML declaration<odoo>, <data>, or <template> tags — those are for data XML files, not QWeb page templates<t t-name="website.page-slug"> as the root element<t t-set="pageName" t-value="'Display Name'"/> to set the page nameTEMPLATE STRUCTURE:
t-name with the website. prefix (e.g., website.my-page)t-name, call <t t-call="website.layout"> to get Odoo's header/footer/> syntax (this is XML, not HTML)t-att-value for dynamic attributes<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>WEBSITE BUILDER COMPATIBILITY — essential for drag-and-drop:
<div id="wrap"> MUST have class oe_structure oe_empty — this makes the page a valid drop zone for the website builder<section> MUST have class o_colored_level — this enables the color picker and block systempt104 pb104 on sections for consistent vertical rhythmBefore writing any code, clarify:
Pick the JSON-LD schema type(s) that match the page content. Common choices:
| Page Type | Primary Schema | Optional Additional |
|---|---|---|
| Landing page (service) | ProfessionalService or Service | FAQPage |
| Product page | Product | Review, FAQPage |
| About page | Organization or Person | BreadcrumbList |
| Blog/article | Article or BlogPosting | BreadcrumbList |
| Contact page | LocalBusiness | ContactPoint |
| Portfolio | CreativeWork collection | Organization |
| Event page | Event | Offer, Place |
| FAQ page | FAQPage | Organization |
You can (and often should) include multiple schema blocks. For example, a service landing page with an FAQ section should have both a ProfessionalService and a FAQPage schema.
Follow the structure in references/qweb-patterns.md. The general skeleton is:
<t t-name="website.{page-slug}">
<t t-set="pageName" t-value="'Page Display Name'"/>
<t t-call="website.layout">
<!-- SEO meta configuration (t-set for title, description, OG, Twitter) -->
<!-- JSON-LD structured data -->
<!-- Page content -->
<div id="wrap" class="oe_structure oe_empty">
<section class="prefix-hero o_colored_level pt104 pb104">
<div class="container"><!-- hero content --></div>
</section>
<section class="prefix-features o_colored_level pt104 pb104">
<div class="container"><!-- features content --></div>
</section>
<!-- more sections, each with o_colored_level -->
</div>
</t>
<xpath expr="head" position="inside">
<!-- Google Fonts link (if needed) -->
<!-- <style> block with all CSS -->
<!-- <script> block with all JS -->
</xpath>
</t>
NEVER start the file with <?xml version="1.0" encoding="UTF-8"?>.
NEVER wrap in <odoo>, <data>, or <template> tags.
Use a consistent naming convention to avoid conflicts with Odoo's built-in styles. Prefix all classes with a short identifier (2-3 letters) related to the page or project. For example, mv- for "Michal Varys" or lp- for "landing page".
Key CSS patterns:
@media (max-width: 768px) (and 1024px for tablets if needed)container, row, col-*) — your styles should be self-sufficientKeep JS minimal and focused on interactivity:
Wrap everything in DOMContentLoaded to ensure the DOM is ready. Don't use jQuery — vanilla JS is cleaner and doesn't add dependencies.
Before delivering the page, mentally check:
File format (CRITICAL):
<?xml version="1.0" encoding="UTF-8"?><odoo>, <data>, or <template> wrapper tags<t t-name="website.page-slug"><t t-set="pageName" t-value="'...'"/> for display name<t t-call="website.layout"> inside the t-name blockWebsite builder compatibility (CRITICAL):
<div id="wrap"> has class oe_structure oe_empty<section> has class o_colored_levelpt104 pb104)<div class="container"> inside for responsive widthXML validity:
viewBox attributes use lowercase viewbox in XML context<div> self-closing tags use <div ... /> only when truly emptySEO:
<h1> on the pagealt attributesmeta_description is under 160 charactersadditional_title is under 60 characters@context and @typeog:title, og:description, og:typetwitter:card, twitter:title, twitter:descriptionOther:
When building pages, think in sections. Every section MUST follow this structure:
<section class="prefix-sectionname o_colored_level pt104 pb104">
<div class="container">
<!-- section content using row/col-* for grid -->
</div>
</section>
The o_colored_level class and Odoo spacing classes (pt104 pb104) are mandatory on every section for website builder compatibility.
The first thing visitors see. Include a compelling headline (H1), a subheadline explaining the value proposition, a primary CTA button, and optionally trust signals (stats, logos, badges). For creative pages, add background animations (CSS only — no heavy JS animation libraries).
Identify the visitor's pain points. Use a grid of cards with icons. This creates empathy and sets up the solution section.
Present what you're offering. Feature grid, comparison table, or highlighted box with checkmarks. Connect each feature back to the problems identified above.
Testimonials, client logos, case study snippets, or aggregate ratings. Use a card grid layout. Stars, quotes, author names with roles.
Numbered steps showing how the service/product works. Reduces friction by making the next steps clear and predictable.
Side-by-side comparison (you vs. competitors, or tier comparison). Highlight the recommended option with a border or shadow.
Accordion-style expandable questions. Each Q&A pair should also be in the FAQPage JSON-LD schema so Google can display them as rich results.
Final conversion section. Keep the form short (name, email, phone, message). Include urgency or trust elements nearby.
Fixed bottom bar that appears after scrolling past the hero. Contains a short message and a CTA button.
The content you write matters as much as the code. Follow these principles:
Save the final template as a .xml file. The filename should match the template name: if t-name="website.my-cool-page", save as my-cool-page.xml.
If the user doesn't specify a page slug, derive one from the page topic (lowercase, hyphens, no special characters).
npx claudepluginhub michalvarys/claude-plugins --plugin odoo-dev-toolkitProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.