playbooks

home / skills / andrelandgraf / fullstackrecipes / chat-list

chat-list skill

/.agents/skills/chat-list

This skill helps you manage a chat list with search, rename, and delete features using URL-synced filters and deep-linkable modals.

npx playbooks add skill andrelandgraf/fullstackrecipes --skill chat-list

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
504 B
---
name: chat-list
description: Build a chat list page with search, rename, and delete functionality. Uses nuqs for URL-synced filters and deep-linkable modal dialogs.
---

# Chat List & Management

To set up Chat List & Management, refer to the fullstackrecipes MCP server resource:

**Resource URI:** `recipe://fullstackrecipes.com/chat-list`

If the MCP server is not configured, fetch the recipe directly:

```bash
curl -H "Accept: text/plain" https://fullstackrecipes.com/api/recipes/chat-list
```

Overview

This skill provides a ready-made chat list page with search, rename, and delete functionality built in TypeScript. It uses nuqs for URL-synced filters and supports deep-linkable modal dialogs so state can be shared and restored. Patterns follow Shadcn-style UI and production-ready step-by-step guidance for integration into full-stack AI apps.

How this skill works

The implementation renders a searchable list of chats and keeps filter state in the URL using nuqs, enabling back/forward navigation and shareable links. Rename and delete actions open modal dialogs that are deep-linkable, so each modal has its own URL state and can be opened directly. The code provides UI patterns and event flows that integrate with your backend to persist changes and reflect real-time list updates.

When to use it

  • You need a discoverable chat list with persistent, shareable filters.
  • You want modal dialogs to be addressable by URL for deep links or bookmarking.
  • You need built-in rename and delete actions with safe UX patterns.
  • You are building a TypeScript full-stack AI app using Shadcn-style components.
  • You require consistent back/forward behavior for list filters and modals.

Best practices

  • Keep filter keys stable so old URLs continue to work after updates.
  • Debounce search inputs before syncing to the URL to reduce noise.
  • Confirm destructive actions in a modal and offer undo where possible.
  • Scope modal URLs (e.g., /chats?modal=rename&id=123) to avoid routing conflicts.
  • Sync optimistic UI updates with server responses to maintain perceived performance.

Example use cases

  • A messaging app that lets users search past conversations and deep-link to a rename dialog.
  • An admin dashboard that lists bot sessions and allows safe deletion from a modal.
  • A collaborative workspace where team members share links to specific chat-management modals.
  • A demo app showing URL-driven UI state for educational or onboarding purposes.

FAQ

How does nuqs help with filters?

nuqs serializes filter state into the URL so filters are shareable, bookmarkable, and survive navigation.

Can modals be opened directly via URL?

Yes — each modal maps to a query parameter or route so it can be deep-linked and restored on page load.