Codex prompts for a UI component

Props are the contract

Write the props as a TypeScript type in the brief. It takes six lines and removes most of the guessing: which values are required, which are optional, what the change handler receives. Say whether the component is controlled, uncontrolled or both.

Add where the file goes and what it may import. A component that pulls in an animation library for one transition has changed your project more than you asked.

Every state, with its values

Rest, hover, focus-visible, pressed, selected, disabled, and loading or error where they apply. For each one give what changes: background, border, text colour, scale, and the time the change takes. Agents build rest and hover well and skip the others unless they are listed.

Keyboard behaviour is a state too. Say which keys do what, and which ARIA role and attributes the component carries.

Ask for the page that proves it

A demo route that renders every state side by side, at phone and desktop width, is the quickest review you'll get. You open one page and see what's wrong. Ask for a small test file as well: it renders the component, presses the keys and checks the handler was called. Tests give the agent something to run, and they still guard the component after the next task.

What a component brief for Codex should contain

• The file path and what the component may import.
• The props as a TypeScript type, with defaults.
• Every state with its colours, sizes and durations.
• Keyboard and ARIA: keys, role, attributes, focus ring.
• A demo page showing all states, and a test file.
• Touch and reduced motion: target size and what stops moving.

A prompt to start from

Task: add a SegmentedControl component at src/components/SegmentedControl/ (SegmentedControl.tsx, SegmentedControl.css, SegmentedControl.test.tsx). Touch no other files except src/pages/Demo.tsx.

Stack: React + TypeScript, plain CSS using the custom properties in src/styles/tokens.css. No new dependencies.

Props:
type Props = {
  options: { value: string; label: string; disabled?: boolean }[];
  value: string;
  onChange: (value: string) => void;
  size?: "md" | "lg";   // default "md"
  ariaLabel: string;
};

Look: a track 40px tall (lg: 48px), radius 12px, background #ececf0, 4px padding. Segments share the width equally, label 14px weight 500, colour #5b5b66. The selected segment sits on a white thumb, radius 8px, shadow 0 1px 2px rgba(0,0,0,0.12), label #111114.

States:
- Hover on an unselected segment: label #111114 over 0.15s.
- Pressed: the thumb scales to 0.97.
- Selection change: the thumb slides to the new segment over 0.28s with cubic-bezier(0.3, 1.3, 0.6, 1). One thumb element moves; do not fade between two.
- Focus-visible: a 2px ring #3b5bff, offset 2px, on the focused segment.
- Disabled option: opacity 0.4, not focusable, cursor not-allowed.

Behaviour: role radiogroup with radio children. Left and Right arrows move the selection and skip disabled options; Home and End jump to the ends. Only the selected radio is in the tab order.

Touch: segments are at least 44px wide; no hover styles on touch devices. With prefers-reduced-motion the thumb jumps with no slide and no scale.

Demo: in Demo.tsx show md and lg, three and five options, one with a disabled option, each inside a 320px and a 720px wide box.

Tests: clicking selects; arrow keys skip disabled options; onChange receives the value.

Done when npm run test, npm run typecheck and npm run build pass. Run them and report the results.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to brief Codex for designThe five parts of a front-end task brief for Codex: goal, constraints, design values, files it may touch and a definition of done. With a skeleton to copy.
• Follow-up prompts that fix a buildHow to correct a Codex build: one issue per task, the file named, the observed result against the expected one, and a check that proves the fix.

• Whole websites
• Landing pages
• Dashboards
• 3D websites
• Restyles