theme-creation_skill

Overview

This skill creates and manages custom themes for PropertyWebBuilder, handling registration, view templates, CSS, palettes, and asset configuration. It simplifies theme inheritance, per-tenant overrides, WCAG contrast checks, and dark mode support so you can ship consistent branded sites quickly.

How this skill works

The skill registers a theme in app/themes/config.json and provides a directory structure for views, palettes, and page parts. It compiles palettes and CSS (Tailwind input + dynamic ERB partials), resolves theme view paths with inheritance, and exposes palette loading/validation and contrast tools to ensure accessible color schemes.

When to use it

• You need a new look and feel for a tenant or agency site
• Building custom page parts, layouts, or branded landing pages
• Creating or validating color palettes including dark mode variants
• Overriding parent theme views while preserving fallback behavior
• Preparing production-ready Tailwind/CSS builds for a theme

Best practices

• Register your theme in app/themes/config.json with supported page_parts, layouts, and style_variables
• Place view overrides only for components you change; rely on parent fallback to minimize duplication
• Define at least the nine required colors for palettes to ensure layout and accessibility
• Use PaletteValidator and rake palettes:validate during development CI
• Provide explicit dark mode modes or rely on ColorUtils to generate dark variants and then review contrast

Example use cases

• Create a branded agency theme that inherits from default and adds a luxury palette
• Add a landing layout and new hero page parts for a campaign, then register them in supports.page_parts
• Author multiple palette JSON files and run rake palettes:contrast to meet WCAG AA before release
• Copy default layout into a new theme and tweak header/footer variables via custom_css partials
• Add a tailwind-mytheme build script and run tailwind:mytheme:prod during deployment