skilld
All skills
sailscastshq avatar

/durable-ui

@e79a3b5
by The Sailscasts Companysailscastshq/boring-stack505 stars
25

Durable UI patterns for modern web development — persisting client-side state across page loads, browser sessions, and shareable URLs. Use this skill when implementing localStorage persistence, URL query parameter state, form draft auto-save, multi-step wizard persistence, click-outside dismissal, modal/dialog backdrop patterns, or any client-side state and interaction pattern that should be resilient and well-behaved. Works with React, Vue, and Svelte.

Ask your Agent

Use this Skill: https://skilld.dev/gh/sailscastshq/boring-stack/durable-ui

This session only. Nothing lands on disk.

README.md

≈390 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Durable UI Skills for Claude Code

Build persistent, shareable UI state in The Boring JavaScript Stack with Claude Code.

Installation

npx skills add sailscastshq/boring-stack/skills/durable-ui

Usage

After installing, Claude will automatically apply durable UI best practices when you work on client-side state persistence:

"Add a collapsible sidebar that remembers its state"

"Sync the active tab to the URL so users can share links"

"Auto-save form drafts so users don't lose work on page reload"

"Add filters to the users list that persist in the URL"

Skills Included

  • principles - Decision framework for choosing the right persistence layer
  • local-storage - localStorage patterns (sidebar, dark mode, banners, cross-tab sync)
  • url-state - URL query param sync (tabs, filters, pagination, modals)
  • form-persistence - Auto-save drafts with restore, expiry, and unsaved-changes warnings
  • react - Complete React hook implementations
  • vue - Complete Vue composable implementations
  • svelte - Complete Svelte store implementations

What is Durable UI?

Durable UI keeps meaningful client-side state alive across page loads and browser sessions. It bridges the gap between server-side state (database, session) and ephemeral component state, using localStorage for preferences and URL parameters for shareable navigation context.

Links

License

MIT

Source: SKILL.md on GitHub

Third-party checks

1 warning17d4 checks · Risk SAFE
  • Gen Agent Trust Hub17d

    This skill provides safe architectural patterns and code examples for managing persistent UI state in React, Vue, and Svelte applications. It does not contain any malicious code or instructions.

  • Socket17d

    No alerts

  • Snyk17d

    Risk: LOW · No issues

  • Runlayer7mo

    17/17 files flagged

Provenance

Signed by skilld at e79a3b5. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 3 days ago.

Activeupdated 8 months ago

Capability

Other metadata
metadata
{
  "author": "sailscastshq",
  "version": "1.1.0",
  "tags": "durable-ui, localStorage, url-state, query-params, form-persistence, multi-step-forms, click-outside, modal, dialog, backdrop, dropdown, state-management, web-dev"
}

README badge

README badge for sailscastshq/boring-stack/durable-ui