fix: resolve Prettier markdown code block parsing errors

- Fix syntax errors in skills markdown files (.github/skills, .opencode/skills)
- Change typescript to tsx for code blocks with JSX
- Replace ellipsis (...) in array examples with valid syntax
- Separate CSS from TypeScript into distinct code blocks
- Convert JavaScript object examples to valid JSON in docs
- Fix enum definitions with proper comma separation
This commit is contained in:
2026-01-20 21:09:29 +01:00
parent 7932fe7386
commit cd05fc8648
177 changed files with 5042 additions and 5541 deletions

View File

@@ -14,13 +14,9 @@ When rendering content that depends on client-side storage (localStorage, cookie
```tsx
function ThemeWrapper({ children }: { children: ReactNode }) {
// localStorage is not available on server - throws error
const theme = localStorage.getItem('theme') || 'light'
return (
<div className={theme}>
{children}
</div>
)
const theme = localStorage.getItem("theme") || "light";
return <div className={theme}>{children}</div>;
}
```
@@ -30,21 +26,17 @@ Server-side rendering will fail because `localStorage` is undefined.
```tsx
function ThemeWrapper({ children }: { children: ReactNode }) {
const [theme, setTheme] = useState('light')
const [theme, setTheme] = useState("light");
useEffect(() => {
// Runs after hydration - causes visible flash
const stored = localStorage.getItem('theme')
const stored = localStorage.getItem("theme");
if (stored) {
setTheme(stored)
setTheme(stored);
}
}, [])
return (
<div className={theme}>
{children}
</div>
)
}, []);
return <div className={theme}>{children}</div>;
}
```
@@ -56,9 +48,7 @@ Component first renders with default value (`light`), then updates after hydrati
function ThemeWrapper({ children }: { children: ReactNode }) {
return (
<>
<div id="theme-wrapper">
{children}
</div>
<div id="theme-wrapper">{children}</div>
<script
dangerouslySetInnerHTML={{
__html: `
@@ -73,7 +63,7 @@ function ThemeWrapper({ children }: { children: ReactNode }) {
}}
/>
</>
)
);
}
```