core-components
Core Components
Design System Overview
Use components from your core library instead of raw platform components. This ensures consistent styling and behavior.
Design Tokens
NEVER hard-code values. Always use design tokens.
Spacing Tokens
// CORRECT - Use tokens
<Box padding="$4" marginBottom="$2" />
// WRONG - Hard-coded values
<Box padding={16} marginBottom={8} />
More from chriswiles/claude-code-showcase
systematic-debugging
Four-phase debugging methodology with root cause analysis. Use when investigating bugs, fixing test failures, or troubleshooting unexpected behavior. Emphasizes NO FIXES WITHOUT ROOT CAUSE FIRST.
81formik-patterns
Formik form handling with validation patterns. Use when building forms, implementing validation, or handling form submission.
66testing-patterns
Jest testing patterns, factory functions, mocking strategies, and TDD workflow. Use when writing unit tests, creating test factories, or following TDD red-green-refactor cycle.
46react-ui-patterns
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
43graphql-schema
GraphQL queries, mutations, and code generation patterns. Use when creating GraphQL operations, working with Apollo Client, or generating types.
40