How do I install the Odoo App Landing Page skill?

Run npx skillmds add majiayu000/odoo-app-landing-page in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Odoo App Landing Page skill do?

Create or update index.html landing pages for Odoo modules following App Store restrictions and best practices It is listed under Web & Frontend on SkillMD.

Is Odoo App Landing Page safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Odoo App Landing Page?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Odoo App Landing Page free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Odoo App Landing Page?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Odoo App Landing Page by majiayu000

Name: Odoo App Landing Page
Rating: 4.666666666666667 (3 reviews)
Author: majiayu000

Odoo App Store Landing Page Creator

When the user asks to create or update an index.html file for an Odoo module's landing page, follow these instructions to ensure compliance with Odoo App Store sanitization rules.

Overview

Odoo App Store has strict HTML/CSS sanitization that strips many common patterns. This skill helps you create landing pages that survive sanitization and look professional.

Key Resources

Reference Guide: ODOO_APP_STORE_HTML_GUIDE.md - Complete documentation of safe/unsafe patterns
Working Example: llm_mcp_server/static/description/index.html - Production-ready example

CRITICAL Rules (Must Follow)

❌ NEVER USE (Will Be Stripped)

NO DOCTYPE or full HTML structure
- Don't include <!DOCTYPE>, <html>, <head>, <body> tags
- Start directly with <section> tags

NO inline flexbox alignment properties

<!-- ❌ BAD - Will be stripped -->
<div style="display:flex; align-items:center; justify-content:center">
  <!-- ✅ GOOD - Use Bootstrap classes -->
  <div class="d-flex align-items-center justify-content-center"></div>
</div>

NO rgba() colors

<!-- ❌ BAD -->
<div style="background-color:rgba(135,90,123,0.1)">
  <!-- ✅ GOOD - Use hex -->
  <div style="background-color:#f5efff"></div>
</div>

NO transitions, transforms, or animations
- These CSS properties are completely stripped
NO inline JavaScript
- No onclick, onmouseover, or any event handlers
NO linear gradients
- Use solid colors only

NO external links (mostly)

<!-- ❌ BAD - Becomes <span> -->
<a href="https://github.com/yourorg">GitHub</a>

<!-- ✅ GOOD - Display as text -->
<code>github.com/yourorg/repo</code>

<!-- ✅ GOOD - mailto works -->
<a href="mailto:support@example.com">Contact</a>

NO unicode special characters

<!-- ❌ BAD - Becomes garbled (→ becomes â) -->
Preferences → API Keys

<!-- ✅ GOOD - Use HTML entities -->
Preferences &rarr; API Keys

✅ ALWAYS USE (Safe Patterns)

Bootstrap 5 grid system
- container, row, col-md-*, col-lg-*, col-12
Bootstrap utility classes
- d-flex, align-items-center, justify-content-center
- p-4, mb-5, mt-3, mx-auto
- text-center, shadow-sm, h-100
Hex colors only
- #875A7B (Odoo purple), #f8f9fa, #333, #fff
Inline styles for
- color, background-color, font-size, font-weight
- padding, margin, border-radius, border
- line-height, text-align, width, height

Icon centering alternatives

<!-- Method 1: text-center + line-height -->
<div
  class="text-center"
  style="width:64px; height:64px; line-height:64px; border-radius:50%; background-color:#875A7B"
>
  <i
    class="fa fa-icon"
    style="color:#fff; font-size:32px; vertical-align:middle"
  ></i>
</div>

<!-- Method 2: Bootstrap flex classes -->
<div
  class="d-flex align-items-center justify-content-center"
  style="width:64px; height:64px; border-radius:50%; background-color:#875A7B"
>
  <i class="fa fa-icon" style="color:#fff; font-size:32px"></i>
</div>

HTML entities for special characters
- → (→), ← (←), — (—), © (©), • (•)

Step-by-Step Process

1. Gather Module Information

Ask the user (if not already provided):

Module name and technical name
Brief description (1-2 sentences)
Key features (3-6 main features)
Target use cases or pain points it solves
Any screenshots or demo images
Support contact (email)

2. Read the Reference Files

ALWAYS read these files before starting:

# Read the comprehensive guide
Read ODOO_APP_STORE_HTML_GUIDE.md

