Installs into .claude/skills of the current project.
Are you the author of Frontend Patterns?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/talayash-frontend-patterns)
---
name: frontend-patterns
description: React/TypeScript/xterm.js patterns for Agentrium frontend
---
# Frontend Patterns for Agentrium
## xterm.js Lifecycle
- Create terminal instance in useEffect, dispose on unmount
- Dispose all addons (fit, search, weblinks) before terminal
- Never hold references to disposed terminals
## Event Listeners
- `listen()` returns unlisten function - call it in useEffect cleanup
- Register listeners in App.tsx for global events (terminal-output, terminal-finished)
## Zustand
- `terminalStore` - NOT persisted (terminals are ephemeral)
- `appStore` - persisted to localStorage (UI state)
- Use selectors to avoid unnecessary re-renders
- Avoid stale closures - use `getState()` in callbacks
## IPC
- Always wrap `invoke()` in try/catch
- Handle both success and error cases
- Show loading states for slow operations
## Styling
- Dark glassmorphic theme: `bg-gray-800/80`, `border-gray-700/50`, `backdrop-blur`
- Use Tailwind classes - no hardcoded colors
- Framer Motion for animations
