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",