feat: integrate official Anthropic and Vercel Labs skills

- Add 8 new skills (62 total, up from 58)
- Official Anthropic skills: docx, pdf, pptx, xlsx, brand-guidelines, internal-comms
- Vercel Labs skills: react-best-practices, web-design-guidelines
- Implement dual-versioning: -official/-anthropic and -community suffixes
- Update README with new skill registry and credits
- Regenerate skills_index.json (62 skills validated)
- Add comprehensive walkthrough.md

BREAKING CHANGE: Document skills (docx/pdf/pptx/xlsx) renamed with version suffixes
This commit is contained in:
sck_0
2026-01-15 07:49:19 +01:00
parent d32f89a211
commit c86c93582e
201 changed files with 5970 additions and 54 deletions

View File

@@ -0,0 +1,79 @@
---
title: Parallel Data Fetching with Component Composition
impact: CRITICAL
impactDescription: eliminates server-side waterfalls
tags: server, rsc, parallel-fetching, composition
---
## Parallel Data Fetching with Component Composition
React Server Components execute sequentially within a tree. Restructure with composition to parallelize data fetching.
**Incorrect (Sidebar waits for Page's fetch to complete):**
```tsx
export default async function Page() {
const header = await fetchHeader()
return (
<div>
<div>{header}</div>
<Sidebar />
</div>
)
}
async function Sidebar() {
const items = await fetchSidebarItems()
return <nav>{items.map(renderItem)}</nav>
}
```
**Correct (both fetch simultaneously):**
```tsx
async function Header() {
const data = await fetchHeader()
return <div>{data}</div>
}
async function Sidebar() {
const items = await fetchSidebarItems()
return <nav>{items.map(renderItem)}</nav>
}
export default function Page() {
return (
<div>
<Header />
<Sidebar />
</div>
)
}
```
**Alternative with children prop:**
```tsx
async function Layout({ children }: { children: ReactNode }) {
const header = await fetchHeader()
return (
<div>
<div>{header}</div>
{children}
</div>
)
}
async function Sidebar() {
const items = await fetchSidebarItems()
return <nav>{items.map(renderItem)}</nav>
}
export default function Page() {
return (
<Layout>
<Sidebar />
</Layout>
)
}
```