How this skill is triggered — by the user, by Claude, or both
Slash command
/twig:make-componentsonnetThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Génère un Twig Component Symfony UX complet : classe PHP avec attribut `#[AsTwigComponent]` et template Twig associé.
Génère un Twig Component Symfony UX complet : classe PHP avec attribut #[AsTwigComponent] et template Twig associé.
src/Twig/Components/{ComponentName}.phptemplates/components/{ComponentName}.html.twigtemplates/components/{ComponentName}.html.twigIMPORTANT : Exécute ce workflow étape par étape :
Question: "Quel est le nom du composant Twig à créer ?"
Header: "Composant"
: (ex: Form:Input), il représente un sous-répertoire :
src/Twig/Components/Form/Input.phptemplates/components/Form/Input.html.twigQuestion: "Quel type de composant voulez-vous créer ?"
Header: "Type"
Options:
- "Standard (Recommandé)" : "Classe PHP + template Twig — composant complet avec logique métier"
- "Anonymous" : "Template Twig seul — composant purement visuel sans logique PHP"
Question: "Quelles sont les props du composant ? Format: label:string,type:string,icon:?string (préfixer par ? pour nullable). Laisser vide si aucune."
Header: "Props"
Question: "Quelles options activer pour ce composant ?"
Header: "Options"
Options:
- "mount()" : "Méthode d'initialisation appelée à la création du composant"
- "Computed properties" : "Propriétés calculées accessibles via computed.xxx dans le template"
- "Slots (blocks)" : "Blocs enfants pour la composition de contenu"
composer.json avec Readautoload.psr-4App par défautgrep -q "ux-twig-component" composer.json avec Bash⚠️ Le package symfony/ux-twig-component ne semble pas installé.➡️ Installation recommandée : composer require symfony/ux-twig-componentsrc/Twig/Components/{ComponentName}.php avec Write<?php
declare(strict_types=1);
namespace {namespace}\Twig\Components;
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
#[AsTwigComponent]
final class {ComponentName}
{
// Props publiques (données passées au composant)
public string $label;
public string $type = 'default';
// Si mount() demandé :
public function mount(/* params */): void
{
// Initialisation
}
// Si computed properties demandées :
public function getFormattedLabel(): string
{
return strtoupper($this->label);
}
}
Règles de génération de la classe :
final (pas de readonly — incompatible avec TwigComponent)#[AsTwigComponent] sans argument si le nom du composant correspond au nom de la classepublic?type et initialisées à nullmount() est demandé : ajouter la méthode avec les paramètres qui ne correspondent pas directement à des propriétésget{PropertyName}() avec le type de retour appropriéreadonly sur les propriétés — TwigComponent doit pouvoir les modifier après instanciationtemplates/components/{ComponentName}.html.twig avec WriteTemplate pour composant standard :
<div{{ attributes }}>
{# Props disponibles via this.propName #}
{# Computed via computed.methodName #}
{% if slots demandés %}
{% block content %}{% endblock %}
{% endif %}
</div>
Template pour composant anonymous :
{% props label, type = 'default' %}
<div{{ attributes }}>
{{ label }}
</div>
Règles de génération du template :
{{ attributes }} sur l'élément racine pour supporter les attributs HTML passés au composant{{ this.propName }}{{ computed.methodName }}{% props %} pour déclarer les props avec valeurs par défaut{% block content %}{% endblock %} pour le contenu enfant{% if this.propName %} pour les affichages conditionnelsAffiche :
✅ Composant {ComponentName} généré avec succès
Fichiers créés :
- src/Twig/Components/{ComponentName}.php (si standard)
- templates/components/{ComponentName}.html.twig
Props :
{liste des propriétés avec types}
Utilisation dans un template Twig :
<twig:{ComponentName} label="Mon texte" type="primary" />
Avec contenu (si slots) :
<twig:{ComponentName} label="Mon texte">
<p>Contenu enfant</p>
</twig:{ComponentName}>
Prochaines étapes :
- Ajouter la logique métier dans la classe PHP
- Personnaliser le template Twig
- Utiliser computed.xxx pour les propriétés calculées
final (jamais readonly)#[AsTwigComponent]mount() pour l'initialisation complexeget*() pour les computed properties{{ attributes }} sur l'élément racine<twig:ComponentName> pour l'utilisation{% block content %}{% endblock %} pour les slots{{ computed.xxx }} pour les propriétés calculées (appel unique, mis en cache){% props %} pour déclarer les propsreadonly sur la classe ou les propriétés du composantcomputed.xxx) aux appels multiples de méthodes dans le templatenpx claudepluginhub atournayre/claude-personas --plugin twigBuilds and refactors Symfony UX Twig Components with handling for props, slots, anonymous components, and CVA. Provides architectural workflow, checkpoints, and risk controls.
Creates reusable server-rendered UI components in Symfony using PHP classes and Twig templates, supporting props, slots, computed properties, and anonymous template-only components for buttons, cards, alerts, and navbars.
Twig coding standards and conventions for Craft CMS 5 templates. Covers variable naming, null handling, whitespace control, include isolation, Craft Twig helpers, and common pitfalls.