# Read the working example
Read llm_mcp_server/static/description/index.html

3. Structure the Landing Page

Use this proven structure:

1. Hero Section
   - Eye-catching title
   - Brief description
   - Key value propositions (badges/pills)

2. What Is It Section
   - Explain the concept/technology
   - Why it matters
   - Benefits

3. Demo Section (if available)
   - Screenshot or GIF
   - Caption

4. Features Section
   - 4-6 feature cards
   - Icons + descriptions

5. Use Cases Section
   - Real-world examples
   - Natural language operation examples

6. Setup Instructions (if applicable)
   - Step-by-step installation
   - Configuration examples

7. Technical Features (for developers)
   - Code examples
   - Integration points

8. Security/Enterprise Features
   - Access control
   - Compliance
   - Permissions

9. Related Modules
   - Ecosystem integration
   - Cross-sell opportunities

10. Support/Documentation
    - Links to docs (as plain text or code)
    - Contact email (mailto)

11. Footer
    - Company info
    - License
    - Contact links

4. Apply Color Palette

Use these safe hex colors:

Primary Colors:

Odoo Purple: #875A7B or #71639e (from example)
Dark text: #212529, #333, #495057
Medium gray: #6c757d, #666
Light gray: #868e96

Backgrounds:

Very light: #f8f9fa
Light purple tint: #f5efff, #f7f2fa
White: #fff or #ffffff

Accents:

Success green: #28a745, #155724
Info blue: #17a2b8, #0c5460
Warning: #ffc107
Primary blue: #007bff (for buttons)

5. Responsive Design

ALWAYS include responsive column classes:

<!-- 3 columns on desktop, 1 on mobile -->
<div class="col-md-4 col-12 mb-4">
  <!-- 4 columns on desktop, 2 on tablet, 1 on mobile -->
  <div class="col-md-3 col-sm-6 col-12 mb-4">
    <!-- 6 on large, 4 on medium, 2 on small -->
    <div class="col-lg-2 col-md-4 col-6 mb-4"></div>
  </div>
</div>

6. Card Components Pattern

<div class="col-md-4 col-12 mb-4">
  <div class="card h-100 border-0 shadow-sm" style="border-radius:16px">
    <div class="card-body p-4">
      <div
        class="bg-light d-flex align-items-center justify-content-center"
        style="width:56px; height:56px; border-radius:12px; margin-bottom:1.5rem"
      >
        <i class="fa fa-icon-name" style="font-size:28px; color:#71639e"></i>
      </div>
      <h3
        style="font-size:1.25rem; font-weight:700; color:#212529; margin-bottom:1rem"
      >
        Feature Title
      </h3>
      <p
        style="color:#6c757d; font-size:0.95rem; line-height:1.7; margin-bottom:0"
      >
        Feature description text
      </p>
    </div>
  </div>
</div>

7. Code Examples Pattern

<pre
  class="bg-dark"
  style="color:#ffffff; margin:0; padding:1.25rem; border-radius:12px; border:none; white-space:pre; font-family:monospace; font-size:0.85rem; line-height:1.6"
>
# Your code here
def example():
    pass
</pre>

8. Validation Checklist

Before completing, verify:

No DOCTYPE, html, head, body tags
All colors are hex format, no rgba()
No CSS transitions, transforms, or animations
No inline JavaScript handlers
No inline flexbox alignment properties (use Bootstrap classes)
Using Bootstrap 5 grid (container, row, col-*)
All sections have responsive columns
Icon centering uses text-center + line-height OR Bootstrap flex classes
Special characters use HTML entities (→ not →)
External links are mailto: or plain text
All images use Odoo CDN format: //apps.odoocdn.com/apps/assets/18.0/MODULE_NAME/image.png

9. File Location

Landing pages go in:

MODULE_NAME/static/description/index.html

10. Image References

If the module has images:

<img
  src="//apps.odoocdn.com/apps/assets/18.0/MODULE_TECHNICAL_NAME/screenshot.png"
  alt="Descriptive alt text"
  class="img-fluid rounded"
  style="max-width:100%"
/>

Common Patterns Library

Hero Section

