A comprehensive standard for developing Vue3 and TypeScript sub-projects within a pnpm monorepo using Arco Design and UnoCSS.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install keyblade-pro-rules
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install keyblade-pro-rules using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Coding Rules?
The coding-rules skill is a robust technical specification designed for AI agents and developers working within a pnpm monorepo. It enforces strict architectural patterns for Vue3 sub-projects, specifically targeting stacks utilizing TypeScript, Vite, Arco Design, and UnoCSS. By implementing this skill, teams ensure consistent code quality across table-heavy admin interfaces and modular business logic.
This guide leverages modern best practices, including the preference for ref-based reactivity, automated imports for Pinia and Vue APIs, and strict naming conventions. Using these Openclaw Skills ensures that every generated component or logic block adheres to high-performance standards and maintainable structures, significantly reducing technical debt in large-scale applications.
Coding Rules Use Cases
- Generating or refactoring Vue3 + TypeScript sub-projects within a monorepo.
- Implementing standardized data tables using kb-pro-table and useTable hooks.
- Organizing business logic into modular request, type, and enum files.
- Styling components with UnoCSS utility classes to maintain design consistency.
- Enforcing strict TypeScript typing and JSDoc documentation across all modules.
How Coding Rules Works
- Identifies the project type by checking for a vite.config.ts and specific dependencies in the package.json file.
- Applies the Vue3 technical stack rules for Arco Design components and UnoCSS styling.
- Structures business modules by splitting them into index, request, type, and enum files.
- Implements standardized request logic using the @keyblade/http library within a defined namespace.
- Enforces naming conventions like kebab-case for files and specific prefixes for interfaces and enums.
Coding Rules Setup
To install this skill, ensure your directory structure follows the standardized symlink pattern for Openclaw Skills:
# Create the central skills directory
mkdir -p .ai/skills/coding-rules
# Link the skills to your preferred AI agent environment
ln -s ../.ai/skills .claude/skills
ln -s ../.ai/skills .trae/skills
Coding Rules Data Schema & Taxonomy
The skill organizes business logic into a modular directory structure under modules/ to ensure high separation of concerns:
| File | Purpose |
|---|---|
index.ts |
Centralized export point for the module |
request.ts |
API request functions and mock data implementation |
type.ts |
TypeScript interface and type definitions (prefixed with I) |
enum.ts |
Enumeration definitions (prefixed with E) |
All files must use kebab-case (e.g., user-management.ts) and include full JSDoc comments for every field.
Coding Rules Advanced Features
- Multi-agent support via shared symlinks in .ai/skills/ directory.
- Automated useTable and useForm hook integration for rapid UI development.
- Global request error handling with EResponseCode enum integration.
- Utility class conflict resolution in UnoCSS using the ! prefix for Arco Design components.
- Ref-first reactivity enforcement for consistent Vue3 composition API usage.
SKILL.md
Loading
Related Openclaw Skills
Siyuan LLM Wiki
A Siyuan Note implementation of Andrej Karpathy's LLM Wiki workflow for building an AI-maintained, structured knowledge base.
Math Proof & Review Loop
An automated mathematical proof system that utilizes a producer-reviewer agent loop to generate and verify rigorous theorems.
Polymarket 5m Trading
A template-driven automation skill for executing high-frequency trading cycles on BTC-related Polymarket prediction markets.
CamScanner Image HD
A professional-grade image enhancement tool that applies auto-cropping and HD super filters to create sharper, clearer documents and photos.
CamScanner Image Erase Handwriting
A high-precision image enhancement tool that intelligently detects and removes handwritten strokes, signatures, and annotations from document scans.
AI Socializer
A security-first skill for AI agents to browse, post, and engage with AI-centric social networks while preventing credential leakage.
Featured*
