From 9783b4bd25629da19032f54370354462bacc92d7 Mon Sep 17 00:00:00 2001 From: Helio Kroger Date: Tue, 3 Feb 2026 21:20:25 +0000 Subject: [PATCH 1/2] chore: version bump --- .claude/commands/ui-skills.md | 85 +++++++++++++++++++++++++++++++ .claude/skills/ui-skills/SKILL.md | 85 +++++++++++++++++++++++++++++++ .cursor/commands/ui-skills.md | 85 +++++++++++++++++++++++++++++++ .cursor/skills/ui-skills/SKILL.md | 85 +++++++++++++++++++++++++++++++ package.json | 2 +- 5 files changed, 341 insertions(+), 1 deletion(-) create mode 100644 .claude/commands/ui-skills.md create mode 100644 .claude/skills/ui-skills/SKILL.md create mode 100644 .cursor/commands/ui-skills.md create mode 100644 .cursor/skills/ui-skills/SKILL.md diff --git a/.claude/commands/ui-skills.md b/.claude/commands/ui-skills.md new file mode 100644 index 000000000..438987a22 --- /dev/null +++ b/.claude/commands/ui-skills.md @@ -0,0 +1,85 @@ +--- +name: ui-skills +description: Opinionated constraints for building better interfaces with agents. +--- + +# UI Skills + +When invoked, apply these opinionated constraints for building better interfaces. + +## How to use + +- `/ui-skills` + Apply these constraints to any UI work in this conversation. + +- `/ui-skills ` + Review the file against all constraints below and output: + - violations (quote the exact line/snippet) + - why it matters (1 short sentence) + - a concrete fix (code-level suggestion) + +## Stack + +- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested +- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required +- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS +- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic + +## Components + +- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`) +- MUST use the project’s existing component primitives first +- NEVER mix primitive systems within the same interaction surface +- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack +- MUST add an `aria-label` to icon-only buttons +- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested + +## Interaction + +- MUST use an `AlertDialog` for destructive or irreversible actions +- SHOULD use structural skeletons for loading states +- NEVER use `h-screen`, use `h-dvh` +- MUST respect `safe-area-inset` for fixed elements +- MUST show errors next to where the action happens +- NEVER block paste in `input` or `textarea` elements + +## Animation + +- NEVER add animation unless it is explicitly requested +- MUST animate only compositor props (`transform`, `opacity`) +- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`) +- SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons) +- SHOULD use `ease-out` on entrance +- NEVER exceed `200ms` for interaction feedback +- MUST pause looping animations when off-screen +- SHOULD respect `prefers-reduced-motion` +- NEVER introduce custom easing curves unless explicitly requested +- SHOULD avoid animating large images or full-screen surfaces + +## Typography + +- MUST use `text-balance` for headings and `text-pretty` for body/paragraphs +- MUST use `tabular-nums` for data +- SHOULD use `truncate` or `line-clamp` for dense UI +- NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested + +## Layout + +- MUST use a fixed `z-index` scale (no arbitrary `z-*`) +- SHOULD use `size-*` for square elements instead of `w-*` + `h-*` + +## Performance + +- NEVER animate large `blur()` or `backdrop-filter` surfaces +- NEVER apply `will-change` outside an active animation +- NEVER use `useEffect` for anything that can be expressed as render logic + +## Design + +- NEVER use gradients unless explicitly requested +- NEVER use purple or multicolor gradients +- NEVER use glow effects as primary affordances +- SHOULD use Tailwind CSS default shadow scale unless explicitly requested +- MUST give empty states one clear next action +- SHOULD limit accent color usage to one per view +- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones diff --git a/.claude/skills/ui-skills/SKILL.md b/.claude/skills/ui-skills/SKILL.md new file mode 100644 index 000000000..438987a22 --- /dev/null +++ b/.claude/skills/ui-skills/SKILL.md @@ -0,0 +1,85 @@ +--- +name: ui-skills +description: Opinionated constraints for building better interfaces with agents. +--- + +# UI Skills + +When invoked, apply these opinionated constraints for building better interfaces. + +## How to use + +- `/ui-skills` + Apply these constraints to any UI work in this conversation. + +- `/ui-skills ` + Review the file against all constraints below and output: + - violations (quote the exact line/snippet) + - why it matters (1 short sentence) + - a concrete fix (code-level suggestion) + +## Stack + +- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested +- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required +- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS +- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic + +## Components + +- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`) +- MUST use the project’s existing component primitives first +- NEVER mix primitive systems within the same interaction surface +- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack +- MUST add an `aria-label` to icon-only buttons +- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested + +## Interaction + +- MUST use an `AlertDialog` for destructive or irreversible actions +- SHOULD use structural skeletons for loading states +- NEVER use `h-screen`, use `h-dvh` +- MUST respect `safe-area-inset` for fixed elements +- MUST show errors next to where the action happens +- NEVER block paste in `input` or `textarea` elements + +## Animation + +- NEVER add animation unless it is explicitly requested +- MUST animate only compositor props (`transform`, `opacity`) +- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`) +- SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons) +- SHOULD use `ease-out` on entrance +- NEVER exceed `200ms` for interaction feedback +- MUST pause looping animations when off-screen +- SHOULD respect `prefers-reduced-motion` +- NEVER introduce custom easing curves unless explicitly requested +- SHOULD avoid animating large images or full-screen surfaces + +## Typography + +- MUST use `text-balance` for headings and `text-pretty` for body/paragraphs +- MUST use `tabular-nums` for data +- SHOULD use `truncate` or `line-clamp` for dense UI +- NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested + +## Layout + +- MUST use a fixed `z-index` scale (no arbitrary `z-*`) +- SHOULD use `size-*` for square elements instead of `w-*` + `h-*` + +## Performance + +- NEVER animate large `blur()` or `backdrop-filter` surfaces +- NEVER apply `will-change` outside an active animation +- NEVER use `useEffect` for anything that can be expressed as render logic + +## Design + +- NEVER use gradients unless explicitly requested +- NEVER use purple or multicolor gradients +- NEVER use glow effects as primary affordances +- SHOULD use Tailwind CSS default shadow scale unless explicitly requested +- MUST give empty states one clear next action +- SHOULD limit accent color usage to one per view +- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones diff --git a/.cursor/commands/ui-skills.md b/.cursor/commands/ui-skills.md new file mode 100644 index 000000000..438987a22 --- /dev/null +++ b/.cursor/commands/ui-skills.md @@ -0,0 +1,85 @@ +--- +name: ui-skills +description: Opinionated constraints for building better interfaces with agents. +--- + +# UI Skills + +When invoked, apply these opinionated constraints for building better interfaces. + +## How to use + +- `/ui-skills` + Apply these constraints to any UI work in this conversation. + +- `/ui-skills ` + Review the file against all constraints below and output: + - violations (quote the exact line/snippet) + - why it matters (1 short sentence) + - a concrete fix (code-level suggestion) + +## Stack + +- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested +- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required +- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS +- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic + +## Components + +- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`) +- MUST use the project’s existing component primitives first +- NEVER mix primitive systems within the same interaction surface +- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack +- MUST add an `aria-label` to icon-only buttons +- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested + +## Interaction + +- MUST use an `AlertDialog` for destructive or irreversible actions +- SHOULD use structural skeletons for loading states +- NEVER use `h-screen`, use `h-dvh` +- MUST respect `safe-area-inset` for fixed elements +- MUST show errors next to where the action happens +- NEVER block paste in `input` or `textarea` elements + +## Animation + +- NEVER add animation unless it is explicitly requested +- MUST animate only compositor props (`transform`, `opacity`) +- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`) +- SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons) +- SHOULD use `ease-out` on entrance +- NEVER exceed `200ms` for interaction feedback +- MUST pause looping animations when off-screen +- SHOULD respect `prefers-reduced-motion` +- NEVER introduce custom easing curves unless explicitly requested +- SHOULD avoid animating large images or full-screen surfaces + +## Typography + +- MUST use `text-balance` for headings and `text-pretty` for body/paragraphs +- MUST use `tabular-nums` for data +- SHOULD use `truncate` or `line-clamp` for dense UI +- NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested + +## Layout + +- MUST use a fixed `z-index` scale (no arbitrary `z-*`) +- SHOULD use `size-*` for square elements instead of `w-*` + `h-*` + +## Performance + +- NEVER animate large `blur()` or `backdrop-filter` surfaces +- NEVER apply `will-change` outside an active animation +- NEVER use `useEffect` for anything that can be expressed as render logic + +## Design + +- NEVER use gradients unless explicitly requested +- NEVER use purple or multicolor gradients +- NEVER use glow effects as primary affordances +- SHOULD use Tailwind CSS default shadow scale unless explicitly requested +- MUST give empty states one clear next action +- SHOULD limit accent color usage to one per view +- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones diff --git a/.cursor/skills/ui-skills/SKILL.md b/.cursor/skills/ui-skills/SKILL.md new file mode 100644 index 000000000..438987a22 --- /dev/null +++ b/.cursor/skills/ui-skills/SKILL.md @@ -0,0 +1,85 @@ +--- +name: ui-skills +description: Opinionated constraints for building better interfaces with agents. +--- + +# UI Skills + +When invoked, apply these opinionated constraints for building better interfaces. + +## How to use + +- `/ui-skills` + Apply these constraints to any UI work in this conversation. + +- `/ui-skills ` + Review the file against all constraints below and output: + - violations (quote the exact line/snippet) + - why it matters (1 short sentence) + - a concrete fix (code-level suggestion) + +## Stack + +- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested +- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required +- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS +- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic + +## Components + +- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`) +- MUST use the project’s existing component primitives first +- NEVER mix primitive systems within the same interaction surface +- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack +- MUST add an `aria-label` to icon-only buttons +- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested + +## Interaction + +- MUST use an `AlertDialog` for destructive or irreversible actions +- SHOULD use structural skeletons for loading states +- NEVER use `h-screen`, use `h-dvh` +- MUST respect `safe-area-inset` for fixed elements +- MUST show errors next to where the action happens +- NEVER block paste in `input` or `textarea` elements + +## Animation + +- NEVER add animation unless it is explicitly requested +- MUST animate only compositor props (`transform`, `opacity`) +- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`) +- SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons) +- SHOULD use `ease-out` on entrance +- NEVER exceed `200ms` for interaction feedback +- MUST pause looping animations when off-screen +- SHOULD respect `prefers-reduced-motion` +- NEVER introduce custom easing curves unless explicitly requested +- SHOULD avoid animating large images or full-screen surfaces + +## Typography + +- MUST use `text-balance` for headings and `text-pretty` for body/paragraphs +- MUST use `tabular-nums` for data +- SHOULD use `truncate` or `line-clamp` for dense UI +- NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested + +## Layout + +- MUST use a fixed `z-index` scale (no arbitrary `z-*`) +- SHOULD use `size-*` for square elements instead of `w-*` + `h-*` + +## Performance + +- NEVER animate large `blur()` or `backdrop-filter` surfaces +- NEVER apply `will-change` outside an active animation +- NEVER use `useEffect` for anything that can be expressed as render logic + +## Design + +- NEVER use gradients unless explicitly requested +- NEVER use purple or multicolor gradients +- NEVER use glow effects as primary affordances +- SHOULD use Tailwind CSS default shadow scale unless explicitly requested +- MUST give empty states one clear next action +- SHOULD limit accent color usage to one per view +- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones diff --git a/package.json b/package.json index d4ac228c2..91ae192c1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hydralauncher", - "version": "3.8.1", + "version": "3.8.2", "description": "Hydra", "main": "./out/main/index.js", "author": "Los Broxas", From 8f310b17208cd32dc1bb1e32aad278fb135de5af Mon Sep 17 00:00:00 2001 From: Helio Kroger Date: Tue, 3 Feb 2026 21:20:42 +0000 Subject: [PATCH 2/2] chore: version bump --- .claude/commands/ui-skills.md | 85 ------------------------------- .claude/skills/ui-skills/SKILL.md | 85 ------------------------------- 2 files changed, 170 deletions(-) delete mode 100644 .claude/commands/ui-skills.md delete mode 100644 .claude/skills/ui-skills/SKILL.md diff --git a/.claude/commands/ui-skills.md b/.claude/commands/ui-skills.md deleted file mode 100644 index 438987a22..000000000 --- a/.claude/commands/ui-skills.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -name: ui-skills -description: Opinionated constraints for building better interfaces with agents. ---- - -# UI Skills - -When invoked, apply these opinionated constraints for building better interfaces. - -## How to use - -- `/ui-skills` - Apply these constraints to any UI work in this conversation. - -- `/ui-skills ` - Review the file against all constraints below and output: - - violations (quote the exact line/snippet) - - why it matters (1 short sentence) - - a concrete fix (code-level suggestion) - -## Stack - -- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested -- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required -- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS -- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic - -## Components - -- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`) -- MUST use the project’s existing component primitives first -- NEVER mix primitive systems within the same interaction surface -- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack -- MUST add an `aria-label` to icon-only buttons -- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested - -## Interaction - -- MUST use an `AlertDialog` for destructive or irreversible actions -- SHOULD use structural skeletons for loading states -- NEVER use `h-screen`, use `h-dvh` -- MUST respect `safe-area-inset` for fixed elements -- MUST show errors next to where the action happens -- NEVER block paste in `input` or `textarea` elements - -## Animation - -- NEVER add animation unless it is explicitly requested -- MUST animate only compositor props (`transform`, `opacity`) -- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`) -- SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons) -- SHOULD use `ease-out` on entrance -- NEVER exceed `200ms` for interaction feedback -- MUST pause looping animations when off-screen -- SHOULD respect `prefers-reduced-motion` -- NEVER introduce custom easing curves unless explicitly requested -- SHOULD avoid animating large images or full-screen surfaces - -## Typography - -- MUST use `text-balance` for headings and `text-pretty` for body/paragraphs -- MUST use `tabular-nums` for data -- SHOULD use `truncate` or `line-clamp` for dense UI -- NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested - -## Layout - -- MUST use a fixed `z-index` scale (no arbitrary `z-*`) -- SHOULD use `size-*` for square elements instead of `w-*` + `h-*` - -## Performance - -- NEVER animate large `blur()` or `backdrop-filter` surfaces -- NEVER apply `will-change` outside an active animation -- NEVER use `useEffect` for anything that can be expressed as render logic - -## Design - -- NEVER use gradients unless explicitly requested -- NEVER use purple or multicolor gradients -- NEVER use glow effects as primary affordances -- SHOULD use Tailwind CSS default shadow scale unless explicitly requested -- MUST give empty states one clear next action -- SHOULD limit accent color usage to one per view -- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones diff --git a/.claude/skills/ui-skills/SKILL.md b/.claude/skills/ui-skills/SKILL.md deleted file mode 100644 index 438987a22..000000000 --- a/.claude/skills/ui-skills/SKILL.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -name: ui-skills -description: Opinionated constraints for building better interfaces with agents. ---- - -# UI Skills - -When invoked, apply these opinionated constraints for building better interfaces. - -## How to use - -- `/ui-skills` - Apply these constraints to any UI work in this conversation. - -- `/ui-skills ` - Review the file against all constraints below and output: - - violations (quote the exact line/snippet) - - why it matters (1 short sentence) - - a concrete fix (code-level suggestion) - -## Stack - -- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested -- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required -- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS -- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic - -## Components - -- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`) -- MUST use the project’s existing component primitives first -- NEVER mix primitive systems within the same interaction surface -- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack -- MUST add an `aria-label` to icon-only buttons -- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested - -## Interaction - -- MUST use an `AlertDialog` for destructive or irreversible actions -- SHOULD use structural skeletons for loading states -- NEVER use `h-screen`, use `h-dvh` -- MUST respect `safe-area-inset` for fixed elements -- MUST show errors next to where the action happens -- NEVER block paste in `input` or `textarea` elements - -## Animation - -- NEVER add animation unless it is explicitly requested -- MUST animate only compositor props (`transform`, `opacity`) -- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`) -- SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons) -- SHOULD use `ease-out` on entrance -- NEVER exceed `200ms` for interaction feedback -- MUST pause looping animations when off-screen -- SHOULD respect `prefers-reduced-motion` -- NEVER introduce custom easing curves unless explicitly requested -- SHOULD avoid animating large images or full-screen surfaces - -## Typography - -- MUST use `text-balance` for headings and `text-pretty` for body/paragraphs -- MUST use `tabular-nums` for data -- SHOULD use `truncate` or `line-clamp` for dense UI -- NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested - -## Layout - -- MUST use a fixed `z-index` scale (no arbitrary `z-*`) -- SHOULD use `size-*` for square elements instead of `w-*` + `h-*` - -## Performance - -- NEVER animate large `blur()` or `backdrop-filter` surfaces -- NEVER apply `will-change` outside an active animation -- NEVER use `useEffect` for anything that can be expressed as render logic - -## Design - -- NEVER use gradients unless explicitly requested -- NEVER use purple or multicolor gradients -- NEVER use glow effects as primary affordances -- SHOULD use Tailwind CSS default shadow scale unless explicitly requested -- MUST give empty states one clear next action -- SHOULD limit accent color usage to one per view -- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones