Updated 4mo ago
by smnandre
symfony-ux-skills
Symfony UX skills for Claude, Gemini, Codex, ... Live Component, Twig Component, Turbo, Stimulus
180 GitHub stars (180)
+4 in 20 days
| Period | New stars |
|---|---|
| Sep 27 | 0 |
| Sep 28 | 0 |
| Sep 29 | +1 |
| Sep 30 | +1 |
| Oct 1 | 0 |
| Oct 2 | 0 |
| Oct 3 | +1 |
| Oct 4 | 0 |
| Oct 5 | 0 |
| Oct 6 | 0 |
| Oct 7 | +1 |
| Oct 8 | 0 |
| Oct 9 | 0 |
| Oct 10 | 0 |
| Oct 11 | 0 |
| Oct 12 | 0 |
| Oct 13 | 0 |
| Oct 14 | 0 |
| Oct 15 | 0 |
| Oct 16 | 0 |
- 7 skills (7 skills found in its SKILL.md files)
- 14 forks (14 forks)
- 4mo ago last update (Last updated 4mo ago)
Install
Skills CLI
npx skills add smnandre/symfony-ux-skills
Asks which skills and agents to install. Just one: npx skills add smnandre/symfony-ux-skills --skill live-component — add -g for every project.
Claude Code
git clone https://github.com/smnandre/symfony-ux-skillscp -r "symfony-ux-skills/skills/live-component" ~/.claude/skills/
Copies the live-component skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add smnandre/symfony-ux-skills
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
live-component
Symfony UX LiveComponent for reactive server-rendered UI -- components that re-render via AJAX on user interaction, zero JavaScript required. Use when building live search, real-time filtering, dynamic forms, inline validation, dependent selects, auto-save, polling, deferred/lazy rendering, or any UI that updates itself based on user input. Code triggers: AsLiveComponent, LiveProp, LiveAction, da…
skills/live-component/SKILL.md on GitHub (opens in a new tab) -
stimulus
Stimulus JS framework for Symfony UX -- client-side behavior via HTML data attributes, zero server round-trips. Use when creating controllers for DOM manipulation, handling click/input/submit events, managing targets and values, wiring outlets between controllers, wrapping third-party JS libraries, or building toggles, dropdowns, modals, tabs, clipboard interactions. Code triggers: data-controlle…
skills/stimulus/SKILL.md on GitHub (opens in a new tab) -
symfony-ux
Symfony UX frontend stack -- decision tree and orchestrator for choosing between Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons, and UX Map. Use when the user is unsure which tool fits, wants to combine multiple UX packages, or asks a general frontend architecture question in Symfony. Also trigger when the user asks "which UX package should I use", "how to make this interactive", "should…
skills/symfony-ux/SKILL.md on GitHub (opens in a new tab) -
turbo
Hotwire Turbo for Symfony UX -- SPA-like speed with zero JavaScript. Covers Drive (navigation), Frames (partial page sections), and Streams (multi-target updates). Use when building ajax navigation, lazy-loaded sections, inline editing, pagination without reload, modals from the server, flash messages via streams, or real-time updates via Mercure/SSE. Code triggers: turbo-frame, turbo-stream, dat…
skills/turbo/SKILL.md on GitHub (opens in a new tab) -
twig-component
Symfony UX TwigComponent for reusable UI building blocks -- server-rendered components with PHP classes and Twig templates. Use when creating buttons, cards, alerts, badges, navbars, or any reusable UI element with props, blocks/slots, computed properties, or anonymous (template-only) components. Code triggers: AsTwigComponent, #[AsTwigComponent], ExposeInTemplate, PreMount, PostMount, <twig:Aler…
skills/twig-component/SKILL.md on GitHub (opens in a new tab) -
ux-icons
Symfony UX Icons for rendering SVG icons in Twig templates. Supports 200,000+ Iconify icons (Lucide, Heroicons, Tabler, Material Design, etc.), local SVG files, and custom icon sets with aliases. Use when displaying icons, configuring icon defaults, importing or locking on-demand icons, creating icon aliases, or styling SVG icons with CSS. Code triggers: <twig:ux:icon />, ux_icon(), UX_ICONS_DEFA…
skills/ux-icons/SKILL.md on GitHub (opens in a new tab) -
ux-map
Symfony UX Map for interactive maps with Leaflet or Google Maps in Symfony. Covers markers, polygons, polylines, circles, info windows, and LiveComponent integration. Use when displaying maps, placing markers, drawing shapes or routes, handling map events, building store locators, using custom tile layers, or making maps reactive with LiveComponent. Code triggers: <twig:ux:map />, Map(), Point(),…
skills/ux-map/SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.
Similar skills
-
AI-Research-SKILLsby Orchestra-Research Comprehensive open-source library of AI research and engineering skills for any AI model. Package the skills and your claude code/codex/gem…
-
logo-design-skillby kaankiziltug A comprehensive logo-design skill for Claude, Gemini CLI, Codex and other AI agents: principles, process, SVG craft, testing tools and a 1,…
-
ui-ux-pro-max-skillby nextlevelbuilder An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
-
Understand-Anythingby Egonex-AI Graphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about…
-
archifyby tt-a1i Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
-
oh-my-openagentby code-yeongyu OmO: Just type "mass ulw" keyword with your prompt. Now you are the master of graph engineering.