skills.rest
Otard95
Otard95COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Otard95/ed-expedition --skill frontend-otard95
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
JustCodePLJustCodePL
1

wails-dev

Wire Go backend methods to Wails v2 frontends and manage system tray interactions.

Official
Intermediate
fusenginefusengine
22

laravel-vite

Configure Vite for Laravel projects with HMR and production builds.

Community
Intermediate
vuthuonghai-stevevuthuonghai-steve
1

api-from-ui

Create custom API endpoints by analyzing UI component data requirements.

Community
Advanced
BigdropsBigdrops
1

konsta-ui

Develop iOS and Material Design UI components for Capacitor apps with React, Vue, or Svelte.

Community
Intermediate