brand-content-design
Brand Content Design
Create branded visual content (presentations, LinkedIn carousels, HTML pages) with consistent brand identity.
Trigger Phrases
- "create presentation" / "make slides"
- "create carousel" / "LinkedIn carousel"
- "create HTML page" / "make landing page" / "build web page"
- "html design system" / "design system"
- "setup brand" / "brand init" / "extract brand"
- "create template" / "new template"
- "get outline" / "outline for template" / "prepare content"
- "color palette" / "generate palette" / "alternative colors"
- NOT for: General design questions, non-branded content
- NOT for: Drupal conversion (use design-system-converter plugin instead)
Project Detection
Before ANY operation, find the PROJECT_PATH using this search order:
- Current directory - Check if
./brand-philosophy.mdexists - Parent directory - Check if
../brand-philosophy.mdexists - Subdirectories - Use
find . -maxdepth 2 -name "brand-philosophy.md"to find nearby projects - If multiple found - Ask user which project to use
- If none found - Direct user to run
/brand-initfirst
Once PROJECT_PATH is set, the folder structure is:
{PROJECT_PATH}/
├── brand-philosophy.md # Always exists
├── templates/
│ ├── presentations/
│ │ └── {template-name}/
│ │ ├── template.md
│ │ ├── canvas-philosophy.md
│ │ └── sample.pptx
│ ├── carousels/
│ │ └── {template-name}/
│ │ ├── template.md
│ │ ├── canvas-philosophy.md
│ │ └── sample.pdf
│ └── html/
│ └── {design-system-name}/
│ ├── canvas-philosophy.md
│ ├── design-system.md
│ └── components/ # Reusable HTML components
├── presentations/ # Output folder
├── carousels/ # Output folder
├── html-pages/ # Output folder (HTML pages)
└── assets/ # Brand assets
Finding templates:
- Presentations:
find {PROJECT_PATH}/templates/presentations -name "template.md" - Carousels:
find {PROJECT_PATH}/templates/carousels -name "template.md"
Three-Layer System
Apply this layered approach when creating content:
-
Layer 1 - Brand Philosophy (
brand-philosophy.mdin project)- Load and apply visual DNA (colors, typography, imagery)
- Load and apply verbal DNA (voice, tone, vocabulary)
-
Layer 2 - Content Type Guide (from plugin
references/)- Read
references/presentations-guide.mdfor presentations - Read
references/carousels-guide.mdfor carousels
- Read
-
Layer 3 - Template (from project
templates/)- Load template's
canvas-philosophy.mdfor visual design rules - Follow template's structure for slide/card sequence
- Load template's
Commands
Route user requests to the appropriate command:
| User Intent | Command |
|---|---|
| Status, switch projects, or start | /brand |
| Initialize new project | /brand-init |
| Extract brand from sources | /brand-extract |
| Generate alternative color palettes | /brand-palette |
| Manage assets (logos, icons, fonts) | /brand-assets |
| Create presentation template | /template-presentation |
| Create carousel template | /template-carousel |
| Get outline template + AI prompt with slide/card definitions | /outline |
| Create presentation (guided) | /presentation |
| Create presentation (quick) | /presentation-quick |
| Create carousel (guided) | /carousel |
| Create carousel (quick) | /carousel-quick |
| Create HTML design system | /design-html |
| Create HTML page (guided) | /html-page |
| Create HTML page (quick) | /html-page-quick |
| Add new content type | /content-type-new |
Underlying Skills
Use these skills during content generation:
| Skill | When to Use |
|---|---|
| visual-content | Generate visual output from canvas philosophy (bundled) |
| html-generator | Generate HTML pages and components from design system (bundled) |
| pptx | Convert presentation PDFs to PowerPoint |
| Create multi-page carousel PDFs |
The visual-content skill is bundled with this plugin. For HTML-to-Drupal conversion, use the design-system-converter plugin.
References
Bundled (Plugin-Specific)
references/brand-philosophy-template.md- Template for brand philosophyreferences/template-structure.md- Template for template.md filesreferences/canvas-philosophy-template.md- Template for canvas philosophyreferences/presentations-guide.md- Presentation best practicesreferences/carousels-guide.md- Carousel best practicesreferences/style-constraints.md- 13 visual styles with enforcement blocksreferences/color-palettes.md- Color theory and palette typesreferences/output-specs.md- Dimensions, formats, file sizes
Online Dev-Guides (Design Systems)
For design system recognition and analysis methodology, fetch the guide index:
Index: https://camoa.github.io/dev-guides/llms.txt
Likely relevant topics: design-systems/recognition
Usage: WebFetch the index to discover available topics, then fetch specific topic pages when extracting brand elements or analyzing design systems.
More from camoa/claude-skills
html-generator
Use when generating branded HTML pages and components from a design system. Creates standalone HTML components and composes them into full pages with embedded CSS, responsive design, and brand integration.
43memory-manager
Use after completing any phase activity - updates project_state.md, project registry, ensures files are in correct locations, maintains lean memory
39diagram-generator
Use when visualizing architecture - generates Mermaid diagrams for data flow, service relationships, or entity structures. Trigger: 'draw diagram', 'visualize', 'show relationships', 'mermaid chart'.
30code-quality-audit
Use when checking code quality, running security audits, testing coverage, finding SOLID/DRY violations, or setting up quality tools. Use when user says "audit this code", "check security", "run PHPStan", "code quality", "find violations", "SOLID check", "DRY check", "test coverage", "lint this", "security review", "is this production ready", "check for vulnerabilities", "code review", "grade this code". Supports Drupal (PHPStan, PHPMD, Psalm, Semgrep, Trivy, Gitleaks via DDEV) and Next.js (ESLint, Jest, Semgrep, Trivy, Gitleaks). Use proactively before deployment or after significant code changes.
20requirements-gatherer
Use when gathering project requirements - asks structured questions about project type, scope, integrations, and constraints to populate project_state.md
17generating-infographics
Use when creating infographics, data visualizations, process diagrams, timelines, or comparisons - generates branded infographics using @antv/infographic with 114 templates across 7 categories. Triggers on "create infographic", "make infographic", "visualize data", "timeline", "process diagram".
17