Catégorie 04 — SKILLS

Drupal Frontend Skill

Twig, theming, preprocess — conventions front Drupal 10/11

Installation
Globalmkdir -p ~/.claude/skills/drupal-front
Local projetmkdir -p .claude/skills/drupal-front
SKL
À propos

Skill Claude dédié au développement front-end Drupal — templates Twig, hooks preprocess, theme.libraries.yml, component-based theming BEM, Single Directory Components (SDC), breakpoints et overrides de templates contrib. Complémentaire à la skill Drupal Backend.

Commandes
CommandeDescription
/skills drupal-frontActiver la skill frontend Drupal
twig debugActiver Twig debug : twig.config: debug: true dans services.yml
drush crRebuild cache après modification .theme ou .libraries.yml
Exemples
Créer un template de nœud ArticleCODE
Crée le template node--article--full.html.twig pour afficher un article avec :
- Hero image pleine largeur (image_style: hero_2000)
- Titre H1 avec classe BEM .article__title
- Date de publication formatée en français
- Corps de texte avec attachement de la librairie 'mytheme/article'
Preprocess pour passer une variable custom au templateCODE
Ajoute dans THEME.theme un hook_preprocess_node() qui :
1. Vérifie que le nœud est de type 'event' et mode d'affichage 'teaser'
2. Calcule si l'événement est passé (compare date_fin avec REQUEST_TIME)
3. Passe une variable $variables['is_past'] = true/false au template Twig
Single Directory Component — CardCODE
Crée un composant SDC 'card' dans le thème avec :
- card.component.yml : props (title: string, image: url, url: string) + slots (body)
- card.twig : structure HTML BEM complète avec {{ props.title }}, {{ slots.body }}
- card.css : styles de base responsive mobile-first
- Utilisation dans node--article--teaser.html.twig