A curated collection of Agent Skills built for Design-Driven Development, focusing on Vue 3, Shadcn UI, MasterGo integration, and high-quality engineering standards.

Add these skills to your Agent environment (e.g., OpenCode):

pnpx skills add helloggx/skill --skill='*'

or to install all of them globally:

pnpx skills add helloggx/skill --skill='*' -g

This repository is divided into two main categories: Generators for accelerating development and Experts for maintaining code quality.

Automated workflows for scaffolding projects and converting design drafts into code.

Best practices and review standards to ensure long-term code maintainability and security.

The underlying tools that support the skills above, which can also be invoked directly.

To fully utilize the Design-to-Code features (MasterGo integration), you need to configure your environment secrets.

Create a .env file or set the following variables in your Agent's configuration:

# MasterGo Personal Access Token (Required for fetching designs)
MG_MCP_TOKEN="your_mastergo_token_here"

# Default Design DSL Link (Optional quick-access preset)
TOKEN_URL_LIGHT="https://mastergo.com/goto/..."
TOKEN_URL_DARK="https://mastergo.com/goto/..."

Ensure your opencode.jsonc has the necessary permissions enabled. Our component-creater requires shadcnVue MCP capabilities:

{
  "$schema": "https://opencode.ai/config.json",
  "theme": "one-dark",
  "mcp": {
    "shadcnVue": {
      "type": "local",
      "enabled": true,
      "command": ["npx", "shadcn-vue@latest", "mcp"],
    },
    "context7": {
      "type": "remote",
      "url": "https://mcp.context7.com/mcp",
    },
  },
  "tools": {
    "shadcn_vue_init": true,
    "get_dsl": true,
    "get_token": true,
  },
  "permission": {
    "edit": "ask",
    "skill": {
      "*": "allow",
    },
  },
}

To help you use these skills more efficiently, we have broken down the workflows into four core scenarios:

Core Skill: vue-creater

When starting a new project, this skill handles tedious configuration (Vite, Tailwind, Shadcn, Pinia) and directly syncs the MasterGo design system.

1. Initialize Project

User: "Help me create a Vue project named crm-dashboard and complete the initialization config." Agent: Calls shadcn_vue_init to set up project structure, install dependencies, and configure Tailwind 4 and CSS variables.

2. Inject Design System

User: "Sync design specs using this MasterGo link [URL]." (or "Use the default Light theme config") Agent:

1. Calls get_dsl to fetch design data.
2. Calls get_token to map colors, radiuses, and typography to CSS variables (supports OKLCH color space).

Core Skill: component-creater

Converts specific UI component designs (e.g., cards, forms, sidebars) into code.

1. Generate Component

User: "Generate a UserProfile component based on this design link [URL]." Agent:

1. Parses the DSL and identifies Shadcn components within it (e.g., Button, Input).
2. Automatically installs missing Shadcn components (npx shadcn-vue@latest add ...).
3. Writes Vue code, automatically mapping design properties to Tailwind utility classes (e.g., bg-card, text-primary).

Core Skill: coding-standards

Ensures code aligns with TypeScript and Node.js best practices when writing complex logic or refactoring old code.

1. Standardized Refactoring

User: "Refactor src/utils/api.ts to match our coding standards." Agent: References coding-standards:

• Naming Check: Ensures variable names are descriptive (e.g., isUserAuthenticated instead of flag).
• Immutability: Uses spread operators (...user) instead of direct object modification.
• Error Handling: Ensures asynchronous operations include try-catch blocks and clear error messages.

2. New Feature Guidance

User: "I want to add a market search feature. How should I organize the files and types?" Agent: Suggests a file structure (e.g., types/market.types.ts, hooks/useMarket.ts) based on standards and provides type-safe function signature examples.

Core Skill: code-review-expert

Performs deep technical reviews before merging code or submitting a PR.

1. Execute Review

User: "Review my current staged changes." Agent: Scans git diff and checks against the checklist:

• SOLID Principles: Checks for Single Responsibility (SRP) or Open-Closed (OCP) violations.
• Security: Scans for XSS, injection risks, leaked secrets, or unsafe API calls.
• Code Smells: Flags overly long functions, deep nesting, or magic numbers.

2. Output Report

Agent: Generates a graded report ranging from P0 (Critical) to P3 (Low Priority) and asks if you want to apply auto-fixes.

MIT License © 2026 HelloGGX

For contributors and developers working on this project:

• Development Guide - Setup, testing, and contribution guidelines
• Network Troubleshooting - Resolve connection issues

# Install dependencies
bun install

# Run all tests
bun run test

# Type checking
bun run typecheck

# Development mode
bun run dev

This project uses Husky for Git hooks:

• pre-commit: Runs type checking and tests before each commit
• pre-push: Validates Bun version and runs type checking before push