Skip to content
ai-omni-dev logo

AI Omni 开发指南系统

ai-omni-dev

AI Omni VSCode Extension 开发指南系统。当需要开发、修改、调试或扩展 AI Omni 插件时使用。优先查阅 ./skills-list.md 确定子模块。支持 Extension 后端开发、Webview Vue3 前端开发、共享层设计、通信机制和 codeXray 功能开发。当用户提到插件开发、webview、extension、命令注册、消息通信、Vue3 组件时使用。

mattnigh/skills_collection0installs24stars

SKILL.md

Full skill instructions

AI Omni 开发指南系统

AI Omni 是一个基于 VSCode 的多功能 AI 插件,集成 Extension 后端 + Vue3 Webview 前端架构。本系统指导整个插件的开发、维护和功能扩展。

Quick Start

# 安装依赖
npm install && cd webview && npm install && cd ..

# 构建项目
npm run build

# 调试运行:按 F5 或选择 "Run Extension"

项目结构总览

ai-omni/
├─ package.json              # VS Code 插件主配置
├─ tsconfig.json             # Extension TypeScript 配置
├─ .vscode/
│   ├─ launch.json           # 调试配置
│   └─ tasks.json            # 构建任务
│
├─ extension/                # 插件后端 (Node / VS Code API)
│   ├─ index.ts              # 入口 activate/​deactivate
│   ├─ commands/             # 命令注册
│   │   └─ openWebview.ts
│   └─ webview/              # Webview 管理
│       ├─ WebviewPanel.ts
│       └─ getHtml.ts
│
├─ webview/                  # 前端 (Vue3 + Vite)
│   ├─ package.json
│   ├─ vite.config.ts
│   └─ src/
│       ├─ main.ts           # Vue 入口
│       ├─ App.vue           # 根组件
│       ├─ api/​vscode.ts     # 通信 API
│       └─ styles/
│
├─ shared/                   # 前后端共享层
│   ├─ types/​message.ts      # 消息类型定义
│   └─ constants/
│
├─ prd/                      # 产品需求文档
│   └─ codeXray/​brief.md
│
└─ dist/                     # 构建输出

Instructions

开发工作流

  1. 阅读 skills-list.md 确定要使用的子模块
  2. 根据任务类型路由到对应子模块:
    • Extension 后端开发 → modules/​extension-dev
    • Webview 前端开发 → modules/​webview-dev
    • 共享层与通信 → modules/​shared-layer
    • codeXray 功能开发 → modules/​codexray
  3. 遵循子模块的开发指南执行任务
  4. 构建并测试:npm run build + F5 调试

开发命令

命令说明
npm run build构建整个项目 (Extension + Webview)
npm run build:ext只构建 Extension
npm run build:web只构建 Webview
npm run watch:ext监听模式构建 Extension
npm run dev:webWebview 开发模式 (Vite HMR)

添加新功能的标准流程

  1. 定义消息类型 (shared/​types/​message.ts)
  2. 实现 Extension 处理逻辑 (extension/)
  3. 实现 Webview UI (webview/​src/)
  4. 注册命令 (package.json contributes + extension/​commands/)
  5. 构建测试 (npm run build + F5)

Best Practices

代码规范

  • 使用 TypeScript 严格模式
  • 共享类型定义放在 shared/​types/
  • Extension 和 Webview 通过 postMessage 通信
  • Webview 资源使用 webview.asWebviewUri() 转换

安全规范

  • Webview 启用 CSP (Content Security Policy)
  • 使用 nonce 白名单脚本
  • 限制 localResourceRoots

性能规范

  • 大文件操作使用流式处理
  • AI 调用控制上下文大小,避免 token 溢出
  • Webview 组件按需加载

Requirements

环境依赖

  • Node.js >= 18
  • VS Code >= 1.85.0
  • npm 或 pnpm

安装步骤

# 根目录
npm install

