Agent Skills
› NeverSight/learn-skills.dev
› mount-operations
mount-operations
GitHub提供3Lens在React、Vue、Angular和Svelte等框架中的集成开发工作流。涵盖挂载套件创建、框架特定API实现、脚手架生成及调试指南，确保与UI核心兼容并支持实时与离线模式。
Trigger Scenarios
创建新的框架挂载套件
将3Lens集成到React/Vue/Angular/Svelte应用中
调试挂载套件问题
了解框架集成模式
Install
npx skills add NeverSight/learn-skills.dev --skill mount-operations -g -y
SKILL.md
Frontmatter
{
"name": "mount-operations",
"description": "Framework mount development workflows for React, Vue, Angular, Svelte, and other frameworks. Use when creating framework-specific mount kits, integrating 3Lens with frameworks, or debugging mount kit issues."
}
Mount Operations
Mount operations cover framework-specific integration patterns for 3Lens, enabling framework developers to integrate 3Lens into their applications.
When to Use
- Creating a mount kit for a new framework
- Integrating 3Lens into a React/Vue/Angular/Svelte app
- Debugging mount kit issues
- Understanding framework integration patterns
Framework Mount Kits
React Mount Kit
// packages/mounts/react/src/index.ts
import { createLensContext } from './provider';
export { createLensContext, useLens } from './provider';
// Usage in React app
import { LensProvider, useLens } from '@3lens/mount-react';
function App() {
return (
<LensProvider>
<MyComponent />
</LensProvider>
);
}
function MyComponent() {
const lens = useLens();
// Use lens client
}
Vue Mount Kit
// packages/mounts/vue/src/index.ts
import { useThreeLens, provideThreeLens } from './composables';
export { useThreeLens, provideThreeLens };
// Usage in Vue app
import { provideThreeLens, useThreeLens } from '@3lens/mount-vue';
export default {
setup() {
provideThreeLens();
const lens = useThreeLens();
// Use lens client
}
};
Angular Mount Kit
// packages/mounts/angular/src/index.ts
import { LensService } from './lens.service';
import { LensComponent } from './lens.component';
export { LensService, LensComponent };
// Usage in Angular app
import { LensService } from '@3lens/mount-angular';
@Component({ /* ... */ })
export class MyComponent {
constructor(private lens: LensService) {}
}
Svelte Mount Kit
// packages/mounts/svelte/src/index.ts
import { lensStore } from './store';
import { useLens } from './actions';
export { lensStore, useLens };
// Usage in Svelte app
import { lensStore, useLens } from '@3lens/mount-svelte';
useLens();
$lensStore.client.query(/* ... */);
Commands
Scaffold a Mount Kit
# Create a new mount kit
3lens scaffold mount react
3lens scaffold mount vue
3lens scaffold mount angular
3lens scaffold mount svelte
Generates:
- Package structure
- Framework-specific provider/context
- Hooks/composables/components
- Type definitions
- README with examples
Agent Use Cases
- New framework: "Create a mount kit for Solid.js"
- Integration: "How do I use 3Lens in my React app?"
- Debugging: "My mount kit isn't working, help debug"
- Best practices: "What's the best way to integrate 3Lens?"
Mount Kit Requirements
Every mount kit MUST:
-
Only depend on UI Core and Runtime
- Never import from kernel directly
- Use public client API only
-
Provide Framework-Specific APIs
- React: Hooks (
useLens) - Vue: Composables (
useThreeLens) - Angular: Services (
LensService) - Svelte: Stores (
lensStore)
- React: Hooks (
-
Integrate with UI Core
- Use
@3lens/ui-webcomponents - Support overlay/dock/panel modes
- Use
-
Support Live and Offline Modes
const data = client.isLive ? await client.queryLive(query, params) : await client.queryTrace(query, params); -
Handle Errors Gracefully
try { const lens = createLens(); } catch (error) { if (error.code === 'CSP_BLOCKED') { // Handle CSP blocking } }
Integration Patterns
Provider Pattern (React/Angular)
// Create provider/context at app root
<LensProvider>
<App />
</LensProvider>
// Use hook/service in components
const lens = useLens();
Composition Pattern (Vue)
// Provide at app root
provideThreeLens();
// Use composable in components
const lens = useThreeLens();
Store Pattern (Svelte)
// Initialize store
useLens();
// Use store in components
$lensStore.client.query(/* ... */);
Post-Scaffold Steps
After scaffolding, follow the playbook:
Additional Resources
- Contract: .cursor/contracts/runtime-boundaries.md
- Contract: .cursor/contracts/ui-surfaces.md
- Rule: .cursor/rules/mount-standards.mdc
- No scaffold command; follow add-a-mount-kit playbook manually
Version History
- e0220ca Current 2026-07-05 23:30
