{"id":51837246,"url":"https://github.com/pythoughts-labs/vue3-best-practices","last_synced_at":"2026-07-23T00:02:05.262Z","repository":{"id":367672052,"uuid":"1281846233","full_name":"Pythoughts-labs/vue3-best-practices","owner":"Pythoughts-labs","description":null,"archived":false,"fork":false,"pushed_at":"2026-06-27T02:30:01.000Z","size":365,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"dev","last_synced_at":"2026-06-27T04:11:29.474Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pythoughts-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-06-27T02:00:11.000Z","updated_at":"2026-06-27T02:30:02.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Pythoughts-labs/vue3-best-practices","commit_stats":null,"previous_names":["pythoughts-labs/vue3-best-practices"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Pythoughts-labs/vue3-best-practices","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pythoughts-labs%2Fvue3-best-practices","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pythoughts-labs%2Fvue3-best-practices/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pythoughts-labs%2Fvue3-best-practices/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pythoughts-labs%2Fvue3-best-practices/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pythoughts-labs","download_url":"https://codeload.github.com/Pythoughts-labs/vue3-best-practices/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pythoughts-labs%2Fvue3-best-practices/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35782270,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-22T02:00:06.236Z","response_time":124,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-23T00:02:04.336Z","updated_at":"2026-07-23T00:02:05.244Z","avatar_url":"https://github.com/Pythoughts-labs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/banner.svg\" alt=\"vue3-best-practices - agent skills that teach AI current Vue 3 patterns\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Pythoughts-labs/vue3-best-practices/actions/workflows/ci.yml\"\u003e\u003cimg alt=\"CI\" src=\"https://github.com/Pythoughts-labs/vue3-best-practices/actions/workflows/ci.yml/badge.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"LICENSE\"\u003e\u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/license-MIT-42b883.svg\"\u003e\u003c/a\u003e\n  \u003cimg alt=\"Vue 3.5+\" src=\"https://img.shields.io/badge/Vue-3.5%2B-42b883?logo=vuedotjs\u0026logoColor=white\"\u003e\n  \u003cimg alt=\"Skills: 8\" src=\"https://img.shields.io/badge/skills-8-35495e\"\u003e\n  \u003cimg alt=\"MCP server\" src=\"https://img.shields.io/badge/MCP-server-35495e\"\u003e\n  \u003cimg alt=\"TypeScript\" src=\"https://img.shields.io/badge/TypeScript-strict-3178c6?logo=typescript\u0026logoColor=white\"\u003e\n  \u003ca href=\"#contributing\"\u003e\u003cimg alt=\"PRs welcome\" src=\"https://img.shields.io/badge/PRs-welcome-42b883\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Agent skills that teach AI coding agents current Vue 3 patterns, validated with automated evals.\u003cbr\u003e\n  Maintained by \u003ca href=\"https://github.com/Pythoughts-labs\"\u003ePythoughts-labs\u003c/a\u003e.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#install\"\u003eInstall\u003c/a\u003e -\n  \u003ca href=\"#mcp-server\"\u003eMCP server\u003c/a\u003e -\n  \u003ca href=\"#skills\"\u003eSkills\u003c/a\u003e -\n  \u003ca href=\"#how-it-works\"\u003eHow it works\u003c/a\u003e -\n  \u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Install\n\nAdd the skills to any agent that supports the `skills` registry:\n\n```bash\nnpx skills add Pythoughts-labs/vue3-best-practices\n```\n\n### Claude Code marketplace\n\n```bash\n# Add the marketplace\n/plugin marketplace add Pythoughts-labs/vue3-best-practices\n\n# Install everything at once\n/plugin install vue-skills-bundle@vue3-best-practices\n\n# Or install individual skills\n/plugin install vue-best-practices@vue3-best-practices\n/plugin install vue-best-practices@vue3-best-practices vue-router-best-practices@vue3-best-practices\n```\n\n### Trigger reliably\n\nPrefix a prompt with `use vue skill` so the agent loads the patterns before coding:\n\n```\nUse vue skill, build a todo list with filtering\n```\n\nWithout the prefix, triggering depends on how closely the prompt matches a skill's description keywords.\n\n## MCP server\n\nFor agents that consume MCP instead of the skills registry, [`mcp/`](mcp/) exposes every skill as MCP tools. The agent calls `vue_best_practices` when it detects Vue work, then pulls individual reference files on demand.\n\n```bash\ncd mcp \u0026\u0026 npm install\n```\n\nThen register the server. Replace `\u003cREPO\u003e` with the absolute path to this clone.\n\n### Claude Code\n\n```bash\nclaude mcp add vue-skills -- node \u003cREPO\u003e/mcp/index.mjs\n```\n\n### Cursor\n\n`~/.cursor/mcp.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"vue-skills\": {\n      \"command\": \"node\",\n      \"args\": [\"\u003cREPO\u003e/mcp/index.mjs\"]\n    }\n  }\n}\n```\n\n### Windsurf\n\n`~/.codeium/windsurf/mcp_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"vue-skills\": {\n      \"command\": \"node\",\n      \"args\": [\"\u003cREPO\u003e/mcp/index.mjs\"]\n    }\n  }\n}\n```\n\n### Any MCP client (generic stdio)\n\n```json\n{\n  \"mcpServers\": {\n    \"vue-skills\": {\n      \"command\": \"node\",\n      \"args\": [\"\u003cREPO\u003e/mcp/index.mjs\"],\n      \"env\": { \"VUE_SKILLS_DIR\": \"\u003cREPO\u003e/skills\" }\n    }\n  }\n}\n```\n\n`VUE_SKILLS_DIR` is optional and defaults to `../skills` relative to the server. Full details and the two tools (`vue_best_practices`, `get_vue_reference`) are documented in [mcp/README.md](mcp/README.md).\n\n\u003e MCP has no push trigger, so an agent calls a tool only when it judges the description relevant. To guarantee the skill loads on every Vue task, add one line to your agent rules (`AGENTS.md`, `.cursorrules`, or `CLAUDE.md`): \"Before any Vue work, call the `vue_best_practices` MCP tool and apply it.\"\n\n## Skills\n\n| Skill | When to use | Covers |\n|-------|-------------|--------|\n| **vue-best-practices** | Vue 3 + Composition API + TypeScript | Reactivity, SFC structure, data flow, composables, SSR, performance |\n| **vue-options-api-best-practices** | Options API (`data()`, `methods`) | `this` context, lifecycle, TypeScript with Options API |\n| **vue-router-best-practices** | Vue Router 4 | Navigation guards, route params, route-component lifecycle |\n| **vue-pinia-best-practices** | Pinia state management | Store setup, reactivity, `storeToRefs`, state patterns |\n| **vue-testing-best-practices** | Component or E2E tests | Vitest, Vue Test Utils, Playwright |\n| **vue-jsx-best-practices** | JSX in Vue | Syntax differences from React JSX, plugin config |\n| **vue-debug-guides** | Debugging Vue 3 | Runtime errors, warnings, async failures, hydration issues |\n| **vue-ai-apps** | AI/LLM \u0026 agent apps in Vue/Nuxt | Streaming chat UIs, Vercel AI SDK, `useChat`, tool calling, structured output |\n\n## How it works\n\n### Skill types\n\n- **Capability:** the agent cannot solve the problem without the skill. These cover version-specific behavior, recent features, and cases outside the model's training data.\n- **Efficiency:** the agent can solve the problem but not well. These supply the optimal pattern and a consistent approach.\n\n### Validation\n\nEach rule is validated with automated evals: a baseline run without the skill, and a run with it installed.\n\n| Baseline | With skill | Action |\n|----------|-----------|--------|\n| Fail | Pass | Keep |\n| Pass | Pass | Consider removing |\n\nA rule is kept only when it lets the model solve something it could not solve on its own.\n\n## Contributing\n\nDevelopment happens on `dev`. The `main` branch holds published skills only.\n\n1. Create a feature branch from `dev`\n2. Open a PR to `dev`\n3. After review, changes merge to `dev`\n4. Maintainers sync `dev` to `main` via the GitHub Action when ready to publish\n\n## License\n\nMIT, see [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpythoughts-labs%2Fvue3-best-practices","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpythoughts-labs%2Fvue3-best-practices","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpythoughts-labs%2Fvue3-best-practices/lists"}