<section style="padding:4rem 0 3rem">
  <div class="container">
    <div class="text-center" style="max-width:800px; margin:0 auto">
      <h1
        style="font-size:3rem; font-weight:800; color:#212529; margin-bottom:1.5rem; line-height:1.2"
      >
        Your Module Title
      </h1>
      <p
        style="font-size:1.25rem; color:#6c757d; margin-bottom:2rem; line-height:1.6"
      >
        Brief compelling description
      </p>
    </div>
  </div>
</section>

Section Divider

<hr class="my-5 bg-secondary" style="height:2px; border:none; opacity:0.5" />

Feature Grid

<div class="row g-4">
  <div class="col-md-4 col-12">
    <!-- Feature card -->
  </div>
  <div class="col-md-4 col-12">
    <!-- Feature card -->
  </div>
  <div class="col-md-4 col-12">
    <!-- Feature card -->
  </div>
</div>

Call-to-Action Box

<div
  class="text-center mb-5 bg-primary"
  style="padding:3rem 2rem; border-radius:16px"
>
  <h3
    style="color:#ffffff; font-weight:700; font-size:2rem; margin-bottom:1rem"
  >
    Call to Action Title
  </h3>
  <p style="color:#f8f9fa; font-size:1.1rem; margin-bottom:0">
    Supporting text
  </p>
</div>

Tips for Success

Start with the example: Copy structure from llm_mcp_server/static/description/index.html
Read the guide: Reference ODOO_APP_STORE_HTML_GUIDE.md for edge cases
Use Bootstrap classes for layout: Especially for flexbox (d-flex, align-items-center)
Use inline styles for aesthetics: Colors, fonts, spacing
Think mobile-first: Always include col-12 for mobile responsiveness
Keep it simple: Less is more - avoid complex layouts
Test special characters: Convert all unicode to HTML entities
Avoid external links: Display URLs as text in <code> tags

When to Use This Skill

User asks to "create landing page for [module]"
User asks to "update index.html for [module]"
User asks to "improve module description page"
User mentions "Odoo App Store" and "HTML"
User asks about "module marketing page"

What NOT to Do

Don't create generic landing pages - always customize for the specific module
Don't copy-paste without adapting to the module's purpose
Don't skip the validation checklist
Don't use patterns not documented in the guide
Don't assume features - ask the user if unclear

Final Notes

The Odoo App Store sanitizer is aggressive. When in doubt:

Check the guide (ODOO_APP_STORE_HTML_GUIDE.md)
Look at the working example (llm_mcp_server/static/description/index.html)
Use Bootstrap classes instead of inline styles for layout
Keep it simple and semantic

Remember: Bootstrap classes are safer than inline styles for flexbox and layout properties!

Odoo App Landing Page

File contents

Odoo App Store Landing Page Creator

Overview

Key Resources

CRITICAL Rules (Must Follow)

❌ NEVER USE (Will Be Stripped)

✅ ALWAYS USE (Safe Patterns)

Step-by-Step Process

1. Gather Module Information

2. Read the Reference Files

3. Structure the Landing Page

4. Apply Color Palette

5. Responsive Design

6. Card Components Pattern

7. Code Examples Pattern

8. Validation Checklist

9. File Location

10. Image References

Common Patterns Library

Hero Section

Section Divider

Feature Grid

Call-to-Action Box

Tips for Success

When to Use This Skill

What NOT to Do

Final Notes

Frequently asked questions

Odoo App Landing Page

File contents

Odoo App Store Landing Page Creator

Overview

Key Resources

CRITICAL Rules (Must Follow)

❌ NEVER USE (Will Be Stripped)

✅ ALWAYS USE (Safe Patterns)

Step-by-Step Process

1. Gather Module Information

2. Read the Reference Files

3. Structure the Landing Page

4. Apply Color Palette

5. Responsive Design

6. Card Components Pattern

7. Code Examples Pattern

8. Validation Checklist

9. File Location

10. Image References

Common Patterns Library

Hero Section

Section Divider

Feature Grid

Call-to-Action Box

Tips for Success

When to Use This Skill

What NOT to Do

Final Notes

Related skills

Frequently asked questions

How do I install the Odoo App Landing Page skill?

What does the Odoo App Landing Page skill do?

Is Odoo App Landing Page safe to use?

Which AI agents work with Odoo App Landing Page?

Is Odoo App Landing Page free to use?

Who published Odoo App Landing Page?