AISkills402Connect your agent

Code & Engineering

UI Worst-Case Data

Turns the props of a UI component (a TypeScript type or a list of props) into strict JSON test data that stresses how it displays, and nothing else. Per prop it picks the worst values for the type, a string that is empty, one word of eighty characters with no space, on two lines, an emoji joined with a zero-width joiner, right-to-left letters or HTML-looking text, numbers at zero and at the large and decimal ends, lists that are empty, hold one item or hold a hundred, optional props left out, and dates at the far ends and across a time-zone edge. Every fixture still fits the declared type: a required prop is never missing, an enum gets only its values, a documented range is never broken, and callbacks are named apart from the data. Use to build fixtures for a component story, a visual test or a layout check, or to find what breaks a card, a list row or a badge.

UI Worst-Case Data is a tested SKILL.md that turns the props of a UI component (a TypeScript type or a list of props) into strict JSON test data that stresses how it displays, and nothing else; an agent buys it once for $0.01 over x402.

Tested 2026-10-29No code, no hidden instructionsv1.0.0 · 6.8 KB · perpetual license

Not for

Test tables for a function, expected results, random plausible data and judging how a component is styled. It reads only the props type you paste and writes inputs, so it cannot tell which value will really break your layout.

Tested, honestly

Tested 2026-10-29 with a strong and a weak model.

SonnetStrong model, claude-sonnet-5-5
Right on all 3 cases, read by hand. On a listing row with an enum and a required callback it named the callback in its own list, kept the price a whole number from zero up, used all three status values and no other, and wrote the six awkward titles and the lists of none, one and a hundred. On a member badge with optional props it kept the score between 0 and 100, put the joining date at the far past, the far future, the offset +14:00 and a minute before midnight, and left out the score and the badges in their own fixtures. On a component with one boolean prop it wrote exactly two fixtures.
HaikuWeak model, claude-haiku-5-5
Right on all 3 cases, read by hand. It produced the same fixture set as Sonnet in every case: the callback only in its list, no negative or decimal price, no score outside 0 to 100, the date edges and the absent optional props, and two fixtures for the single boolean. One detail worth noting: both models reused the large number 4000000000 from the example in the skill, which is harmless because it is a valid large value.

Full test summary

Example

Our own test text, before and after the skill ran. Excerpts only.

English · claude-sonnet-5-5

Before

