mcpField
T
twig-components

twig-components

github.com/dev-toolingsDevelopment22775 installsUpdated 3w ago
Repository

About twig-components

A Symfony skill for building reusable Twig components, including class-based, anonymous, and reactive Live Components. It covers props, slots, state, and component testing.

Key features

  1. 01Anonymous and class-based components
  2. 02Props and slot patterns
  3. 03Computed component logic
  4. 04Reactive Live Components
  5. 05Component class testing

Use cases

  1. 01Extracting repeated Twig markup
  2. 02Building components with props and slots
  3. 03Adding reactive search, counters, or forms
  4. 04Testing component mount and rendering

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dev-toolings/superpowers-symfony --skill twig-components

After installing, type/twig-componentsin Claude Code to confirm it loaded.

Bundled filesreference.md

Details

From the project README

Twig Components (Symfony)

Use when

  • Extracting a repeated piece of Twig into a reusable component.
  • Building a component with props, slots, computed logic, or CVA variants.
  • Making a component reactive with Live Components (search, counters, forms).

Default workflow

  1. Choose the kind: anonymous (template only), class-based #[AsTwigComponent], or #[AsLiveComponent].
  2. Declare props as public mutable properties; use mount() for derived values.
  3. Expose content injection through blocks (slots) rather than more props.
  4. For Live Components, mark writable state with #[LiveProp(writable: true)] and debounce user input.
  5. Test the PHP class with InteractsWithTwigComponents.

Guardrails

  • Never make public props readonly: they are assigned after instantiation.
  • Inject services as private readonly, never as public props.
  • Only mark a LiveProp writable when the browser must change it.
  • Keep one responsibility per component.

Progressive disclosure

  • Use this file for execution posture and risk controls.
  • Open references when deep implementation details are needed.

Output contract

  • Component classes and templates, with their props and slots.
  • Live state and actions, when the component is reactive.
  • A component test for mount and render.

References

  • reference.md

Comments

Markdown supported