{"slug":"ui-worst-case-data","name":"UI Worst-Case Data","version":"1.0.0","updated_at":"2026-10-30T01:55:06.498Z","use_when":"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.","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.","languages":["en"],"tags":["ui-testing","fixtures","storybook","typescript","edge-cases","visual-testing"],"category":"code","category_url":"https://aiskills402.com/categories/code","keywords":["worst values","component story","visual test","strict JSON"],"faq":[{"q":"Can a fixture ever break my TypeScript type?","a":"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."},{"q":"What happens to the callback props?","a":"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."},{"q":"What does a component with one boolean prop get?","a":"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."},{"q":"Which awkward strings does it use?","a":"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."}],"examples":[{"lang":"en","model":"claude-sonnet-5-5","input_excerpt":"type Props = {\n  title: string;\n  price: number;        // in cents, a whole number, 0 or more\n  tags: string[];\n  status: 'draft' | 'live' | 'archived';\n  onOpen: (id: string) => void;\n};\n\nexport function ListingRow(props: Props) { /* ... */ }","output_excerpt":"{\"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\":…"}],"page_url":"https://aiskills402.com/skills/ui-worst-case-data","markdown_url":"https://aiskills402.com/skills/ui-worst-case-data.md","image_url":"https://cdn.aiskills402.com/og/skills/ui-worst-case-data/1384db88.png","related_url":"https://api.aiskills402.com/v1/skills/ui-worst-case-data/related","purchases_count":null,"tested":{"date":"2026-10-29","strong":{"model":"claude-sonnet-5-5 (Claude Code alias \"sonnet\")","verdict":"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."},"weak":{"model":"claude-haiku-5-5 (Claude Code alias \"haiku\")","verdict":"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."},"note":"Light test: three cases (two planted, one clean), one run per model; no comparison without the skill. The two component types were written by us; one has an enum, a required callback and a prop documented as a whole number from 0 up, the other has a bounded score and optional props, and the control has a single boolean prop. The checks validate every fixture against the declared type and look for each worst value; they cannot see that only one prop changes per fixture, so that rule was read by hand. Facts come from public MDN, Unicode and IANA pages read on 29 October 2026; there are no owner-measured facts.","report_url":null},"price_usd":"0.01","price_micro":10000,"size_bytes":6961,"sha256":"cb63817fe71875e4efb7f53daf90d2998d13348710178fcd974cf1846b9df2a1","outline":["The input","The answer","The worst values, by type","Rules","Work in this order","Short example"],"license":{"summary":"Perpetual, non-exclusive; use and modify for yourself incl. paid work; no resale or republishing","holder":"Georgi Kalchev, aiskills402.com","url":"https://aiskills402.com/docs#license"},"buy_url":"https://api.aiskills402.com/v1/skills/ui-worst-case-data/file","redownload_url_template":"https://api.aiskills402.com/v1/purchases/{token}","mcp_tool":null,"payment":{"protocol":"x402","scheme":"exact","asset":"USDC","selling":true,"network":"base","network_caip2":"eip155:8453","pay_to":"0xbc0dcc70d8b5d85541d86ffc68d988fd59c22e68","facilitator":"cdp"},"seo_title":"UI Component Worst-Case Test Data","seo_description":"Turns a component's props into JSON fixtures: long words, RTL text, empty lists and date edges, all valid for the type. Pay $0.01 once, in USDC.","versions":[{"version":"1.0.0","date":"2026-10-30","changelog":"# Changelog\n\n## 1.0.0 — 2026-10-29\n\nFirst 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.\n\nTest: 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.\n"}]}