feat(tailwind-css): update styling conventions for components

Refactor Tailwind CSS skill description for clarity and specificity.
Enhance Button and IconButton components with improved focus states,
hover effects, and responsive design. Update global styles for
optimized performance and user experience. Extend Tailwind config
to include new transition properties.

Closes #123

Author: trae-op

.agents/skills/clsx-tailwind/SKILL.md

@@ -1,22 +1,22 @@
 ---
 name: clsx-tailwind
-description: Normalize conditional class composition using clsx/tailwind-merge patterns and the repository cn utility for conflict-safe styling.
+description: Use when styling React components with Tailwind className variants, conditional classes, or class conflicts; applies repository cn (clsx + tailwind-merge) patterns for merge-safe, overridable UI styles.
 argument-hint: "[styling goal] [components] [variants/states]"
 user-invokable: true
 disable-model-invocation: false
 ---
 
 # Skill Instructions
 
-Use this skill when the request matches **React Component Styling Instructions** or references patterns from **docs/clsx-tailwind.md**.
+Use this skill when the request matches **React Component Styling Instructions**.
 
 ## Workflow
 
 1. Read [SOURCE.md](./SOURCE.md) for the full repository guidance.
 2. Identify concrete constraints, conventions, and required outputs.
 3. Apply the guidance directly to the current task, keeping changes minimal and repository-consistent.
-4. Validate results (tests/lint/build where relevant).
-5. Summarize what was applied from this skill and where.
+   Don't validate results (tests/lint/build where relevant). Wait until I tell you this!
+4. Summarize what was applied from this skill and where.
 
 ## Input Guidance
 
@@ -25,8 +25,3 @@ When invoking this skill manually, include:
 - Task goal
 - Target files or modules
 - Any constraints (performance, architecture, style, tests)
-
-## Source
-
-This skill is generated from [docs/clsx-tailwind.md](../../../docs/clsx-tailwind.md).
-Use [SOURCE.md](./SOURCE.md) as the canonical local resource loaded on demand.

.agents/skills/context-pattern/SKILL.md

@@ -1,22 +1,22 @@
 ---
 name: context-pattern
-description: Implement subscription-based React Context with useSyncExternalStore selectors for granular rerenders and typed state access.
+description: Use when creating or refactoring shared React state with Context + useSyncExternalStore selectors; provides typed store/provider/hook patterns to avoid unnecessary rerenders and prop drilling.
 argument-hint: "[context goal] [state slices] [selector/dispatch names]"
 user-invokable: true
 disable-model-invocation: false
 ---
 
 # Skill Instructions
 
-Use this skill when the request matches **React Context Pattern Guide** or references patterns from **docs/сontext-pattern.md**.
+Use this skill when the request matches **React Context Pattern Guide**.
 
 ## Workflow
 
 1. Read [SOURCE.md](./SOURCE.md) for the full repository guidance.
 2. Identify concrete constraints, conventions, and required outputs.
 3. Apply the guidance directly to the current task, keeping changes minimal and repository-consistent.
-4. Validate results (tests/lint/build where relevant).
-5. Summarize what was applied from this skill and where.
+   Don't validate results (tests/lint/build where relevant). Wait until I tell you this!
+4. Summarize what was applied from this skill and where.
 
 ## Input Guidance
 
@@ -25,8 +25,3 @@ When invoking this skill manually, include:
 - Task goal
 - Target files or modules
 - Any constraints (performance, architecture, style, tests)
-
-## Source
-
-This skill is generated from [docs/сontext-pattern.md](../../../docs/сontext-pattern.md).
-Use [SOURCE.md](./SOURCE.md) as the canonical local resource loaded on demand.

.agents/skills/electron-modular/SKILL.md

