ui-skills

UI Skills - Opinionated UI Constraints

How to use

When writing or reviewing UI code (tsx/css), strictly follow these constraints.

Stack

• MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested.
• MUST use framer-motion (or motion/react) when JavaScript animation is required.
• MUST use cn utility (clsx + tailwind-merge) for class logic.

Components

• MUST use accessible component primitives (Headless UI, Radix, etc.) for complex interactions.
• MUST use the project’s existing component primitives first.
• 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 (pulse) for loading states.
• NEVER use h-screen, use h-dvh for full viewport height.
• MUST respect safe-area-inset for fixed elements (especially on mobile).
• 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 (專案註記：若使用 animate-in utilities from tailwindcss-animate，優先於自訂 JS 動畫)。
• MUST animate only compositor props (transform, opacity).
• NEVER animate layout properties (width, height, top, left, margin, padding).
• SHOULD use ease-out on entrance.
• NEVER exceed 200ms for interaction feedback.

Typography

• MUST use text-balance for headings and text-pretty for body/paragraphs (if supported by browser/tailwind version, otherwise standard wrapping).
• MUST use tabular-nums for data/numbers (Stock prices, percentages).
• SHOULD use truncate or line-clamp for dense UI.

Layout

• MUST use a fixed z-index scale (no arbitrary z-[123]).
• SHOULD use size-* for square elements instead of w-* + h-*.

Project Specific (Lazy Stock)

• Theme: "Modern, Clean, Slightly Luxurious Dark Mode".
• Colors: Use slate-900 for background, indigo-400 / purple-400 for accents.
• Glassmorphism: Use backdrop-blur-md and semi-transparent backgrounds for cards.