sporty-group
一个基于Nuxt/Vue的体育联赛信息展示单页应用。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：sporty-group。 它的用途是：一个基于Nuxt/Vue的体育联赛信息展示单页应用。 完整的 Skill 内容见：https://321skill.com/skills/sporty-group/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我基于这个Sporty-Group项目，创建一个展示电影信息的类似应用，需要替换API并调整UI。”，它会分析项目结构，指出需要修改的数据获取模块（useApi.ts）、类型定义（types/）和展示组件（LeagueCard.vue），并给出替换为电影API的具体步骤和代码示例。或者，
对AI说：“这个项目的搜索过滤逻辑在哪个文件？我想改成支持多选运动类型。”，它会直接定位到 LeaguesFilters.vue 组件和对应的Pinia store，并提供修改过滤逻辑的实现思路。
介绍
Sporty-Group Skill 是一个专为体育爱好者或相关开发者设计的单页应用（SPA），它解决了从海量数据中快速查找和浏览全球体育联赛信息的痛点。用户无需在多个网站间跳转，即可在一个界面内完成联赛的搜索、筛选和徽章查看。
使用该Skill非常简单，开发者只需克隆仓库并安装依赖后，运行开发服务器即可在本地启动应用。应用会自动从TheSportsDB API获取联赛数据，并提供实时搜索、按运动类型筛选以及点击查看联赛徽章等交互功能。所有徽章数据会缓存在本地，提升重复访问的体验。
该Skill非常适合前端开发者、全栈开发者，尤其是希望学习或参考如何使用现代Vue/Nuxt技术栈构建数据驱动型SPA的开发者。它也是一个很好的教学演示项目，展示了状态管理、API集成和响应式UI的实现。
使用建议：由于依赖外部API，网络状况可能影响数据加载速度。建议在学习和开发目的下使用，生产环境部署前需考虑API的调用限制和稳定性。项目结构清晰，适合作为模板进行二次开发，添加更多自定义功能。
核心特点
与同类体育数据展示项目相比，它采用了最新的Nuxt 4和Vue 3组合，并集成了完整的现代化开发工具链（TypeScript, Pinia, VueUse），提供了开箱即用的响应式设计、深色模式支持以及本地缓存优化，项目结构清晰规范，更适合作为学习现代前端开发的范例。
注意事项
该Skill不适合需要实时比分、详细赛事统计或高频数据更新的场景，因为它主要聚焦于静态联赛信息的展示。
常见问题
这个项目需要后端吗？
不需要，它是一个纯前端SPA，数据来自免费的TheSportsDB公共API。
可以修改数据源或添加更多体育类型吗？
可以，通过修改 composables/useApi.ts 中的API调用逻辑和 stores/sportsLeagues.ts 中的过滤逻辑即可实现。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/sporty-group/raw/index.md 读取 sporty-group 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/sporty-group/raw/index.md（查看排版版本）