Dev June

.claude/skills/fold/SKILL.md

@@ -22,7 +22,7 @@ packages/
   design/   → Design tokens via Style Dictionary (@fold-ui/design)
 ```
 
-**Tech stack:** TypeScript 4.8, React 18, Storybook 7, Jest 29, ESBuild, PostCSS, npm workspaces.
+**Tech stack:** TypeScript 5.9, React 18, Storybook 10 (react-webpack5 + SWC compiler), Jest 29, ESBuild, PostCSS, npm workspaces.
 
 ## Component Directory Structure
 

.storybook/main.ts

@@ -10,11 +10,7 @@ let stories = [
 
 const config: StorybookConfig = {
     stories,
-    addons: [
-        '@storybook/addon-links', 
-        '@storybook/addon-essentials', 
-        '@storybook/addon-interactions'
-    ],
+    addons: ['@storybook/addon-webpack5-compiler-swc'],
     webpackFinal: async (config: any) => {
       config.resolve.extensions.push(".ts", ".tsx")
       return config
@@ -28,10 +24,6 @@ const config: StorybookConfig = {
     docs: {
         autodocs: 'tag',
     },
-    babel: async (options: any) => {
-        options.presets.push('@babel/preset-typescript')
-        return options
-    },
     staticDirs: ['../public'],
     features: {},
 }

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons'
+import { addons } from 'storybook/manager-api'
 import theme from './theme'
 
 addons.setConfig({ theme })

.storybook/preview.tsx

@@ -32,23 +32,21 @@ export const decorators = [
 const preview: Preview = {
     decorators,
     parameters: {
-        actions: { argTypesRegex: '^on[A-Z].*' },
         backgrounds: {
-            default: 'light',
-            values: [
-                {
+            options: {
+                default: {
                     name: 'default',
                     value: 'var(--f-color-background)',
                 },
-                {
+                highlight: {
                     name: 'highlight',
                     value: '#f0f3f5',
                 },
-                {
+                light: {
                     name: 'light',
                     value: 'var(--f-color-background)',
                 },
-            ],
+            },
         },
         controls: {
             matchers: {
@@ -57,6 +55,9 @@ const preview: Preview = {
             },
         },
     },
+    initialGlobals: {
+        backgrounds: { value: 'light' },
+    },
 }
 
 export default preview

.storybook/theme.js

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming'
+import { create } from 'storybook/theming'
 
 export default create({
     base: 'light',