# Webview
cd webview && npm install

Advanced Usage

详细的模块开发指南请参阅各子模块:

核心工作流文档

技术栈

  • Extension: TypeScript + VS Code Extension API
  • Webview: Vue 3 + Vite + TypeScript
  • 通信: postMessage API + 共享类型
  • AI 引擎: GitHub Copilot Language Model API (计划)
  • 工作流: LangGraph.js (计划)

More skills from mattnigh

spring-framework-patterns logo
mattnigh/skills_collection

spring-framework-patterns

Comprehensive Spring Framework and Spring Boot best practices including dependency injection patterns, bean lifecycle and scopes, REST API development, Spring Data JPA, service layer design, Spring Security, testing strategies, caching, AOP, async processing, error handling, and common anti-patte...

24 0
View

TypeScript厳格モードによる型安全性設計を専門とするスキル。 📖 参照書籍: - 『Effective TypeScript』(Dan Vanderkam): 型設計 📚 リソース参照: - `resources/Level1_basics.md`: レベル1の基礎ガイド - `resources/Level2_intermediate.md`: レベル2の実務ガイド - `resources/Level3_advanced.md`: レベル3の応用ガイド - `resources/Level4_expert.md`: レベル4の専門ガイド - `resources/di...

24 0
View
deploying-cloud-k8s logo
mattnigh/skills_collection

deploying-cloud-k8s

Deploys applications to cloud Kubernetes (AKS/GKE/DOKS) with CI/CD pipelines. Use when deploying to production, setting up GitHub Actions, troubleshooting deployments. Covers build-time vs runtime vars, architecture matching, and battle-tested debugging.

24 0
View
moai-alfred-agent-guide logo
mattnigh/skills_collection

moai-alfred-agent-guide

19-agent team structure, decision trees for agent selection, Haiku vs Sonnet model selection, and agent collaboration principles. Use when deciding which sub-agent to invoke, understanding team responsibilities, or learning multi-agent orchestration.

24 0
View
mermaid-diagram-generator logo
mattnigh/skills_collection

mermaid-diagram-generator

Converts architecture descriptions, module specs, or workflow docs into Mermaid diagrams. Use when visualizing brick module relationships, workflows (DDD, investigation), or system architecture. Supports: flowcharts, sequence diagrams, class diagrams, state machines, entity relationship diagrams,...

24 0
View
pre-flight-check logo
mattnigh/skills_collection

pre-flight-check

INVOKE FIRST before any code work. Validates git workflow (branch, issue, worklog) and checks approach. Use at START of every task and END before completing. Prevents skipped steps.

24 0
View
browser-dev-tools logo
mattnigh/skills_collection

browser-dev-tools

This skill should be used when working with browser-rendered artifacts (i.e. Bun, React/React Native) to proactively validate that development work on localhost is being built appropriately and to support debugging browser-rendered content. Use this skill after making frontend changes to verify t...

24 0
View
lead-dev logo
mattnigh/skills_collection

lead-dev

Lead Développeur - Coordination technique opérationnelle, code review, mentoring et livraison. Pair de web-dev-process au niveau OPÉRATIONS.

24 0
View
worker-monitor logo
mattnigh/skills_collection

worker-monitor

Monitor Docker workers, RQ queue health, and auto-scale workers (max 4). Use when: checking job progress, monitoring queue depth, scaling workers up/down, diagnosing slow processing, or waiting for jobs to complete. Referenced by data-quality skill during reprocessing.

24 0
View
quality-advisor logo
mattnigh/skills_collection

quality-advisor

Proactive quality guidance system that monitors artifact creation and provides real-time feedback on documentation quality

24 0
View
bump-version logo
mattnigh/skills_collection

bump-version

This skill should be used when the user wants to bump the version number in the workspace. It updates versions across all pyproject.toml files (root, tde, and tda packages) and the CHANGELOG.md to keep them synchronized.

24 0
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View