Skin Tool with index, onboarding and first advanced tools

[marinitx]

First version of the SkinTool, an intuitive tool for creating and previewing custom brand skins efficiently using Mística.

[Copilot]

Copilot reviewed 22 out of 27 changed files in this pull request and generated 1 comment.

Files not reviewed (5)

• package.json: Language not supported
• src/pages/skin-tool/advanced-tools.css: Language not supported
• src/pages/skin-tool/fonts/fonts.css: Language not supported
• src/pages/skin-tool/onboarding/create-color.css: Language not supported
• src/pages/skin-tool/onboarding/create-typo.css: Language not supported

Comments suppressed due to low confidence (2)

src/pages/skin-tool/utils/storageUtils.js:86

• [nitpick] Clarify the comment regarding whether the final skin configuration should include the full palette or a subset of colors to avoid confusion.

// Should return the rest of color variables or only the ones skin tool lets you choose?

src/pages/skin-tool/onboarding/create-border.jsx:113

• Ensure that getInitialBorderIndex correctly handles cases where savedRadius is not found (findIndex returns -1) instead of defaulting to 0 via logical OR.

const getInitialBorderIndex = () => { const savedRadius = borderConfig.radius; return borderRadiusValues.findIndex(value => value === savedRadius) || 0; };

[Copilot]

The reset function is using the key 'userColors' while the rest of the code uses 'skinColors'. Update the key to 'skinColors' for consistency.

Suggested change

	localStorage.setItem('userColors', JSON.stringify(initialColors));
	localStorage.setItem('skinColors', JSON.stringify(initialColors));