dxb
Build and manage DXPR Builder pages via drush dxb:* commands. Write Bootstrap 5 HTML — the builder parses it into drag-and-drop editable elements. Use when asked to "create a page", "build a landing p
SKILL.md.claude/skills/dxb/SKILL.md
GitHubPreamble (run first)
echo "=== DXPR BUILDER CONTEXT ==="
echo ""
echo "=== PAGE TEMPLATES ==="
drush dxb:template:list 2>/dev/null || echo "TEMPLATES: unavailable"
echo ""
echo "=== CONTENT TYPES WITH DXPR BUILDER FIELDS ==="
DXPR_TYPES=$(drush php:eval '
$etm = \Drupal::entityTypeManager();
$displays = $etm->getStorage("entity_view_display")->loadMultiple();
$types = [];
foreach ($displays as $display) {
foreach ($display->getComponents() as $name => $component) {
if (isset($component["type"]) && $component["type"] === "dxpr_builder_text") {
$types[] = $display->getTargetEntityTypeId() . "." . $display->getTargetBundle() . " (field: " . $name . ")";
}
}
}
echo implode("\n", array_unique($types)) ?: "None found";
' 2>/dev/null) || DXPR_TYPES="FIELD_DETECTION: unavailable"
echo "$DXPR_TYPES"
echo ""
echo "=== CONTENT TYPE DETAILS (fields, settings) ==="
# Use wm:content-type:get if available for each builder-enabled bundle.
if command -v drush &>/dev/null && drush wm:content-type:list &>/dev/null 2>&1; then
echo "$DXPR_TYPES" | grep "^node\." | sed 's/node\.\([^ ]*\).*/\1/' | sort -u | while read -r bundle; do
echo "--- $bundle ---"
drush wm:content-type:get "$bundle" 2>/dev/null || echo " unavailable"
done
else
echo "wm:content-type:get unavailable (drush_webmaster not installed)"
fi
echo ""
echo "=== USER TEMPLATES ==="
drush dxb:user-template:list 2>/dev/null || echo "USER_TEMPLATES: unavailable"
After reading preamble output:
- Use content type details to understand fields, required settings, and descriptions
- Before
page:create, pass the correcttypeargument (the content type machine name) - Use the content type + field list to know which bundles support DXPR Builder and which field to target
- Use template list to suggest available templates when creating pages
- If multiple builder fields exist on a bundle, always specify
--field
DXPR Builder Drush Commands
<!-- PROMPT_RULES_START (auto-generated from prompt.js — do not edit manually) -->HTML Content Rules
DXPR Builder parses standard Bootstrap 5 HTML into drag-and-drop editable elements. You write BS5 markup, the builder handles the rest. However, you MUST follow these rules:
Layout
- Use Bootstrap grid system and responsive design patterns
- Row columns must total exactly 12 (e.g. col-6 + col-6, col-4 + col-4 + col-4). Do NOT use col-auto or col without a size — each column must have an explicit number (col-1 through col-12)
- Avoid nested containers
- Sections contain content directly - no empty wrapper divs:
- But only use a container-fluid when appropriate for the type of content
- CRITICAL: NEVER use Bootstrap flexbox utility classes (d-flex, d-inline-flex, gap-, flex-row, flex-column, flex-wrap, justify-content-, align-items-*) for layouts. These classes are FORBIDDEN.
- For ANY horizontal arrangement of elements (buttons, links, cards, icons, etc.), you MUST use the Bootstrap grid: wrap elements in div.row containing div.col-N children that total 12
Styling
- The content will be part of a custom themed Bootstrap 5 page
- Use Bootstrap classes for their intended purpose, e.g. do not use .warning or .success just for styling
- DO NOT use CSS background colors or gradients unless the user explicitly requests them
- DO NOT include style tags
Images
- Every IMG tag needs src and alt attributes
- Place images between content blocks, not inline with text
- Format src as: https://promptahuman.com/600x400@2x?bg_color=[HEX]&text_color=[HEX+333333]&title=[file_name.png]&prompt=[Creative Brief in plain text, emoji allowed.]
- bg_color: Use 444444 or contextually appropriate color
- text_color: Must be subtle - use bg_color value + 333333 (e.g., bg_color=444444 → text_color=777777)
- Alt text must double as the image creative brief: a standalone description (10-20 words) that an image creator (AI or human) could use to produce the picture without any other context
- Use the same text for both the alt attribute and the URL prompt parameter
- File name respects picture type, image=jpg, animation=gif, video=mp4, etc
- Section bg image can be on container never on row or col
General
- Output only valid HTML that can be directly inserted into a webpage
- DO NOT include DOCTYPE, html, head, or body tags
- DO NOT use markdown formatting (no ``` or ```html tags)
- Return ONLY the raw HTML with no wrapping or formatting
- Never include explanations, meta-commentary, word counts, character counts, or generation statistics
- No explanations or meta-commentary in output<!-- PROMPT_RULES_END -->
Commands
Discovery
# List available elements (blocks, views)
drush dxb:element:list
drush dxb:element:list --type=block
drush dxb:element:list --type=view
# List page templates
drush dxb:template:list
drush dxb:template:list --category=Landing
# List user templates (reusable components)
drush dxb:user-template:list
drush dxb:user-template:list --global
Creating Pages
# Create from template (type is required)
drush dxb:page:create drag_and_drop_page my_template \
--title="Page Title"
# Dry run
drush dxb:page:create page my_template \
--title="Test" --dry-run
Reading & Updating Markup
page:update preserves the entity's existing text format (e.g. dxpr_builder_html). Never set the text format manually when updating -- the command handles it.
# Get current markup
drush dxb:page:get 42
drush dxb:page:get 5 --entity-type=block_content
# Update with Bootstrap 5 HTML
drush dxb:page:update 42 \
--markup='<section class="py-5"><div class="container">...</div></section>'
# Update from file
drush dxb:page:update 42 --markup=@/tmp/page.html
# Dry run
drush dxb:page:update 42 --markup="<div>new</div>" --dry-run
Saving Reusable Templates
# Create user template
drush dxb:user-template:create "Hero Section" \
--markup='<section class="py-5">...</section>'
# Create global template (available to all users)
drush dxb:user-template:create "CTA Block" \
--markup='<div class="container">...</div>' --global
Workflow
- Discover —
template:list,element:list - Create —
page:createfrom template, or create entity thenpage:updatewith BS5 markup - Edit —
page:getto read current markup, modify,page:updateto save - Reuse —
user-template:createto save sections for reuse
Always write Bootstrap 5 HTML following the content rules above. The builder parses it into visual drag-and-drop components automatically.