vue-page-structure
规范 Vue 3 页面的目录结构与组件拆分方式,遵循容器组件与展示组件分离原则。index.vue 仅作为入口组装各子模块,业务逻辑和 UI 片段必须拆分到 components/、hooks/ 等子目录中。在创建新页面、重构现有页面、或编写 Vue 组件时自动应用。
Skill by yuguaa
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/yuguaa-vue-page-structure
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, frontend
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/vue-page-structure
What's inside
- Skill name
vue-page-structure- Description
- 规范 Vue 3 页面的目录结构与组件拆分方式,遵循容器组件与展示组件分离原则。index.vue 仅作为入口组装各子模块,业务逻辑和 UI 片段必须拆分到 components/、hooks/ 等子目录中。在创建新页面、重构现有页面、或编写 Vue 组件时自动应用。
- License
- unknown
- Instructions
- 81 lines in SKILL.md · view on GitHub
Files (1)
- SKILL.md
The license isn't open source, so the instructions aren't shown here. Read SKILL.md on GitHub
More from yuguaa/dev-skill
- 0.497score
review-code-quality
yuguaa
Review source code for readability, maintainability, code structure, code smells, React state/effect usage, TypeScript rigor, abstraction quality, and…
SkillCFreshness: C★ 1Claude Code +9 - 0.488score
code-convergence-and-abstraction-boundary
yuguaa
凡是在项目中进行代码开发、编写、重构、审查或清理时使用,以强制执行该存储库的代码收敛与抽象边界规则。
SkillCFreshness: C★ 1Claude Code +9 - 0.429score
shadcn-vue
yuguaa
shadcn-vue component docs in-repo: CLI install, Vue usage, Reka API when applicable.
SkillDFreshness: D★ 1Claude Code +9 - 0.429score
import-rules
yuguaa
规范 TypeScript / Vue 项目中的模块导入方式,包括路径别名优先、桶导入(barrel import)、类型导入分离、导入排序以及 API 模块的导入风格。在编写或修改任何 .ts / .vue 文件的 import 语句时自动应用。
SkillDFreshness: D★ 1Claude Code +9 - 0.429score
export-rules
yuguaa
规范 TypeScript / Vue 项目中的模块导出方式,包括命名导出优先、桶导出(barrel export)组织、类型导出分离、export default 受限使用以及导出排序。在编写或修改任何 .ts / .vue 文件的 export 语句时自动应用。
SkillDFreshness: D★ 1Claude Code +9 - 0.426score
git
yuguaa
Git 工作流、提交规范、中文 Conventional Commits 提交信息生成与常见命令速查。适用于 commit、branch、rebase、undo、conflict 等所有 git 相关问题。
SkillDFreshness: D★ 1Claude Code +9 - 0.426score
file-naming
yuguaa
规范项目中的文件命名方式,确保文件名统一使用短横线连接(kebab-case),提高代码一致性与可读性。在创建、重命名、生成任何文件时自动应用。
SkillDFreshness: D★ 1Claude Code +9 - 0.421score
less-nesting
yuguaa
规范组件开发中 LESS 的书写方式,要求必须使用嵌套语法,且顶层类名尽量只保留一个。在编写或修改组件样式(LESS / .less / style lang="less")时自动应用。
SkillDFreshness: D★ 1Claude Code +9 - 0.421score
vue3-vue-file-template
yuguaa
当在 Vue3 项目中新建 .vue 文件时,自动生成标准的单文件组件基础结构,并根据项目是否使用 TypeScript 决定是否添加 lang="ts"
SkillDFreshness: D★ 1Claude Code +9 - 0.421score
scss-nesting
yuguaa
规范组件开发中 SCSS 的书写方式,要求必须使用嵌套语法,且顶层类名尽量只保留一个。在编写或修改组件样式(SCSS / style 块)时自动应用。
SkillDFreshness: D★ 1Claude Code +9 - 0.418score
git-commit
yuguaa
根据当前改动生成符合 Conventional Commits 规范的中文 Git 提交信息,可附带详细变更说明
SkillDFreshness: D★ 1Claude Code +9
Signals
- Stars
- 1
- Forks
- 0
- Open issues
- 0
- Last commit (this folder)
- Apr 14, 2026 (6 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- License unknown
- Repository
- github.com/yuguaa/dev-skill
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from yuguaa
- 0.497score
review-code-quality
yuguaa
Review source code for readability, maintainability, code structure, code smells, React state/effect usage, TypeScript rigor, abstraction quality, and…
SkillCFreshness: C★ 1Claude Code +9 - 0.488score
code-convergence-and-abstraction-boundary
yuguaa
凡是在项目中进行代码开发、编写、重构、审查或清理时使用,以强制执行该存储库的代码收敛与抽象边界规则。
SkillCFreshness: C★ 1Claude Code +9 - 0.429score
shadcn-vue
yuguaa
shadcn-vue component docs in-repo: CLI install, Vue usage, Reka API when applicable.
SkillDFreshness: D★ 1Claude Code +9 - 0.429score
import-rules
yuguaa
规范 TypeScript / Vue 项目中的模块导入方式,包括路径别名优先、桶导入(barrel import)、类型导入分离、导入排序以及 API 模块的导入风格。在编写或修改任何 .ts / .vue 文件的 import 语句时自动应用。
SkillDFreshness: D★ 1Claude Code +9 - 0.429score
export-rules
yuguaa
规范 TypeScript / Vue 项目中的模块导出方式,包括命名导出优先、桶导出(barrel export)组织、类型导出分离、export default 受限使用以及导出排序。在编写或修改任何 .ts / .vue 文件的 export 语句时自动应用。
SkillDFreshness: D★ 1Claude Code +9 - 0.426score
git
yuguaa
Git 工作流、提交规范、中文 Conventional Commits 提交信息生成与常见命令速查。适用于 commit、branch、rebase、undo、conflict 等所有 git 相关问题。
SkillDFreshness: D★ 1Claude Code +9
Cite this page
vue-page-structure skill. Agent Mart. https://agentmart.dev/skills/yuguaa-vue-page-structure (last updated 2026-10-24)