feat(antfu): favor explicitness, disable auto-imports, add Storybook testing (#33)

skills/antfu/SKILL.md

@@ -3,7 +3,7 @@ name: antfu
 description: Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects. Use when setting up new projects, configuring ESLint/Prettier alternatives, monorepos, library publishing, or when the user mentions Anthony Fu's preferences.
 metadata:
   author: Anthony Fu
-  version: "2026.05.01"
+  version: "2026.06.22"
 ---
 
 ## Coding Practices
@@ -30,6 +30,13 @@ metadata:
 - **Explicit return types**: Declare return types explicitly when possible
 - **Avoid complex inline types**: Extract complex types into dedicated `type` or `interface` declarations
 
+### Explicitness
+
+Favor explicit, traceable code over implicit "magic". A reader (human or agent) should be able to follow where every name comes from without running tooling.
+
+- **Explicit imports**: Prefer explicit `import` statements. Avoid auto-imports — when a framework provides them (e.g. Nuxt/Nitro), turn them off for new projects (see [app-development](references/app-development.md)).
+- **No path aliases by default**: Use relative imports (`./foo`, `../bar`). Only use path aliases (`@/`, `~/`, `#imports`, etc.) when they are *already* configured in the project; don't introduce new ones for greenfield code.
+
 ### Comments
 
 - **Avoid unnecessary comments**: Code should be self-explanatory
@@ -139,6 +146,6 @@ Avoid the default catalog. Catalog names can be adjusted per project needs.
 |-------|-------------|-----------|
 | ESLint Config | Framework support, formatters, rule overrides, VS Code settings | [antfu-eslint-config](references/antfu-eslint-config.md) |
 | Project Setup | .gitignore, GitHub Actions, VS Code extensions | [setting-up](references/setting-up.md) |
-| App Development | Vue/Nuxt/UnoCSS conventions and patterns | [app-development](references/app-development.md) |
+| App Development | Vue/Nuxt/UnoCSS conventions, auto-import control, Storybook component testing | [app-development](references/app-development.md) |
 | Library Development | tsdown bundling, pure ESM publishing | [library-development](references/library-development.md) |
 | Monorepo | pnpm workspaces, centralized alias, Turborepo | [monorepo](references/monorepo.md) |

skills/antfu/references/app-development.md

@@ -12,6 +12,45 @@ description: Vue/Nuxt/UnoCSS application conventions. Use when building web apps
 | SPA, client-only, library playgrounds | Vite + Vue |
 | SSR, SSG, SEO-critical, file-based routing, API routes | Nuxt |
 
+## Nuxt Conventions
+
+### Disable Auto-imports (new projects)
+
+Prefer explicit imports over auto-imports so every symbol is traceable. For new Nuxt projects, turn off both app-side (Nuxt) and server-side (Nitro) auto-imports in `nuxt.config.ts`:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  imports: {
+    autoImport: false, // disable composable/util auto-imports
+  },
+  components: {
+    dirs: [], // disable component auto-imports
+  },
+  nitro: {
+    imports: false, // disable server-side (Nitro) auto-imports
+  },
+})
+```
+
+Framework helpers stay available through the `#imports` alias — import them explicitly:
+
+```ts
+import { computed, ref } from '#imports'
+```
+
+| Option | Effect |
+|--------|--------|
+| `imports.autoImport: false` | Stops auto-importing `~/composables` and `~/utils` (and framework APIs like `ref`) |
+| `components.dirs: []` | Stops auto-importing components from `~/components` |
+| `nitro.imports: false` | Stops auto-importing in the server (`server/utils`, etc.) |
+
+> Standalone Nitro projects already default to `imports: false` — leave server auto-imports off rather than enabling them.
+
+### Path Aliases
+
+Nuxt's built-in aliases (`~/`, `@/`, `#imports`) are already configured, so they're fine to use. Don't add custom path aliases for new code — prefer relative imports otherwise.
+
 ## Vue Conventions
 
 | Convention | Preference |
@@ -43,3 +82,9 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>()
 </script>
 ```
+
+### Storybook for Components
+
+Set up Storybook for component development. Expressing each state as a story keeps components side-effect-free and their states predictable.
+
+Run the story tests in CI. Prefer the Vitest addon (`@storybook/addon-vitest`) so stories run as part of the existing `vitest` run (see [setting-up](setting-up.md)).

skills/antfu/references/monorepo.md

@@ -62,6 +62,8 @@ See the dedicated Turborepo skill for detailed configuration.
 
 ## Centralized Alias
 
+Path aliases should be explicit and centralized — this is the deliberate "already set up" case. Outside of these configured aliases, prefer relative imports; don't sprinkle ad-hoc aliases across the codebase.
+
 For better DX across Vite, Nuxt, Vitest configs, create a centralized `alias.ts` at project root:
 
 ```ts