` tags 2. **NO inline flexbox alignment properties** ```html

``` 3. **NO rgba() colors** ```html

``` 4. **NO transitions, transforms, or animations** - These CSS properties are completely stripped 5. **NO inline JavaScript** - No `onclick`, `onmouseover`, or any event handlers 6. **NO linear gradients** - Use solid colors only 7. **NO external links (mostly)** ```html GitHub github.com/yourorg/repo Contact ``` 8. **NO unicode special characters** ```html Preferences → API Keys Preferences → API Keys ``` ### ✅ ALWAYS USE (Safe Patterns) 1. **Bootstrap 5 grid system** - `container`, `row`, `col-md-*`, `col-lg-*`, `col-12` 2. **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` 3. **Hex colors only** - `#875A7B` (Odoo purple), `#f8f9fa`, `#333`, `#fff` 4. **Inline styles for** - `color`, `background-color`, `font-size`, `font-weight` - `padding`, `margin`, `border-radius`, `border` - `line-height`, `text-align`, `width`, `height` 5. **Icon centering alternatives** ```html

``` 6. **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: ```bash # 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: ```html

``` ### 6. Card Components Pattern ```html

Feature Title

Feature description text

``` ### 7. Code Examples Pattern ```html

# Your code here
def example():
    pass

``` ### 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: ```html Descriptive alt text

``` ## Common Patterns Library ### Hero Section ```html

Your Module Title

Brief compelling description

``` ### Section Divider ```html

``` ### Feature Grid ```html

``` ### Call-to-Action Box ```html

Call to Action Title

Supporting text

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

` 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:

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

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