AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
 
← Back to list

Twig Component (Symfony UX)

Teaches Claude to build reusable, server-rendered UI components with Symfony UX TwigComponent.

Dev & CodingIntermediate★ 181⑂ 14AI score 9/10Last updated: Jun 14, 2026

What it does

Gives Claude a working playbook for Symfony UX TwigComponent — reusable UI building blocks rendered on the server with zero JavaScript.

  • Class components (#[AsTwigComponent]) vs. anonymous, template-only components ({% props %})
  • Props, required vs. optional defaults, :prop dynamic expressions, mount() for derived state
  • Default and named blocks (slots), plus nested component composition
  • Computed properties via get* methods exposed as this.xxx
  • {{ attributes }} handling: defaults(), without(), render(), has()
  • Components as autowired services, PreMount/PostMount hooks, twig_component.yaml config

Scope is explicit: use LiveComponent for AJAX re-rendering, Stimulus for JS behavior, Turbo for navigation.

Who it's for

  • PHP developers working on Symfony applications
  • Teams building a Twig-based design system or component library
  • Devs coming from React/Vue who need the server-rendered equivalent

Examples

  1. "Create an Alert component with a type prop and a dismissible flag" → PHP class, Twig template, and usage snippets
  2. "Build a Modal with header/content/footer slots" → structured with <twig:block name="...">
  3. "Make a FeaturedProducts component that injects ProductRepository" → component-as-service that loops over this.products

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/smnandre/symfony-ux-skills/HEAD/skills/twig-component/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the skills/twig-component folder from the GitHub repo smnandre/symfony-ux-skills into my ~/.claude/skills/twig-component/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/smnandre/symfony-ux-skills.git /tmp/symfony-ux-skills && mkdir -p ~/.claude/skills && cp -r /tmp/symfony-ux-skills/skills/twig-component ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the skill repository: git clone https://github.com/smnandre/symfony-ux-skills.git
  3. Create the skills directory if needed: mkdir -p ~/.claude/skills
  4. Copy just this skill: cp -r symfony-ux-skills/skills/twig-component ~/.claude/skills/
  5. Verify ~/.claude/skills/twig-component/SKILL.md and its references/ folder exist.
  6. Restart Claude Code and try a prompt like "create a reusable Button TwigComponent" to confirm the skill triggers.
  7. In your actual project, install the package too: composer require symfony/ux-twig-component.
View source on GitHub ↗License: MIT