skills.rest
nirukk52
nirukk52COMMUNITY
Explore all skills by this author →
GitHub

frontend-development

Coordinate SvelteKit 2, Svelte 5 runes, Skeleton UI, and Encore clients for frontend features.

1|Updated Oct 23, 2025
Search Tags:#ui#frontend#patterns#svelte#svelte5#encore
One-click install
npx skills add https://github.com/nirukk52/ScreenGraph --skill frontend-development-nirukk52
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/nirukk52/ScreenGraph/tree/main/.claude-skills/frontend-development_skill
Command: npx skills add https://github.com/nirukk52/ScreenGraph --skill frontend-development-nirukk52

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

A lean yet thorough frontend development loop using SvelteKit 2 + Svelte 5 runes, Skeleton UI, and Encore-generated clients to deliver production-ready UI features.

Core Features & Use Cases

  • Validate environment, plan features, implement UI with runes
  • Regenerate Encore client after backend changes and rely on typed calls
  • Validate UI with quick gates before handoffs and escalate to e2e tests when needed

Quick Start

  • Development: cd frontend && bun run dev
  • Quality gates: cd frontend && bun run check
  • Regen client after backend changes: cd .cursor && task founder:workflows:regen-client
  • Build and test before handoff

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I build frontend features with SvelteKit 2 and Svelte 5 runes?▼

SvelteKit 2 with Svelte 5 runes provides a modern reactive foundation for building UI features. This Skill coordinates SvelteKit routing, layouts, components, and Svelte 5 rune syntax with Skeleton UI components and Tailwind tokens to deliver production-ready features through a lean development loop of setup, planning, implementation, validation, and documentation.

Can I use Encore-generated API clients with my SvelteKit frontend?▼

Yes. This Skill relies on Encore-generated API clients to handle all backend calls with explicit TypeScript types. After backend changes, regenerate the client via the Cursor task runner, then update frontend behavior to match the typed API surface.

What's the workflow for implementing and validating UI with Skeleton UI and Tailwind?▼

Plan the feature, implement routes, layouts, and components using Skeleton UI v4 components and Tailwind tokens, then run quality gates (bun run check) before handoffs. Escalate to end-to-end tests when quick validation gates are insufficient for regression fixes or demos.

How do I audit and migrate from Svelte 4 syntax to Svelte 5 runes?▼

This Skill enforces Svelte 5 rune usage and avoids legacy Svelte 4 syntax. Audit components during implementation to replace old reactive patterns with runes, ensuring explicit TypeScript types throughout the codebase.

Does this frontend workflow support rapid iteration and handoffs?▼

Yes. The lean development loop supports quick setup, implementation, and validation steps designed for fast iteration. Quality gates and organized documentation prepare UI features for handoffs, demos, and regression testing without heavy overhead.

Related Skills

Explore More Software Engineering Skills→
petbrainspetbrains
13

backend-prisma

Generate type-safe Prisma clients from schema.prisma for TypeScript backends.

Official
Intermediate
ivanyeorsivanyeors

integration

Validate frontend-backend API contracts against OpenAPI specifications.

Community
Advanced
encoredevencoredev
26

encore-frontend

Generate a typed TypeScript client for React/Next.js frontends from Encore.ts APIs.

Official
Intermediate
twofoldtech-dakotatwofoldtech-dakota
2

fullstack-modern

Coordinate React or Vue frontends with GraphQL and REST APIs in Next.js-style apps.

Community
Advanced