@@ -1,7 +1,7 @@
 ```skill
 ---
 name: electron-modular
-description: Build and refactor Electron main-process modules with @devisfuture/electron-modular using typed DI, IPC handlers, window managers, and lazy module rules.
+description: Use when building or refactoring Electron main-process architecture with @devisfuture/electron-modular, including @RgModule composition, DI providers/tokens, IPC handlers, window managers, exports/imports, and lazy module bootstrap.
 argument-hint: "[feature goal] [module folder] [ipc/window/lazy requirements]"
 user-invokable: true
 disable-model-invocation: false
@@ -17,7 +17,7 @@ Use this skill when the request targets **@devisfuture/electron-modular** archit
 2. Identify the requested module scope (service, IPC, window, provider, bootstrap, lazy loading).
 3. Apply package constraints and typing conventions directly in affected files.
 4. Keep changes minimal, architecture-safe, and repository-consistent.
-5. Validate with focused tests/lint where relevant.
+5. Don't validate results (tests/lint/build where relevant). Wait until I tell you this!
 6. Summarize which package rules were applied and where.
 
 ## Input Guidance
@@ -30,9 +30,4 @@ When invoking this skill manually, include:
 - Required IPC channels and payload/response contracts
 - Window hash + lifecycle behavior (if any)
 
-## Source
-
-This skill is generated from [devisfuture_electron-modular.md](../../../devisfuture_electron-modular.md).
-Use [SOURCE.md](./SOURCE.md) as the canonical local resource loaded on demand.
-
 ```

.agents/skills/electron-path-aliasing/SKILL.md

@@ -1,22 +1,22 @@
 ---
 name: electron-path-aliasing
