LESSON 02 OF 03 · WRITTEN GUIDE
Specify component states
A component is more than its default appearance. Inputs need labels, focus, errors, and disabled behavior when appropriate. Buttons need clear action names and visible keyboard focus. Shared components reduce drift only when their behaviors are specified.
Make it practical
Document a button and text field. For each, describe normal, focus, disabled, and error or loading states where they apply. Use a real task to decide which states are necessary.
TRY THIS PROMPT
Specify a reusable book-title field using the existing tokens. Include a persistent label, help text if needed, validation, and keyboard focus. Explain the accessible relationships without adding a new component library.
Check your work
Can the control be understood without its placeholder? Is focus visible? Does an error explain how to fix the input?
Use the output as a draft. Compare it with the brief, inspect the work, and keep the decisions you can explain.