Find agent skills by outcome

price $999

999.99: ensure layout doesn't break (test with formatted number)

username 50 characters: truncate at 20 in nav

full in profile

Form validation: inline per-field (see flow specs)

never alert()

Coding & Debugging

- icon: ImageOff from lucide-react

text-gray-400

(rectangle for text

circle for avatars

- initials: first letter of first + last name

uppercase

nav items: single line

truncate if >16 characters on mobile

button labels: single line only

max 30 characters

headings: max 2 lines

then truncate with text-ellipsis (add title attr for full text)

body text: allow natural wrapping

no truncation

grid items: sizes=(max-width: 768px) 100vw

(max-width: 1024px) 50vw

if visual size < 44px

use invisible padding to reach 44px

<768px: section-padding: py-10

container-padding: px-4

hero: sizes=(max-width: 1024px) 100vw

50vw

768-1023px: section-padding: py-12

container-padding: px-6

≥1024px: section-padding: py-16

container-padding: px-8

<1024px: h1=text-3xl

h2=text-2xl

image max-height: 400px

object-cover

≥1024px: h1=text-5xl

h2=text-3xl

<1024px: single column (text top

image bottom)

backdrop: bg-black/50

click-outside closes

<1024px: hamburger icon

slide-in drawer from right

≥1024px: two-column (text left

image right) — 55/45 split

≥1024px: horizontal nav

all items visible