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

Author: gndz07

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,9 +46,9 @@ 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:
 
@@ -57,6 +57,7 @@ import '@traefik-labs/faency/dist/style.css';
 ```
 
 2. Wrap your app with the VanillaExtractThemeProvider:
+Wrap your app with the VanillaExtractThemeProvider:
 
 ```jsx
 import { VanillaExtractThemeProvider } from '@traefik-labs/faency';
@@ -71,11 +72,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,15 +63,14 @@ 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 '@traefik-labs/faency/dist/style.css'; // Required for Vanilla Extract components
-import { VanillaExtractThemeProvider } from '@traefik-labs/faency';
-import { BoxVanilla, BadgeVanilla } from '@traefik-labs/faency';
+import { VanillaExtractThemeProvider } from '@traefiklabs/faency';
+import { BoxVanilla, BadgeVanilla } from '@traefiklabs/faency';
 
 function App() {
   return (
@@ -86,21 +85,28 @@ 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)
+#### For Vanilla Extract Components (Migration in Progress)
 
+<<<<<<< HEAD
 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 '@traefik-labs/faency/dist/style.css';
 ```
 
-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.
+# 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.
+
+> > > > > > > 3186cd9 (chore: fix usage docs)
 
 ---