frontend

Develop Svelte frontends for Wails apps with TypeScript and Vite build tooling.

Updated Dec 20, 2025

Search Tags:#typescript #frontend #css #svelte #ui development #wails

Ready to run

npx skills add https://github.com/Otard95/ed-expedition --skill frontend-otard95

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/Otard95/ed-expedition/tree/main/.opencode/skill/frontend
Command: npx skills add https://github.com/Otard95/ed-expedition --skill frontend-otard95

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured approach and reusable components for developing the Svelte frontend of the Wails application, ensuring consistency and maintainability in UI development.

Core Features & Use Cases

Component Development: Create and manage UI components using Svelte 3 and TypeScript.
Styling & Theming: Apply Elite Dangerous-themed styles and manage CSS architecture.
Wails Integration: Work with Go backend bindings and handle frontend-backend communication.
Use Case: Develop a new feature to display expedition routes by creating reusable RouteCard and RouteList components, styling them with the official ED color palette, and integrating them with the Go backend to fetch route data.

Quick Start

Create a new Svelte component for displaying expedition status, ensuring it adheres to the project's styling and naming conventions.

Frequently Asked Questions about frontend

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

FAQPage Schema

How do I build a Svelte frontend for a Wails application?▼

To build a Svelte frontend for a Wails application, use this Skill to develop component-based UIs with TypeScript. It provides structured conventions for state management and Vite build tooling integration.

How do I apply Elite Dangerous themed styling to UI components?▼

You can apply Elite Dangerous themed styling to UI components by using the predefined CSS architecture provided here. It focuses on applying the official ED color palette to maintain visual consistency across features.

Can I use TypeScript with Svelte 3 in Wails for type safety?▼

Yes, you can use TypeScript with Svelte 3 in Wails for type safety. This Skill focuses on component development utilizing TypeScript to ensure type-safe frontend code and maintainable UI architecture.

How do I integrate a Svelte frontend with a Go backend using Wails?▼

To integrate a Svelte frontend with a Go backend using Wails, this Skill helps you work with Go backend bindings. It structures frontend-backend communication for tasks like fetching route data.

What is the best way to manage state in a Svelte Wails application?▼

The best way to manage state in a Svelte Wails application is through the structured component approach provided here. It ensures maintainability by handling state management alongside reusable UI components.