ts-vue-svelte

Provide TypeScript best-practice patterns for Vue 3 and Svelte 5 applications.

7|Updated Feb 5, 2026
One-click install
npx skills add https://github.com/Jonathan0823/opencode-config --skill ts-vue-svelte
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ts-vue-svelte
Source: https://github.com/Jonathan0823/opencode-config/tree/main/skills/ts-vue-svelte
Command: npx skills add https://github.com/Jonathan0823/opencode-config --skill ts-vue-svelte

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides guidelines and concrete patterns for building TypeScript-friendly Vue 3 (Composition API) and Svelte 5 projects, improving consistency and maintainability across front-end codebases.

Core Features & Use Cases

  • Vue 3 Patterns: Composition API usage, prop typing, emits, and lifecycle integration with TypeScript.
  • Composables & Stores: Typed composables, Pinia stores for Vue, and Svelte stores for state management.
  • Svelte 5 Patterns: Runes-based components, stores, and transition patterns to build reactive UI with strong typing.
  • Component Architecture: Reusable patterns for components, slots, and event-driven communication.
  • Usage Scenarios: Ideal for teams adopting a mixed Vue 3 + Svelte 5 stack in enterprise front-end projects.

Quick Start

Install a Vue 3 + TypeScript project and a Svelte 5 setup; then study the included patterns and examples to apply type-safe best practices immediately.

Frequently Asked Questions about ts-vue-svelte

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I type props and emits in Vue 3 Composition API with TypeScript?

To type props and emits in Vue 3 Composition API with TypeScript, apply concrete component patterns that define prop and emit signatures directly. This Skill provides type-safe examples ensuring scalable UI development for Vue 3 applications.

What is the best way to manage state in Svelte 5 using runes and TypeScript?

The best way to manage state in Svelte 5 with TypeScript is using runes-based components and stores. This Skill provides reactive UI patterns with strong typing to ensure type-safe state management across your Svelte 5 application.

How do I create typed composables and Pinia stores for Vue 3?

Creating typed composables and Pinia stores for Vue 3 involves applying specific TypeScript integration patterns to state management. This Skill provides guidelines for building type-safe composables and Pinia stores to improve maintainability.

Can I use the same TypeScript patterns for both Vue 3 and Svelte 5 projects?

Yes, you can use consistent TypeScript patterns for both Vue 3 and Svelte 5 projects. This Skill provides best-practice guidelines covering composables, stores, and component architecture to improve maintainability across mixed front-end codebases.

How do I add TypeScript types to Svelte 5 transition patterns?

To add TypeScript types to Svelte 5 transition patterns, apply runes-based transition patterns with strong typing. This Skill provides concrete examples for building reactive UI components with type-safe transitions in Svelte 5.