feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Use fallback state instead of initialState
|
||||
impact: MEDIUM
|
||||
impactDescription: reactive fallbacks without syncing
|
||||
tags: state, hooks, derived-state, props, initialState
|
||||
---
|
||||
|
||||
## Use fallback state instead of initialState
|
||||
|
||||
Use `undefined` as initial state and nullish coalescing (`??`) to fall back to
|
||||
parent or server values. State represents user intent only—`undefined` means
|
||||
"user hasn't chosen yet." This enables reactive fallbacks that update when the
|
||||
source changes, not just on initial render.
|
||||
|
||||
**Incorrect (syncs state, loses reactivity):**
|
||||
|
||||
```tsx
|
||||
type Props = { fallbackEnabled: boolean }
|
||||
|
||||
function Toggle({ fallbackEnabled }: Props) {
|
||||
const [enabled, setEnabled] = useState(defaultEnabled)
|
||||
// If fallbackEnabled changes, state is stale
|
||||
// State mixes user intent with default value
|
||||
|
||||
return <Switch value={enabled} onValueChange={setEnabled} />
|
||||
}
|
||||
```
|
||||
|
||||
**Correct (state is user intent, reactive fallback):**
|
||||
|
||||
```tsx
|
||||
type Props = { fallbackEnabled: boolean }
|
||||
|
||||
function Toggle({ fallbackEnabled }: Props) {
|
||||
const [_enabled, setEnabled] = useState<boolean | undefined>(undefined)
|
||||
const enabled = _enabled ?? defaultEnabled
|
||||
// undefined = user hasn't touched it, falls back to prop
|
||||
// If defaultEnabled changes, component reflects it
|
||||
// Once user interacts, their choice persists
|
||||
|
||||
return <Switch value={enabled} onValueChange={setEnabled} />
|
||||
}
|
||||
```
|
||||
|
||||
**With server data:**
|
||||
|
||||
```tsx
|
||||
function ProfileForm({ data }: { data: User }) {
|
||||
const [_theme, setTheme] = useState<string | undefined>(undefined)
|
||||
const theme = _theme ?? data.theme
|
||||
// Shows server value until user overrides
|
||||
// Server refetch updates the fallback automatically
|
||||
|
||||
return <ThemePicker value={theme} onChange={setTheme} />
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user