cyberneticlibrary
← library

Develop Drupal themes and custom CSS

drupal-frontend-devsubagentsetup L2★54
edutrul/drupal-ai ↗
What it does

Develop Drupal theme Twig templates, CSS, and JavaScript

Best for

Building Drupal theme components with PostCSS styling, proper XSS escaping in Twig, and responsive mobile-first layouts that pass accessibility and CSP checks.

Inputs
  • · Twig template requirements
  • · PostCSS source files
  • · component specifications
Outputs
  • · docroot/themes/custom/*/templates/*.html.twig
  • · docroot/themes/custom/*/css/*.pcss
  • · docroot/themes/custom/*/{theme_name}.theme
Requires
  • · Drupal 10+
  • · PostCSS
  • · Node.js build tools
Preconditions
  • · Drupal core installed
  • · PostCSS pipeline configured
  • · BEM naming convention adopted
Failure modes
  • · XSS if user content not escaped (|escape filter missing)
  • · CSP violation if inline styles present
  • · Layout shift if image dimensions missing
Trust signals
  • · PostCSS compilation check (npm run build)
  • · XSS vector audit (|escape or autoescape verification)
  • · Responsive verification (375px/768px/1200px)
  • · A11y validation (heading hierarchy, alt text, focus states)
  • · CSP compliance (no inline styles/scripts)