🧩
Frontend

Twig Component

by smnandre

Twig Component is a Frontend skill for Claude Code, published by smnandre in symfony-ux-skills.

171 stars14 forkson smnandre/symfony-ux-skillsAdded 2026/09/08+1% in starsRepository updated 2026/06/14
claudeclaude-pluginclaude-skillscodexcodex-skillscomponentsgeminigemini-cli-extensiongemini-extensiongemini-skillsskillskillssymfonysymfony-uxuxux-agentux-iconsux-map
Install in seconds
Install Twig Component
Copy Twig Component into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/smnandre/symfony-ux-skills/tree/main/skills/twig-component ~/.claude/skills/twig-component

Requires Node.js. Downloads this skill only β€” not the rest of the repository β€” into your Claude Code skills folder.

Without Node.js

git clone https://github.com/smnandre/symfony-ux-skills.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
skills/twig-component/SKILL.md in smnandre/symfony-ux-skills
Installs to
~/.claude/skills/twig-component
Collection
One of 7 skills cataloged from this repository
Category
Frontend β€” 732 skills

What Twig Component does

Twig Component creates reusable server-rendered UI components with PHP classes and Twig templates. Use it for props, slots, computed properties, or Twig-only components when building buttons, cards, alerts, and other shared UI elements.

Twig Component is cataloged under Frontend on DirSkills. Twig Component comes from a repository tagged claude, claude-plugin, claude-skills, codex and codex-skills.

Documentation

README

TwigComponent

Reusable UI components with PHP classes + Twig templates. Think React/Vue components, but server-rendered with zero JavaScript.

Two flavors exist: class components (PHP class + Twig template) for components that need logic, services, or computed properties, and anonymous components (Twig-only, no PHP class) for simple presentational elements.

When to Use TwigComponent

Use TwigComponent when you need reusable markup with props but no server re-rendering after the initial render. If the component needs to react to user input (re-render via AJAX, data binding, actions), use LiveComponent instead.

Good candidates: buttons, alerts, cards, badges, icons, form widgets, layout sections, navigation items, table rows, modals (structure only).

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Twig Component

  • What else does smnandre publish alongside Twig Component?

    Twig Component is one of 7 skills that DirSkills catalogs from smnandre/symfony-ux-skills, the repository it ships in. Its siblings there include LiveComponent, Stimulus and Symfony UX. Each one is a separate skill with its own page in this directory, installs the same way Twig Component does, and is maintained by smnandre in that same repository. The rest of the collection is listed on the smnandre/symfony-ux-skills page.

  • How does Twig Component compare to other Frontend skills?

    Twig Component ranks #648 by stars among the 732 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Twig Component against them. Open each page to compare what they document and how they install.

More from smnandre/symfony-ux-skills

Twig Component is one of 7 skills cataloged on DirSkills from smnandre/symfony-ux-skills.

See all 7 skills β†’