Hello, I'm pany, long time no see~ I'm the author of the open-source projects V3 Admin Vite and MobVue. This is my second phase of practice to improve their AI Coding experience, aiming to strive to be an AI-friendly Vue3 template. A year ago, I wrote the first phase of the practice plan using Rules: The first AI-friendly open-source Vue3 template 🌈. However, with the development of AI, this is far from enough, so we need to continue improving the AI Coding experience on this basis! Let's take a look at how to realize this idea.

Background

AI Coding coverage among programmers has approached nearly 100%. Although AI is becoming increasingly powerful, it is still prone to output unsatisfactory code when coding for specific projects. To reduce the occurrence of this situation, the V3 Admin Vite open-source project has added project-level conventions and Skills on top of existing Rules to ensure more reliable AI output.

Goal

Complete the built-in project-level conventions and Skills so that the AI Agent understands our project better and outputs ideal code.

Prerequisite Knowledge

This section references the Claude Code documentation features-overview

You need to first understand the differences between the three:

Aspect	CLAUDE.md	Rules	Skill
Loading	Every session	Every session, or when a matching file is opened	On-demand, when called or relevant
Scope	Entire project	Can be limited to file path scope	Specific tasks
Best for	Core conventions and build commands	Guidelines for specific languages or directories	Reference materials, repeatable workflows
When to use	Project conventions, "always do X" rules	/	Reusable content, reference docs, repeatable tasks
Example	Use pnpm, not npm; run tests before committing.	/	/deploy runs a deployment checklist; familiarize with API docs and endpoint patterns

Summary

• For instructions needed every session, use CLAUDE.md: Build commands, test conventions, project architecture
• Use Rules to keep CLAUDE.md focused: Rules with paths frontmatter are only loaded when Claude processes matching files, saving context
• For content Claude only needs sometimes, use Skills: Such as API documentation or deployment checklists triggered by /<skill-name>
• Combination of CLAUDE.md + Skills: CLAUDE.md holds always-on rules, Skills hold on-demand reference materials. For example, CLAUDE.md says "follow our API conventions," while the Skill contains the complete API style guide.

Translation

• CLAUDE.md: Universal conventions that take effect every time
• Rules: Rules that take effect every time but locally
• Skills: On-demand execution steps fixed to local scenarios

Implementation in This Phase

Added Project-Level Conventions

The Claude Code documentation explains CLAUDE.md as project context and conventions, and stipulates keeping its content as facts that Claude should maintain in every session, such as build commands, conventions, project architecture, "always do X" rules. If an entry is a multi-step process or only important for a part of the codebase, it should be moved to a Skill or Rules.

To better allow AI to understand the project and adhere to conventions, two root directory configuration files, AGENTS.md and CLAUDE.md, were added. The specific content must include the following modules (keeping content within 200 lines):

• Commands
• Architecture
• Conventions

In practice, I chose to refine these three modules based on the open-source project andrej-karpathy-skills. This open-source project effectively constrains AI output and avoids AI pitfalls through four simple principles, which is very effective in practice!

It is worth noting:

• The CLAUDE.md file works for the Claude Code tool
• The AGENTS.md file works for tools like Cursor, Antigravity, Trae, CodeX

Therefore, we prioritize outputting the more universal AGENTS.md file, then link AGENTS.md with CLAUDE.md to avoid writing two identical convention files.

Added Project Skills

The Claude Code documentation defines Skills as reusable knowledge and callable workflows.

Usually, you can choose the official tool skill-creator to help you complete the Skill you want, which is more efficient than writing from scratch. If you want to learn carefully how to write a good Skill, you can read: How to write a good Skill

In practice, we first store the written Skills in the more universal .agents/skills/ directory, then link them with .claude/skills/ (the linking scheme uses the symlink command: ln -s, the purpose is still to avoid writing two identical files).

For V3 Admin Vite, we added the following project Skills in the first phase (strictly keeping each Skill content within 500 lines):

• v3-create-crud: Create CRUD pages
• v3-upsert-store: Create or update global state
• v3-upsert-route: Create or update routing tables
• v3-use-utils: Tutorial for using built-in utilities
• v3-use-composables: Tutorial for using built-in composables

After abstracting these high-frequency requirements in admin systems into Skills, the AI Agent can more accurately produce the code you want and implement your requirements precisely.

Installing Community Skills

In addition to project Skills, the project also introduces third-party Skills from the community that are very friendly for writing Vue projects, including but not limited to:

• pinia
• pnpm
• unocss
• vite
• vitest
• vue
• vue-best-practices
• vue-router-best-practices
• vue-testing-best-practices

They mainly come from the repository: antfu/skills. These third-party Skills are recorded in the form of a skills-lock.json file, and the Skills themselves are not included in the project by default. If needed, you can run the npx skills experimental_install command to install them locally. After installation, they can be found in the .agents/skills/ directory.

Practice Summary

At this point, we have phasedly realized the Practice of Harness Engineering in Admin Systems in the AI Era mentioned in the title.

Based on this scheme and combined with the symlink method, it currently supports mainstream AI Coding tools such as Claude Code, CodeX, Cursor, Trae, Antigravity.

But, with the rapid development of AI Agents, there may be more different practice plans in the future, let's look forward to it together~

Source Code

• Direct link to convention file: AGENTS.md
• Direct link to skills directory: Skills
• Direct link to rules directory: Rules

Get the complete code of the open-source project: V3 Admin Vite / MobVue