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

@@ -13,8 +13,8 @@ Instead of awaiting data in async components before returning JSX, use Suspense
```tsx
async function Page() {
const data = await fetchData() // Blocks entire page
const data = await fetchData(); // Blocks entire page
return (
<div>
<div>Sidebar</div>
@@ -24,7 +24,7 @@ async function Page() {
</div>
<div>Footer</div>
</div>
)
);
}
```
@@ -45,12 +45,12 @@ function Page() {
</div>
<div>Footer</div>
</div>
)
);
}
async function DataDisplay() {
const data = await fetchData() // Only blocks this component
return <div>{data.content}</div>
const data = await fetchData(); // Only blocks this component
return <div>{data.content}</div>;
}
```
@@ -61,8 +61,8 @@ Sidebar, Header, and Footer render immediately. Only DataDisplay waits for data.
```tsx
function Page() {
// Start fetch immediately, but don't await
const dataPromise = fetchData()
const dataPromise = fetchData();
return (
<div>
<div>Sidebar</div>
@@ -73,17 +73,17 @@ function Page() {
</Suspense>
<div>Footer</div>
</div>
)
);
}
function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
const data = use(dataPromise) // Unwraps the promise
return <div>{data.content}</div>
const data = use(dataPromise); // Unwraps the promise
return <div>{data.content}</div>;
}
function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
const data = use(dataPromise) // Reuses the same promise
return <div>{data.summary}</div>
const data = use(dataPromise); // Reuses the same promise
return <div>{data.summary}</div>;
}
```