Browse skills

Build screens, forms, and lists with shared UI components and design tokens, named values for spacing, colors, and typography. Provides patterns for consistent layouts, button variants, validation messages, and reusable component properties.

• Building screens with shared UI components
• Replacing fixed colors and spacing with design tokens
• Creating consistent forms and list layouts

Build forms with Formik and yup, a library for defining input validation rules. Apply field errors, submission feedback, edit detection, and step-specific validation to login screens, editing forms, and forms split across multiple steps.

• Building login and registration forms
• Adding conditional input validation
• Editing existing records with change detection

Build GraphQL data queries and updates with separate operation files and generated types and hooks, reusable functions for React. Follow Apollo Client patterns for error messages, loading feedback, cache updates, and reusable field selections.

• Building a GraphQL list view
• Adding data creation or update forms
• Generating types and hooks from operation files

Investigate bugs and failing tests through four stages: finding the root cause, comparing working patterns, testing a hypothesis, and implementing a fix. Uses reproduction steps, diagnostic evidence, and regression tests to check the result.

• Tracing the cause of a failing test
• Following runtime errors back to invalid data
• Finding the change that broke working code

Write Jest unit tests for component behavior and user interactions. Includes reusable test data builders, mock replacements for dependencies, and test-driven development, where a failing test guides implementation before the code is cleaned up.

• Testing component rendering and form interactions
• Creating reusable test data with selective overrides
• Replacing modules and GraphQL hooks in tests

Build React interfaces that clearly handle loading, errors, empty results, and submissions. Use examples and checklists to keep existing data visible during refetching, offer retry actions, and disable buttons while asynchronous operations are running.

• Keeping existing data visible during refetching
• Adding visible errors and retry actions
• Showing guidance when lists or search results are empty