feather-desktop-app

name	feather-desktop-app
description	Work on Feather's React and Tauri desktop app, pages, hooks, stores, WebSocket session model, plugin UI rendering, design patterns, and Playwright checks.

Feather Desktop App

When to use

Use this skill when changing the desktop React/Tauri app, session UI, settings, plugin rendering, shader or particle tools, WebSocket state, or app-level tests.

First pass

• Start with src/router.tsx, src/providers.tsx, and the relevant page under src/pages/.
• Follow data flow through src/hooks/, src/store/, and src/lib/send-command.ts.
• For architecture and session flow, load app architecture.
• For UI conventions and testing, load UI and testing.
• For Tauri commands, WS events, auth, and the Rust layer, load tauri and protocol.
• If the change affects plugin payload rendering, also use feather-plugin-authoring.

Core rules

• The desktop app is an operational devtool, not a marketing site. Keep screens dense, scannable, and task-focused.
• Preserve existing React, hook, store, and page-layout patterns before adding new abstractions.
• Keep WebSocket/session state centralized enough that pages do not each invent protocol handling.
• Plugin UI is rendered from serialized Lua payloads. React should remain an implementation detail for plugin authors.
• Keep Tauri APIs behind existing utility patterns for file dialogs, opener, filesystem, and platform behavior.
• Use existing component and styling conventions; this repo already uses Radix/Base UI, Tailwind, lucide-react, and local components.
• Avoid large visual rewrites unless the task asks for them.

Common implementation map

• App entry: src/main.tsx, src/providers.tsx, src/router.tsx.
• Pages: src/pages/.
• Shared components: src/components/.
• Hooks: src/hooks/.
• Stores: src/store/.
• Protocol constants: src/constants/feather-api.ts, src/constants/server.ts.
• Command sending: src/lib/send-command.ts.
• Tauri utilities: src/utils/linking.ts, src/utils/file.ts, src/utils/platform.ts.
• Tauri/Rust layer: src-tauri/src/ws_server.rs, lib.rs, cli_status.rs.
• Showcase app: src/showcase/ (browser-only, no Tauri, own Vite/Playwright configs).

Verification

• Add or update e2e coverage for desktop behavior changes; use Playwright app e2e for desktop workflows and showcase e2e for browser-only creative tools.
• Typecheck/build web app: npm run build or targeted typecheck when appropriate.
• Run Playwright app e2e: npm run test:app:e2e.
• Run showcase e2e when showcase or creative tools change: npm run test:showcase:e2e.
• For Tauri-specific behavior, use relevant Rust/Tauri tests where available.

Docs touchpoints

• Update docs for user-visible desktop behavior, settings, protocol behavior, or creative tool workflows in the same change as the implementation.
• Update CHANGELOG.md for user-visible app UI, settings, protocol, Tauri, showcase, or Playwright e2e coverage changes.
• User-visible desktop workflows may need docs/usage.md, docs/debugger.md, docs/assets.md, or docs/session-replay.md.
• Showcase-specific changes may need docs/standalone-showcase.md.
• Protocol or security changes may need docs/configuration.md and docs/recommendations.md.
• When a desktop workflow is backed by a plugin or subsystem README, prefer editing that source-side doc and exposing it through docs/ with a symlink.

Avoid

• Do not hard-code plugin-specific React behavior when a generic plugin UI node can cover it.
• Do not put secrets, API keys, or command auth material in persistent UI logs.
• Do not let text overflow controls or create overlapping responsive layouts.
• Do not use decorative-heavy layouts that slow down repeated debugging workflows.