frontend-development

Define a props interface with typed fields such as variant and size, then map those props to style objects inside a functional component. The Skill demonstrates a Button component using union types and default parameter values for predictable rendering.

Define a Zod schema describing each field's rules, infer the TypeScript type from it, and pass zodResolver to useForm. Register inputs with the register function and display errors from formState.errors next to each field.

Context API suits app-wide state that changes infrequently, such as the authenticated user, as shown in the AuthProvider pattern. Redux or Pinia fit better for complex, frequently updated state with many subscribers.

Create a ProtectedRoute component that reads the user from an auth context and returns an Outlet when authenticated or a Navigate redirect to the login page otherwise. Nest private routes inside that layout route.

Styling and layout belong to a CSS-focused skill, backend API design belongs to a REST API skill, and rendering optimization belongs to a web performance skill. This Skill covers components, state, routing, and forms only.