-description: Apply correct path aliasing for Electron main vs renderer imports, ensuring runtime-safe Node subpath and Vite alias usage.
+description: Use when fixing import paths or alias errors in Electron projects; applies correct main-process Node subpath aliases (#main/*), renderer Vite aliases (@/*), and tsconfig/package runtime-safe alignment.
 argument-hint: "[refactor goal] [main/renderer files] [alias migration scope]"
 user-invokable: true
 disable-model-invocation: false
 ---
 
 # Skill Instructions
 
-Use this skill when the request matches **Electron Path Aliasing Guide** or references patterns from **docs/electron-path-aliasing.md**.
+Use this skill when the request matches **Electron Path Aliasing Guide**.
 
 ## Workflow
 
 1. Read [SOURCE.md](./SOURCE.md) for the full repository guidance.
 2. Identify concrete constraints, conventions, and required outputs.
 3. Apply the guidance directly to the current task, keeping changes minimal and repository-consistent.
-4. Validate results (tests/lint/build where relevant).
-5. Summarize what was applied from this skill and where.
+   Don't validate results (tests/lint/build where relevant). Wait until I tell you this!
+4. Summarize what was applied from this skill and where.
 
 ## Input Guidance
 
@@ -25,8 +25,3 @@ When invoking this skill manually, include:
 - Task goal
 - Target files or modules
 - Any constraints (performance, architecture, style, tests)
-
-## Source
-
-This skill is generated from [docs/electron-path-aliasing.md](../../../docs/electron-path-aliasing.md).
-Use [SOURCE.md](./SOURCE.md) as the canonical local resource loaded on demand.

.agents/skills/event-delegation-guide/SKILL.md

@@ -1,22 +1,22 @@
 ---
 name: event-delegation-guide
-description: Replace prop-drilled handlers with event delegation patterns for dense interactive lists and nested renderer UI trees.
+description: Use when React lists or nested component trees have many click/change handlers; replaces prop-drilled callbacks with parent-level event delegation for scalable, dynamic, high-performance interactions.
 argument-hint: "[interaction goal] [container component] [actions/data-attrs]"
 user-invokable: true
 disable-model-invocation: false
 ---
 
 # Skill Instructions
 
-Use this skill when the request matches **Event Delegation Pattern in React** or references patterns from **docs/event-delegation-guide.md**.
+Use this skill when the request matches **Event Delegation Pattern in React**.
 
 ## Workflow
 
 1. Read [SOURCE.md](./SOURCE.md) for the full repository guidance.
 2. Identify concrete constraints, conventions, and required outputs.
 3. Apply the guidance directly to the current task, keeping changes minimal and repository-consistent.
-4. Validate results (tests/lint/build where relevant).
-5. Summarize what was applied from this skill and where.
+   Don't validate results (tests/lint/build where relevant). Wait until I tell you this!
+4. Summarize what was applied from this skill and where.
 
 ## Input Guidance
 
@@ -25,8 +25,3 @@ When invoking this skill manually, include:
 - Task goal
 - Target files or modules
 - Any constraints (performance, architecture, style, tests)
-
-## Source
-
-This skill is generated from [docs/event-delegation-guide.md](../../../docs/event-delegation-guide.md).
-Use [SOURCE.md](./SOURCE.md) as the canonical local resource loaded on demand.

.agents/skills/git-commit-instructions/SKILL.md

@@ -1,22 +1,22 @@
 ---
 name: git-commit-instructions
-description: Generate Conventional Commit messages that follow this repository formatting constraints, scope discipline, and concise rationale.
+description: Use when preparing git commits or PR-ready commit text; generates repository-compliant Conventional Commit messages with correct type/scope syntax, concise subject lines, and clear rationale/body formatting.
 argument-hint: "[change summary] [scope] [breaking/issue refs]"
 user-invokable: true
 disable-model-invocation: false
 ---
 
 # Skill Instructions
 
-Use this skill when the request matches **Goal** or references patterns from **docs/git-commit-instructions.md**.
+Use this skill when the request matches **Goal**.
 
 ## Workflow
 
 1. Read [SOURCE.md](./SOURCE.md) for the full repository guidance.
 2. Identify concrete constraints, conventions, and required outputs.
 3. Apply the guidance directly to the current task, keeping changes minimal and repository-consistent.
-4. Validate results (tests/lint/build where relevant).
-5. Summarize what was applied from this skill and where.
+   Don't validate results (tests/lint/build where relevant). Wait until I tell you this!
+4. Summarize what was applied from this skill and where.
 
 ## Input Guidance
 
@@ -25,8 +25,3 @@ When invoking this skill manually, include:
 - Task goal
 - Target files or modules
 - Any constraints (performance, architecture, style, tests)
-
-## Source
-
-This skill is generated from [docs/git-commit-instructions.md](../../../docs/git-commit-instructions.md).
-Use [SOURCE.md](./SOURCE.md) as the canonical local resource loaded on demand.

.agents/skills/ipc-communication/SKILL.md

@@ -1,22 +1,22 @@
 ---
 name: ipc-communication
-description: Implement typed IPC flows between renderer and main (send/invoke/receive), including channel typing, payload contracts, and safe wiring.
+description: Use when adding or debugging Electron IPC between preload, renderer, and main; implements strongly typed send/invoke/receive channels, payload contracts, window.electron API wiring, and safe handler registration.
 argument-hint: "[ipc goal] [channel names] [payload/response types]"
 user-invokable: true
 disable-model-invocation: false
 ---
 
 # Skill Instructions
 
-Use this skill when the request matches **IPC communication (Renderer ↔ Main)** or references patterns from **docs/ipc-communication.md**.
+Use this skill when the request matches **IPC communication (Renderer ↔ Main)**.
 
 ## Workflow
 
 1. Read [SOURCE.md](./SOURCE.md) for the full repository guidance.
 2. Identify concrete constraints, conventions, and required outputs.
 3. Apply the guidance directly to the current task, keeping changes minimal and repository-consistent.
-4. Validate results (tests/lint/build where relevant).
-5. Summarize what was applied from this skill and where.
+   Don't validate results (tests/lint/build where relevant). Wait until I tell you this!
+4. Summarize what was applied from this skill and where.
 
 ## Input Guidance
 
@@ -25,8 +25,3 @@ When invoking this skill manually, include:
 - Task goal
 - Target files or modules
 - Any constraints (performance, architecture, style, tests)
-
-## Source
-
-This skill is generated from [docs/ipc-communication.md](../../../docs/ipc-communication.md).
-Use [SOURCE.md](./SOURCE.md) as the canonical local resource loaded on demand.

.agents/skills/javascript/SKILL.md

@@ -1,22 +1,22 @@
 ---
 name: javascript
-description: Refactor JavaScript toward modern, readable, and performant patterns with safer async/error handling and cleaner utility abstractions.
+description: Use when improving JavaScript code quality in existing modules; refactors toward modern syntax, readable structure, safer async/error handling, smaller focused functions, and maintainable utility abstractions.
 argument-hint: "[goal] [js files] [perf/readability constraints]"
 user-invokable: true
 disable-model-invocation: false
 ---
 
 # Skill Instructions
 
-Use this skill when the request matches **JavaScript Best Practices Guide** or references patterns from **docs/javascript.md**.
+Use this skill when the request matches **JavaScript Best Practices Guide**.
 
 ## Workflow
 
 1. Read [SOURCE.md](./SOURCE.md) for the full repository guidance.
 2. Identify concrete constraints, conventions, and required outputs.
 3. Apply the guidance directly to the current task, keeping changes minimal and repository-consistent.
-4. Validate results (tests/lint/build where relevant).
-5. Summarize what was applied from this skill and where.
+   Don't validate results (tests/lint/build where relevant). Wait until I tell you this!
+4. Summarize what was applied from this skill and where.
 
 ## Input Guidance
 
@@ -25,8 +25,3 @@ When invoking this skill manually, include:
 - Task goal
 - Target files or modules
 - Any constraints (performance, architecture, style, tests)
-
-## Source
-
-This skill is generated from [docs/javascript.md](../../../docs/javascript.md).
-Use [SOURCE.md](./SOURCE.md) as the canonical local resource loaded on demand.

.agents/skills/large-data-iteration/SKILL.md

@@ -1,22 +1,22 @@
 ---
 name: large-data-iteration
-description: Optimize nested data processing using indexing/maps, chunking, lazy iteration, and memoization to avoid O(n*m*k) bottlenecks.
+description: Use when loops over large arrays/collections cause slowness or memory pressure; optimizes nested iteration with indexing/maps, pre-grouping, chunking, lazy processing, and memoization to remove O(n*m*k) bottlenecks.
 argument-hint: "[perf goal] [dataset shape] [memory/latency constraints]"
 user-invokable: true
 disable-model-invocation: false
 ---
 
 # Skill Instructions
 
-Use this skill when the request matches **JavaScript Guide: Optimizing Large Data Iteration with Nested Collections** or references patterns from **docs/large-data-iteration.md**.
+Use this skill when the request matches **JavaScript Guide: Optimizing Large Data Iteration with Nested Collections**.
 
 ## Workflow
 
 1. Read [SOURCE.md](./SOURCE.md) for the full repository guidance.
 2. Identify concrete constraints, conventions, and required outputs.
 3. Apply the guidance directly to the current task, keeping changes minimal and repository-consistent.
-4. Validate results (tests/lint/build where relevant).
-5. Summarize what was applied from this skill and where.
+   Don't validate results (tests/lint/build where relevant). Wait until I tell you this!
+4. Summarize what was applied from this skill and where.
 
 ## Input Guidance
 
@@ -25,8 +25,3 @@ When invoking this skill manually, include:
 - Task goal
 - Target files or modules
 - Any constraints (performance, architecture, style, tests)
-
-## Source
-
-This skill is generated from [docs/large-data-iteration.md](../../../docs/large-data-iteration.md).
-Use [SOURCE.md](./SOURCE.md) as the canonical local resource loaded on demand.

.agents/skills/lazy-render/SKILL.md

@@ -1,22 +1,22 @@
 ---
 name: lazy-render
-description: Optimize large list rendering with virtualization patterns (LazyRender/react-window), stable itemData, and efficient row composition.
+description: Use when rendering long lists in React/Electron renderer causes lag; applies LazyRender/react-window virtualization, stable itemData, memoized rows, and empty/loading states for smooth scrolling performance.
 argument-hint: "[list target] [data source] [row height/actions]"
 user-invokable: true
 disable-model-invocation: false
 ---
 
 # Skill Instructions
 
-Use this skill when the request matches **LazyRender — Virtualized list helper (React)** or references patterns from **docs/lazy-render.md**.
+Use this skill when the request matches **LazyRender — Virtualized list helper (React)**.
 
 ## Workflow
 
 1. Read [SOURCE.md](./SOURCE.md) for the full repository guidance.
 2. Identify concrete constraints, conventions, and required outputs.
 3. Apply the guidance directly to the current task, keeping changes minimal and repository-consistent.
-4. Validate results (tests/lint/build where relevant).
-5. Summarize what was applied from this skill and where.
+   Don't validate results (tests/lint/build where relevant). Wait until I tell you this!
+4. Summarize what was applied from this skill and where.
 
 ## Input Guidance
 
@@ -25,8 +25,3 @@ When invoking this skill manually, include:
 - Task goal
 - Target files or modules
 - Any constraints (performance, architecture, style, tests)
-
-## Source
-
-This skill is generated from [docs/lazy-render.md](../../../docs/lazy-render.md).
-Use [SOURCE.md](./SOURCE.md) as the canonical local resource loaded on demand.