format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.
This commit is contained in:
fargo
2026-08-19 14:37:17 -05:00
parent d2eeb64433
commit 1a822493ba
962 changed files with 29594 additions and 27188 deletions
@@ -14,7 +14,7 @@ SSR-safe replacement for `ref` that shares state across components:
```vue
<script setup lang="ts">
// State is shared by key 'counter' across all components
const counter = useState('counter', () => 0)
const counter = useState('counter', () => 0);
</script>
<template>
@@ -33,19 +33,19 @@ Define reusable state composables:
```ts
// composables/useUser.ts
export function useUser() {
return useState<User | null>('user', () => null)
return useState<User | null>('user', () => null);
}
export function useLocale() {
return useState('locale', () => 'en')
return useState('locale', () => 'en');
}
```
```vue
<script setup lang="ts">
// Same state instance everywhere
const user = useUser()
const locale = useLocale()
const user = useUser();
const locale = useLocale();
</script>
```
@@ -55,11 +55,11 @@ Use `callOnce` to initialize state with async data:
```vue
<script setup lang="ts">
const config = useState('site-config')
const config = useState('site-config');
await callOnce(async () => {
config.value = await $fetch('/api/config')
})
config.value = await $fetch('/api/config');
});
</script>
```
@@ -69,27 +69,27 @@ await callOnce(async () => {
```ts
// ❌ Wrong - causes memory leaks and shared state across requests
export const globalState = ref({ user: null })
export const globalState = ref({ user: null });
```
### ✅ Use useState Instead
```ts
// ✅ Correct - SSR-safe
export const useGlobalState = () => useState('global', () => ({ user: null }))
export const useGlobalState = () => useState('global', () => ({ user: null }));
```
## Clearing State
```ts
// Clear specific state
clearNuxtState('counter')
clearNuxtState('counter');
// Clear multiple states
clearNuxtState(['counter', 'user'])
clearNuxtState(['counter', 'user']);
// Clear all state (use with caution)
clearNuxtState()
clearNuxtState();
```
## With Pinia
@@ -108,38 +108,38 @@ export const useCounterStore = defineStore('counter', {
}),
actions: {
increment() {
this.count++
this.count++;
},
},
})
});
```
```ts
// stores/user.ts (Composition API style)
export const useUserStore = defineStore('user', () => {
const user = ref<User | null>(null)
const isLoggedIn = computed(() => !!user.value)
const user = ref<User | null>(null);
const isLoggedIn = computed(() => !!user.value);
async function login(credentials: Credentials) {
user.value = await $fetch('/api/login', {
method: 'POST',
body: credentials,
})
});
}
return { user, isLoggedIn, login }
})
return { user, isLoggedIn, login };
});
```
```vue
<script setup lang="ts">
const counterStore = useCounterStore()
const userStore = useUserStore()
const counterStore = useCounterStore();
const userStore = useUserStore();
// Initialize store data once
await callOnce(async () => {
await userStore.fetchUser()
})
await userStore.fetchUser();
});
</script>
```
@@ -148,22 +148,21 @@ await callOnce(async () => {
```ts
// composables/useLocale.ts
export function useLocale() {
return useState('locale', () => useDefaultLocale().value)
return useState('locale', () => useDefaultLocale().value);
}
export function useDefaultLocale(fallback = 'en-US') {
const locale = ref(fallback)
const locale = ref(fallback);
if (import.meta.server) {
const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0]
if (reqLocale) locale.value = reqLocale
}
else if (import.meta.client) {
const navLang = navigator.language
if (navLang) locale.value = navLang
const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0];
if (reqLocale) locale.value = reqLocale;
} else if (import.meta.client) {
const navLang = navigator.language;
if (navLang) locale.value = navLang;
}
return locale
return locale;
}
```
@@ -178,15 +177,15 @@ export function useDefaultLocale(fallback = 'en-US') {
```ts
// ❌ Won't work
useState('fn', () => () => console.log('hi'))
useState('instance', () => new MyClass())
useState('fn', () => () => console.log('hi'));
useState('instance', () => new MyClass());
// ✅ Works
useState('data', () => ({ name: 'John', age: 30 }))
useState('items', () => ['a', 'b', 'c'])
useState('data', () => ({ name: 'John', age: 30 }));
useState('items', () => ['a', 'b', 'c']);
```
<!--
<!--
Source references:
- https://nuxt.com/docs/getting-started/state-management
- https://nuxt.com/docs/api/composables/use-state