Form Improvements

Try adding an empty todo right now — just click the add button with nothing typed. What happens? Probably nothing helpful. Now try pressing Enter with no text. The app should prevent empty todos and tell the user what went wrong. Let's fix these gaps.

The add-todo form is the primary way users interact with your app. A polished form builds confidence — it tells users "this app was made with care."

Polish the input

"Improve the todo input field. Give it a clean border that highlights with the primary color on focus. Add a subtle inner shadow. Use placeholder text 'What needs to be done?' in a muted color. The input should have rounded corners matching the rest of the app. Add a smooth transition on the border color change."

What great form inputs look like

Claude Code should produce inputs with these qualities:

/* Clean, professional input styling */
.input {
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
 
.input:focus {
  outline: none;
  border-color: rgb(var(--color-primary));
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.1);
}

That ring of color on focus is called a focus ring. It provides clear visual feedback and helps with accessibility.

Better validation feedback

"Add validation to the todo input. If the user tries to submit an empty todo, show a subtle red border with a small error message below the input that says 'Please enter a task.' The error should appear smoothly, not jump in. Clear the error when they start typing."

The submit button

"Style the add button to sit next to the input. It should use the primary color as background with white text, match the input height exactly, and have hover and active states. When the input is empty, the button should appear slightly faded/disabled."

Keyboard experience

"Make sure pressing Enter in the input submits the form. After submitting, keep focus in the input so the user can add another todo immediately."

This is a usability detail, not a visual one, but it makes the form feel responsive and professional. Users adding multiple todos in a row will appreciate not having to click back into the input.

Your form should now feel crisp and responsive. Every state — empty, focused, error, success — gives the user clear feedback about what's happening.