feat: add Claude Skills

[Gert-Jan Vercauteren (gert-janvercauteren)]

This pull request introduces comprehensive documentation and implementation guides for Backpack component development, Figma integration, and Storybook documentation. The changes provide detailed skill definitions, step-by-step guides, and best practices for creating, connecting, and documenting Backpack components, ensuring consistency, type safety, accessibility, and design-to-code synchronization.

Backpack Component Creation and Implementation:

• Added a detailed skill definition and implementation guide for creating Backpack components, covering type-safe props, file structure, styling conventions, testing patterns, and Storybook integration. This includes a full checklist and example patterns for new component development. [1] [2]

Figma Code Connect Integration:

• Introduced a skill for connecting React components to Figma designs using Code Connect, with instructions on file naming, property mapping, example setups, and workflow for design-to-code synchronization. Includes best practices and real-world examples.

Storybook Documentation and Visual Testing:

• Added a skill for documenting Backpack components in Storybook, including interactive examples, accessibility testing with jest-axe, and visual regression support via Percy. Provides conventions for story structure, naming, and configuration for automated testing and documentation.

Remember to include the following changes:

• Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
• README.md (If you have created a new component)
• Component README.md
• Tests
• Accessibility tests
  • The following checks were performed:
    • Ability to navigate using a keyboard only
    • Zoom functionality (Deque University explanation):
      • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
      • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
    • Ability to navigate using a screen reader only
• Storybook examples created/updated
• For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/4136 to see this build running in a browser.