chore: migrate skeleton, image, and accessible icon components to vanilla-extract

CLAUDE.md

@@ -6,7 +6,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 Faency is a React component library and design system for Traefik Labs, built with React, TypeScript, Stitches CSS-in-JS, and Radix UI Primitives. It provides accessible, themed components with light/dark mode support.
 
-**Migration Status**: Currently migrating from Stitches to vanilla-extract (Phase 2 complete). Most components use Stitches (`.tsx`), some have vanilla-extract versions (`.vanilla.tsx`). Prefer editing Stitches versions unless explicitly migrating. See `VANILLA_EXTRACT_MIGRATION.md` for migration status and `VANILLA_EXTRACT_DEVELOPER_GUIDE.md` for comprehensive migration instructions.
+**Migration Status**: Currently migrating from Stitches to vanilla-extract (Phase 3 in progress). Most components use Stitches (`.tsx`), some have vanilla-extract versions (`.vanilla.tsx`). Prefer editing Stitches versions unless explicitly migrating. See `VANILLA_EXTRACT_MIGRATION.md` for migration status and `VANILLA_EXTRACT_DEVELOPER_GUIDE.md` for comprehensive migration instructions.
 
 ## Development Commands
 

README.md

@@ -2,7 +2,7 @@
 
 This is the React component library and design system for [Traefik Labs](https://traefik.io).
 
-Built with React, Typescript, [Stitches](https://github.com/modulz/stitches) and [Radix UI Primitives](https://radix-ui.com/primitives/docs/overview/introduction).
+Built with React, Typescript, [Stitches](https://github.com/modulz/stitches), [vanilla-extract](https://vanilla-extract.style/) (migration in progress), and [Radix UI Primitives](https://radix-ui.com/primitives/docs/overview/introduction).
 
 ## Demo (Storybook)
 
@@ -46,17 +46,11 @@ const Container = styled(Flex, {
 const MyComponent = () => <Container>{children}</Container>;
 ```
 
-#### Using Vanilla Extract Components (New - Recommended)
+#### Using Vanilla Extract Components (Migration in Progress)
 
-For better performance with static CSS, use the new Vanilla Extract components:
+For better performance with static CSS, you can use the new Vanilla Extract components (many components are available, more being migrated).
 
-1. Import the CSS file in your app's entry point:
-
-```jsx
-import '@traefiklabs/faency/dist/style.css';
-```
-
-2. Wrap your app with the VanillaExtractThemeProvider:
+Wrap your app with the VanillaExtractThemeProvider:
 
 ```jsx
 import { VanillaExtractThemeProvider } from '@traefiklabs/faency';
@@ -71,11 +65,11 @@ const App = () => (
 );
 ```
 
-> **Note**: Vanilla Extract components use static CSS generated at build time, providing better performance than runtime CSS-in-JS. Components with the `Vanilla` suffix (e.g., `BadgeVanilla`, `BoxVanilla`) require the CSS import above.
+> **Note**: Vanilla Extract components use static CSS generated at build time, providing better performance than runtime CSS-in-JS. CSS is automatically included when you import components - no separate CSS import needed. Components with the `Vanilla` suffix (e.g., `BadgeVanilla`, `BoxVanilla`) are available. Not all components have Vanilla Extract versions yet - check the component documentation or use the Stitches version if a Vanilla version is not available.
 
 ## How to contribute
 
-- Make sure you have Node 18+, or if you prefer, you can work in a Docker container:
+- Make sure you have Node 20+, or if you prefer, you can work in a Docker container:
 
 ```sh
 docker run -it -v $(pwd):/usr/local/src/ -w /usr/local/src/ -p 3000:3000 node:latest bash

USER_GUIDE.md

@@ -63,13 +63,12 @@ function App() {
 export default App;
 ```
 
-#### Using Vanilla Extract Components (New - Recommended)
+#### Using Vanilla Extract Components (Migration in Progress)
 
-For Vanilla Extract components, import the CSS file and use the `VanillaExtractThemeProvider`:
+For Vanilla Extract components, use the `VanillaExtractThemeProvider`:
 
 ```tsx
 import React from 'react';
-import '@traefiklabs/faency/dist/style.css'; // Required for Vanilla Extract components
 import { VanillaExtractThemeProvider } from '@traefiklabs/faency';
 import { BoxVanilla, BadgeVanilla } from '@traefiklabs/faency';
 
@@ -86,21 +85,17 @@ function App() {
 export default App;
 ```
 
+> **Note**: CSS is automatically included when you import Vanilla Extract components - no separate CSS import needed.
+
 ### Import Styles
 
 #### For Stitches Components (Legacy)
 
 Stitches components use runtime CSS-in-JS, so no separate CSS imports are needed. Styles are automatically injected when you use components.
 
-#### For Vanilla Extract Components (New - Recommended)
-
-Vanilla Extract components require importing the static CSS file. Add this import to your application's entry point (e.g., `App.tsx` or `index.tsx`):
-
-```tsx
-import '@traefiklabs/faency/dist/style.css';
-```
+#### For Vanilla Extract Components (Migration in Progress)
 
-This CSS file contains all the styles for Vanilla Extract components (components with `Vanilla` suffix like `BadgeVanilla`, `BoxVanilla`, etc.). Without this import, these components will render as unstyled elements.
+Vanilla Extract components include their CSS automatically when imported. No separate CSS import is required - styles are bundled with each component module.
 
 ---