adapt-external-tsx-reference

To adapt external TSX snippets, you evaluate existing project constraints and replace unsupported dependencies to deliver an integration-ready, idiomatic React scaffold matching your UI library, routing, and styling conventions.

The best way to integrate a designer's TSX reference is using an adaptation-first approach that preserves layout and interaction intent while reframing the implementation to use your existing UI library and project tooling safely.

Adapting external React component references works by evaluating your current state management and routing constraints, then replacing unsupported dependencies to generate an integration-ready, idiomatic code scaffold.

You cannot use external TSX references directly if they rely on a different state management setup; they must be evaluated against your project constraints and adapted to your specific state management conventions first.

You need to adapt external TSX code instead of copying it verbatim when teammates or designers provide TSX snippets that must be aligned with your current tech stack, routing, and styling conventions to ensure compatibility.

Copying external React component code directly risks introducing breaking changes and unsupported dependencies, bypassing the evaluation needed to match your project's specific UI library and state management conventions.