skills.rest
Skyscanner
SkyscannerOFFICIAL
Explore all skills by this author →
WebsiteGitHub

backpack-external-component-migration

Migrate external React components into Backpack design-system components.

543|211|Updated Mar 22, 2017
Search Tags:#react#migration#jest#storybook#lint#design-system#backpack
One-click install
npx skills add https://github.com/Skyscanner/backpack --skill backpack-external-component-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: backpack-external-component-migration
Source: https://github.com/Skyscanner/backpack/tree/main/.claude/skills/backpack-external-component-migration
Command: npx skills add https://github.com/Skyscanner/backpack --skill backpack-external-component-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrates external React components into Backpack design system components, ensuring they follow the Backpack conventions, licensing, and testing requirements to be reusable across Skyscanner apps.

Core Features & Use Cases

  • Discovery and assessment of external components for migration readiness.
  • Refactoring into Backpack component structure with TS, SCSS tokens, tests, and Storybook stories.
  • Verification and acceptance gating through lint, version checks, dependency checks, and 100% test coverage.

Quick Start

Coordinate a migration by selecting an external component and applying the Backpack migration template and verification steps.

Frequently Asked Questions about backpack-external-component-migration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate React components to a design system?▼

Migrating React components to a design system involves refactoring external components into the standard component structure, applying explicit props interfaces, converting styles to token-based Sass APIs, and updating Storybook stories and Jest tests to meet design system standards.

What are the requirements for adopting design system tokens in React components?▼

Adopting design system tokens requires components to satisfy license headers, explicit props interfaces, token-based Sass APIs, and stringent verification requirements including lint, react-version checks, dependency validation, and unit tests before acceptance.

How do I standardize external React components with lint and Jest?▼

Standardizing external React components requires refactoring their structure, adding explicit props interfaces, and enforcing stringent verification through lint, react-version checks, dependency validation, and unit tests to achieve 100% test coverage before acceptance.

Can I integrate external React components into Storybook using a design system migration?▼

Yes, design system migration promotes external React components by standardizing their code structure, refactoring their tests, and integrating them into Storybook stories to ensure they are reusable across applications.

What is the best way to prepare React components for design system migration readiness?▼

Preparing for design system migration readiness involves discovering and assessing external components, then refactoring them into the standard component structure with TypeScript, SCSS tokens, Jest tests, and Storybook stories.

Related Skills

Explore More Software Engineering Skills→
tundraraytundraray
2

typescript-rules

Enforce TypeScript and React coding rules for components, types, and state.

Community
Basic
SkyscannerSkyscanner
543

backpack-code-review-checklist

Apply a Backpack component code-review checklist covering API encapsulation, Sass tokens, accessibility, and documentation.

Official
Advanced
EndavaEndava
160

review-component

Review BEEQ StencilJS components against design system standards.

Official
Advanced
baloisebaloise
111

ds-create-component

Generate Stencil web components with TypeScript, SCSS, and visual test files.

Official
Intermediate