symfony-ux-skills
Symfony UX 组件库的 AI Agent 技能包
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：symfony-ux-skills。 它的用途是：Symfony UX 组件库的 AI Agent 技能包 完整的 Skill 内容见：https://321skill.com/skills/symfony-ux-skills/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我想在Symfony项目中使用LiveComponent实现一个实时搜索表单，并带有防抖和defer加载。' 它会自动读取live-component技能，给出正确的组件类、data-model绑定、actions定义以及模板中的{% component %}示例，并提示常见陷阱（如CSRF保护、事件冒泡）。再如：'如何用Stimulus创建一个下拉菜单？' 它会根据stimulus技能提供控制器代码、targets、actions和值定义，并推荐使用data-controller和data-action属性的最佳实践。
介绍
该技能包专为 Symfony UX 前端栈设计，包含 Stimulus、Turbo、TwigComponent、LiveComponent、UX Icons 和 UX Map 七个专项技能。当 AI 助手需要回答关于 Symfony UX 组件选择、使用方式或常见陷阱的问题时，它会自动加载这些技能文件，从而获得准确、版本同步的 API 参考、最佳实践和注意事项，避免依赖过时训练数据导致的错误。
安装后，AI 助手会在对话中自动激活对应技能。例如，当开发者询问“如何用 LiveComponent 实现实时搜索？”时，助手会读取 live-component 技能，给出正确的组件结构、数据模型、actions 和表单绑定方式。技能还包含一个 orchestrator 决策树，可帮助新手快速判断不同场景下该用哪个 UX 工具。
适合使用 Symfony 框架的全栈开发者、前端开发者以及需要快速搭建现代化交互界面的项目团队。无论是构建 SPA 风格的导航、实时表单验证、还是集成地图，这套技能都能让 AI 助手给出更精准的代码建议。
建议在安装后，将项目根目录下的 CLAUDE.md（或对应平台的上下文文件）复制到当前项目中，以提示 AI 助手自动加载这些技能。注意，该技能包仅覆盖 Symfony UX 官方包，不涉及其他第三方前端库或 Symfony 核心组件。
核心特点
与通用的 Symfony 技能不同，本仓库聚焦于 Symfony UX 的六个官方前端包，每个包都有独立的技能文件，涵盖 API、常见模式和陷阱，且由 Symfony 社区专家维护，版本与官方同步。
注意事项
仅适用于 Symfony UX 相关库，不涵盖其他 Symfony 组件（如 Doctrine、Security）或第三方前端框架。
常见问题
如何安装这个技能包？
如果使用 Claude Code，先添加 marketplace：`claude plugin marketplace add smnandre/symfony-ux-skills`，再安装：`claude plugin install symfony-ux-skills@symfony-ux-skills`。也可以手动复制 skills 目录到对应平台（如 .claude/skills/）。
支持哪些 AI 编码工具？
支持 Claude Code（通过插件市场）、Gemini CLI、OpenAI Codex 等，均可通过手动复制技能文件或设置上下文文件（CLAUDE.md / AGENTS.md / GEMINI.md）来使用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/symfony-ux-skills/raw/index.md 读取 symfony-ux-skills 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/symfony-ux-skills/raw/index.md（查看排版版本）