Ask me what skills you need
What are you building?
Tell me what you're working on and I'll find the best agent skills for you.
Production-quality Vue 3 + TypeScript reference for TwirChat desktop. Covers composables, Pinia, component design, SVG-as-components, Electrobun RPC constraints, and patterns to avoid (any, inline SVG, logic in components).
Purpose: Production-quality reference for writing Vue 3 code in TypeScript desktop apps (Electrobun + Vite).
Scope: Composables, Pinia state management, component design, TypeScript integration, reactivity patterns, SVG workflow, and TwirChat-specific conventions.
These rules are non-negotiable for TwirChat frontend code.
The desktop app has two distinct runtime environments. Never cross them.
| Environment | Location | Access |
|---|---|---|
| Main process | src/bun/ | Full Bun/Node.js, SQLite, file system |
| Webview | src/views/ | Browser context only — NO Bun APIs |
Forbidden in src/views/:
bun:sqlite — use RPC get* / set* methods insteadnode:fs — use RPC for file operationssrc/store/ — SQLite runs on Bun side only// ❌ WRONG — will crash the browser at runtime
import { SettingsStore } from '../../store/settings-store'
const settings = SettingsStore.get()
npx skills add Satont/twirchat --skill vue3-typescript-best-practicesHow clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
Very clear and well structured, with almost no room for misunderstanding.
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
Highly actionable with clear, concrete steps that an agent can follow directly.