type Props = { title: string; price: number; // in cents, a whole number, 0 or more tags: string[]; status: 'draft' | 'live' | 'archived'; onOpen: (id: string) => void; }; export function ListingRow(props: Props) { /* ... */ }

After

{"component": "ListingRow", "callbacks": ["onOpen"], "fixtures": [{"name": "typical", "props": {"title": "Sunny two-bedroom flat", "price": 125000, "tags": ["garden", "parking"], "status": "live"}}, {"name": "title: empty", "props": {"title": "", "price": 125000, "tags": ["garden", "parking"], "status": "live"}}, {"name": "title: one long word", "props": {"title":…

What is in the file

  • The input
  • The answer
  • The worst values, by type
  • Rules
  • Work in this order
  • Short example

Languages

English. Tried in: English.

License

Perpetual, non-exclusive; use and modify for yourself incl. paid work; no resale or republishing. Holder: Georgi Kalchev, aiskills402.com. Full terms.

Versions

Current version 1.0.0, updated 2026-10-30. Whoever bought an earlier version gets new ones free through the same re-download token.

  1. v1.0.0 · 2026-10-30

    First release, written in the light-test batch of 29 October 2026 (three cases, price $0.01). The idea is ours; no foreign skill was opened, facts come from public MDN, Unicode and IANA pages (see notes/ideas.md). Output: one JSON object with the component name, the callback names and the fixtures.

    Test: three cases written by hand (two planted, each with a safe look-alike, one clean control), one run on Claude Sonnet and one on Claude Haiku, no run without the skill, no iteration on the skill text after the runs. `test/control.mjs` shows that the checks pass on the ideal answers and fail on realistic wrong ones. See `test-summary.json` for the verdicts read by hand. After the runs the frontmatter description was shortened to fit 1,024 characters; the rules the model follows were not changed.

FAQ

Can a fixture ever break my TypeScript type?

Not by design. The skill keeps every required prop, writes an enum prop only with its listed values, and treats a comment such as whole number or 0 to 100 as part of the type, so it uses the edges of a range and never a value past it. A negative price on a prop documented as 0 or more is the standard trap, and the test checked for it.

What happens to the callback props?

They are named in a separate list called callbacks and never put inside the props of a fixture, because JSON cannot hold a function. Your story or test wires them. A component with no function props gets an empty list.

What does a component with one boolean prop get?

Exactly two fixtures: the typical one with true, and one more with false. Inventing strings or extra cases for a prop that has only two values would be noise, so the skill states this as a rule and the control case checks that nothing more is written.

Which awkward strings does it use?

An empty string, one word of eighty characters with no space, text on two lines, an emoji joined with a zero-width joiner, right-to-left letters and HTML-looking text. Each goes into its own fixture, with the other props left typical, so a failing screenshot points at one cause.

Read more

Share

Read this page as Markdown: /skills/ui-worst-case-data.md.

More in Code & Engineering

  • CSS Motion Review

    Code & Engineering

    SKILL.md · v1.0.0 · 7.4 KB

    Reviews pasted CSS, Tailwind classes or JSX styles for the motion mistakes that hurt real visitors, and lists only those, one line each with a fixed code, the place, why it matters and the fix - or exactly No findings. It catches movement that starts by itself, runs longer than five seconds and has no pause control, which fails WCAG 2.2.2 at Level A, large scaling or panning motion with no reduced-motion rule anywhere, a reduced-motion rule that leaves the large motion running, and layout properties such as height or top animated where transform fits. It leaves out the safe look-alikes, such as a short opacity fade on hover, a transform-only animation, and a reduced-motion rule that really switches the motion off. Use to review the styles of a page section before release, to check a hero, marquee, carousel or accordion for motion safety, or to gate a pull request that adds animation.

    $0.01once

    • x402
    • USDC
    • Base
    Get skill

    Tested with Sonnet and Haiku, 29 Oct 2026

  • Form Input UX Review

    Code & Engineering

    SKILL.md · v1.0.0 · 7.6 KB

    Reviews the HTML or JSX of one form for four input mistakes that frustrate people while they type, and lists only those, one line each with a fixed code, the field, why it hurts the user and the fix - or exactly No findings. It catches paste blocked on a password field, a field that holds a code, a ZIP code or a card number set to type number, or an email address or phone number left as plain text with no type or input mode, autocomplete switched off or given a wrong token on password, username and one-time-code fields, and a submit button disabled until the whole form is valid so the person never learns what is missing. It leaves out the safe look-alikes: a real quantity as type number with a minimum and a maximum, autocomplete off on a site search box, and a button disabled only while the request is running. Use to review a sign-in, sign-up, checkout or contact form before release, or to find why mobile keyboards and password managers misbehave.

    $0.01once

    • x402
    • USDC
    • Base
    Get skill

    Tested with Sonnet and Haiku, 29 Oct 2026

  • Secret Handling Review

    Code & Engineering

    SKILL.md · v1.0.0 · 7.8 KB

    Reviews pasted application code, scripts and config for the four ways a secret leaks from the code that uses it, and lists only those, one line each with a fixed code, the place, who can then read the secret and the fix - or exactly No findings. It catches a secret value written to a log or printed (the key itself, an object or environment dump that contains it), a secret placed in a URL query string, a secret typed into source or a committed file, and a server secret sent to the browser through a public environment prefix or a prop of a client component. It leaves out the safe look-alikes: printing only that a key is present, its length or its last four characters, a publishable key that is public by design, and a secret read from the environment on the server. Use to review code that calls an API with a key, to check a Next.js or Vite project before release, or to gate a pull request that touches credentials.

    $0.01once

    • x402
    • USDC
    • Base
    Get skill

    Tested with Sonnet and Haiku, 29 Oct 2026

  • React Performance Review

    Code & Engineering

    SKILL.md · v1.0.0 · 8.2 KB

    Reviews pasted React and Next.js App Router code for five performance mistakes that pass every test and then make pages slow, and lists only those, one line each with a fixed code, the place, why it costs time and the fix - or exactly No findings. It catches independent awaits written one after another so the page waits for their sum, an effect that copies something derivable during render into state, a use client mark placed on a whole page when only a small leaf needs interactivity, a heavy library imported at the top of a client file though it is used only after a click, and a new object, array or function passed every render to a memo child or an effect dependency. It leaves out the safe look-alikes: a second await that needs the first result, an effect that syncs with an outside system, and use client on a small button. Use to review React or Next.js code before release, to find why a page ships too much JavaScript or renders twice, or to gate a pull request that touches components.

    $0.01once

    • x402
    • USDC
    • Base
    Get skill

    Tested with Sonnet and Haiku, 29 Oct 2026