frontend-development

nirukk52's avatarfrom nirukk52

Frontend development workflow for ScreenGraph using SvelteKit 2, Svelte 5 runes, Skeleton UI v4, and Encore-generated clients. Use when building or updating UI features, routes, or shared components while keeping progressive disclosure intact.

⭐1stars🔀0forks📁View on GitHub🕐Updated Dec 2, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill provides a comprehensive frontend development workflow specifically optimized for SvelteKit 2 and Svelte 5. It streamlines the creation of production-ready UI features by integrating Svelte 5 runes, Skeleton UI v4, and Encore-generated API clients, ensuring high-quality code through strict architectural patterns and automated quality gates.

Use Cases

  • Implementing modern reactive UI components using Svelte 5 runes ($state, $derived, $effect) to ensure efficient state management.
  • Building and styling consistent user interfaces by leveraging Skeleton UI v4 components and Tailwind CSS utility tokens.
  • Integrating backend services seamlessly using typed, Encore-generated clients to replace manual fetch calls and ensure type safety.
  • Automating frontend quality assurance through pre-defined linting, unit testing, and Svelte-check commands before code handoff.
  • Migrating or auditing existing Svelte codebases to align with Svelte 5 best practices and ScreenGraph's specific architectural rules.
namefrontend-development
descriptionFrontend development workflow for ScreenGraph using SvelteKit 2, Svelte 5 runes, Skeleton UI v4, and Encore-generated clients. Use when building or updating UI features, routes, or shared components while keeping progressive disclosure intact.

Frontend Development Skill

Mission

Deliver production-ready SvelteKit 2 + Svelte 5 experiences that stay aligned with Skeleton UI, Encore API types, and founder rules. This skill keeps the top-level workflow lean while the references provide deep dives for setup, patterns, and debugging.

When to Use

  • Designing or implementing new routes, layouts, and components
  • Auditing Svelte 5 rune usage before debugging or code review
  • Syncing Encore client updates with frontend behavior
  • Preparing UI handoffs, demos, or regression fixes

Development Loop

  1. Confirm stack + environment – Follow references/setup-and-config.md to verify packages, project structure, and Skeleton theme config.
  2. Plan the feature – Identify required routes, data needs, and component boundaries; capture notes in Graphiti.
  3. Implement with runes – Use $state, $derived, $effect, $props, and $bindable patterns from references/svelte5-patterns.md.
  4. Compose UI – Apply Skeleton v4 components, Tailwind tokens, and AutoAnimate helpers as documented in references/ui-patterns.md.
  5. Integrate Encore client – Regenerate clients (task founder:workflows:regen-client) and rely on typed calls; never use manual fetch.
  6. Validate + test – Run the quick command set below, then escalate to e2e Playwright flows via e2e-testing_skill if needed.
  7. Document + handoff – Update Graphiti with new patterns, refresh specs, and capture screenshots for stakeholders.

Quick Command Set

# Development
cd frontend && bun run dev

# Quality gates
cd frontend && bun run check      # Svelte + TS
cd .cursor && task frontend:lint  # Biome
cd .cursor && task frontend:test  # Unit/component tests

# After backend API changes
cd .cursor && task founder:workflows:regen-client

Quality Gates (Complete Before Handoff)

  • Uses Svelte 5 runes exclusively (let for mutable runes, no legacy $: reactivity)
  • Skeleton UI components or Tailwind utility tokens instead of bespoke CSS
  • Encore-generated client for every backend call (no manual fetch)
  • Explicit TypeScript types, zero any
  • No console.log in committed code
  • American English spelling (canceled, color, optimize)
  • bun run build passes locally before requesting review

Reference Library

  • references/setup-and-config.md – Package requirements, Skeleton theme wiring, project structure, Vite configuration
  • references/svelte5-patterns.md – Rune usage, prop handling, Encore client integration, file-based routing
  • references/ui-patterns.md – Skeleton component catalog, Tailwind tokens, AutoAnimate recipes, reusable component snippets, anti-patterns
  • references/debugging-and-quality.md – Debugging signals, hydration checks, rune diagnostics, expanded quality checklist
  • frontend-debugging_skill – 10-phase investigation workflow for UI regressions
  • e2e-testing_skill – Playwright-first regression strategy once UI flow is ready for automation
  • backend-development_skill – Backend integration patterns that frontend components depend on

Notes

  • Keep SKILL.md lean (<300 lines). Move deep explanations, code samples, and setup scripts into references/, scripts/, or assets/ folders.
  • Update Graphiti with new UI patterns or decisions so other vibes can reuse the knowledge.
  • Re-run task founder:rules:check before sharing large UI changes.