Skip to content

Commit 1b96649

Browse files
john-data-chenjohn-data-chen
committed
feat: upgrade ai skills
1 parent 6882fad commit 1b96649

4 files changed

Lines changed: 264 additions & 0 deletions

File tree

‎ai_docs/skills/web/next-cache-components/SKILL.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,56 @@ async function Notifications() {
335335
| `revalidate = N` | `cacheLife({ revalidate: N })` |
336336
| `unstable_cache()` | `'use cache'` directive |
337337

338+
### Migrating `unstable_cache` to `use cache`
339+
340+
`unstable_cache` has been replaced by the `use cache` directive in Next.js 16. When `cacheComponents` is enabled, convert `unstable_cache` calls to `use cache` functions:
341+
342+
**Before (`unstable_cache`):**
343+
344+
```tsx
345+
import { unstable_cache } from 'next/cache'
346+
347+
const getCachedUser = unstable_cache(
348+
async (id) => getUser(id),
349+
['my-app-user'],
350+
{
351+
tags: ['users'],
352+
revalidate: 60,
353+
}
354+
)
355+
356+
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
357+
const { id } = await params
358+
const user = await getCachedUser(id)
359+
return <div>{user.name}</div>
360+
}
361+
```
362+
363+
**After (`use cache`):**
364+
365+
```tsx
366+
import { cacheLife, cacheTag } from 'next/cache'
367+
368+
async function getCachedUser(id: string) {
369+
'use cache'
370+
cacheTag('users')
371+
cacheLife({ revalidate: 60 })
372+
return getUser(id)
373+
}
374+
375+
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
376+
const { id } = await params
377+
const user = await getCachedUser(id)
378+
return <div>{user.name}</div>
379+
}
380+
```
381+
382+
Key differences:
383+
- **No manual cache keys** - `use cache` generates keys automatically from function arguments and closures. The `keyParts` array from `unstable_cache` is no longer needed.
384+
- **Tags** - Replace `options.tags` with `cacheTag()` calls inside the function.
385+
- **Revalidation** - Replace `options.revalidate` with `cacheLife({ revalidate: N })` or a built-in profile like `cacheLife('minutes')`.
386+
- **Dynamic data** - `unstable_cache` did not support `cookies()` or `headers()` inside the callback. The same restriction applies to `use cache`, but you can use `'use cache: private'` if needed.
387+
338388
---
339389

340390
## Limitations
@@ -358,3 +408,4 @@ async function DynamicContent() {
358408
Sources:
359409
- [Cache Components Guide](https://nextjs.org/docs/app/getting-started/cache-components)
360410
- [use cache Directive](https://nextjs.org/docs/app/api-reference/directives/use-cache)
411+
- [unstable_cache (legacy)](https://nextjs.org/docs/app/api-reference/functions/unstable_cache)

‎ai_docs/skills/web/vercel-composition-patterns/README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# React Composition Patterns
2+
3+
A structured repository for React composition patterns that scale. These
4+
patterns help avoid boolean prop proliferation by using compound components,
5+
lifting state, and composing internals.
6+
7+
## Structure
8+
9+
- `rules/` - Individual rule files (one per rule)
10+
- `_sections.md` - Section metadata (titles, impacts, descriptions)
11+
- `_template.md` - Template for creating new rules
12+
- `area-description.md` - Individual rule files
13+
- `metadata.json` - Document metadata (version, organization, abstract)
14+
- **`AGENTS.md`** - Compiled output (generated)
15+
16+
## Rules
17+
18+
### Component Architecture (CRITICAL)
19+
20+
- `architecture-avoid-boolean-props.md` - Don't add boolean props to customize
21+
behavior
22+
- `architecture-compound-components.md` - Structure as compound components with
23+
shared context
24+
25+
### State Management (HIGH)
26+
27+
- `state-lift-state.md` - Lift state into provider components
28+
- `state-context-interface.md` - Define clear context interfaces
29+
(state/actions/meta)
30+
- `state-decouple-implementation.md` - Decouple state management from UI
31+
32+
### Implementation Patterns (MEDIUM)
33+
34+
- `patterns-children-over-render-props.md` - Prefer children over renderX props
35+
- `patterns-explicit-variants.md` - Create explicit component variants
36+
37+
## Core Principles
38+
39+
1. **Composition over configuration** — Instead of adding props, let consumers
40+
compose
41+
2. **Lift your state** — State in providers, not trapped in components
42+
3. **Compose your internals** — Subcomponents access context, not props
43+
4. **Explicit variants** — Create ThreadComposer, EditComposer, not Composer
44+
with isThread
45+
46+
## Creating a New Rule
47+
48+
1. Copy `rules/_template.md` to `rules/area-description.md`
49+
2. Choose the appropriate area prefix:
50+
- `architecture-` for Component Architecture
51+
- `state-` for State Management
52+
- `patterns-` for Implementation Patterns
53+
3. Fill in the frontmatter and content
54+
4. Ensure you have clear examples with explanations
55+
56+
## Impact Levels
57+
58+
- `CRITICAL` - Foundational patterns, prevents unmaintainable code
59+
- `HIGH` - Significant maintainability improvements
60+
- `MEDIUM` - Good practices for cleaner code

‎ai_docs/skills/web/vercel-react-best-practices/README.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# React Best Practices
2+
3+
A structured repository for creating and maintaining React Best Practices optimized for agents and LLMs.
4+
5+
## Structure
6+
7+
- `rules/` - Individual rule files (one per rule)
8+
- `_sections.md` - Section metadata (titles, impacts, descriptions)
9+
- `_template.md` - Template for creating new rules
10+
- `area-description.md` - Individual rule files
11+
- `src/` - Build scripts and utilities
12+
- `metadata.json` - Document metadata (version, organization, abstract)
13+
- __`AGENTS.md`__ - Compiled output (generated)
14+
- __`test-cases.json`__ - Test cases for LLM evaluation (generated)
15+
16+
## Getting Started
17+
18+
1. Install dependencies:
19+
```bash
20+
pnpm install
21+
```
22+
23+
2. Build AGENTS.md from rules:
24+
```bash
25+
pnpm build
26+
```
27+
28+
3. Validate rule files:
29+
```bash
30+
pnpm validate
31+
```
32+
33+
4. Extract test cases:
34+
```bash
35+
pnpm extract-tests
36+
```
37+
38+
## Creating a New Rule
39+
40+
1. Copy `rules/_template.md` to `rules/area-description.md`
41+
2. Choose the appropriate area prefix:
42+
- `async-` for Eliminating Waterfalls (Section 1)
43+
- `bundle-` for Bundle Size Optimization (Section 2)
44+
- `server-` for Server-Side Performance (Section 3)
45+
- `client-` for Client-Side Data Fetching (Section 4)
46+
- `rerender-` for Re-render Optimization (Section 5)
47+
- `rendering-` for Rendering Performance (Section 6)
48+
- `js-` for JavaScript Performance (Section 7)
49+
- `advanced-` for Advanced Patterns (Section 8)
50+
3. Fill in the frontmatter and content
51+
4. Ensure you have clear examples with explanations
52+
5. Run `pnpm build` to regenerate AGENTS.md and test-cases.json
53+
54+
## Rule File Structure
55+
56+
Each rule file should follow this structure:
57+
58+
```markdown
59+
---
60+
title: Rule Title Here
61+
impact: MEDIUM
62+
impactDescription: Optional description
63+
tags: tag1, tag2, tag3
64+
---
65+
66+
## Rule Title Here
67+
68+
Brief explanation of the rule and why it matters.
69+
70+
**Incorrect (description of what's wrong):**
71+
72+
```typescript
73+
// Bad code example
74+
```
75+
76+
**Correct (description of what's right):**
77+
78+
```typescript
79+
// Good code example
80+
```
81+
82+
Optional explanatory text after examples.
83+
84+
Reference: [Link](https://example.com)
85+
86+
## File Naming Convention
87+
88+
- Files starting with `_` are special (excluded from build)
89+
- Rule files: `area-description.md` (e.g., `async-parallel.md`)
90+
- Section is automatically inferred from filename prefix
91+
- Rules are sorted alphabetically by title within each section
92+
- IDs (e.g., 1.1, 1.2) are auto-generated during build
93+
94+
## Impact Levels
95+
96+
- `CRITICAL` - Highest priority, major performance gains
97+
- `HIGH` - Significant performance improvements
98+
- `MEDIUM-HIGH` - Moderate-high gains
99+
- `MEDIUM` - Moderate performance improvements
100+
- `LOW-MEDIUM` - Low-medium gains
101+
- `LOW` - Incremental improvements
102+
103+
## Scripts
104+
105+
- `pnpm build` - Compile rules into AGENTS.md
106+
- `pnpm validate` - Validate all rule files
107+
- `pnpm extract-tests` - Extract test cases for LLM evaluation
108+
- `pnpm dev` - Build and validate
109+
110+
## Contributing
111+
112+
When adding or modifying rules:
113+
114+
1. Use the correct filename prefix for your section
115+
2. Follow the `_template.md` structure
116+
3. Include clear bad/good examples with explanations
117+
4. Add appropriate tags
118+
5. Run `pnpm build` to regenerate AGENTS.md and test-cases.json
119+
6. Rules are automatically sorted by title - no need to manage numbers!
120+
121+
## Acknowledgments
122+
123+
Originally created by [@shuding](https://x.com/shuding) at [Vercel](https://vercel.com).

‎skills-lock.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"version": 1,
3+
"skills": {
4+
"next-best-practices": {
5+
"source": "vercel-labs/next-skills",
6+
"sourceType": "github",
7+
"computedHash": "515ba75178bd44875812d9a560bdf14651f86709f89cf1d4f209638e879807f3"
8+
},
9+
"next-cache-components": {
10+
"source": "vercel-labs/next-skills",
11+
"sourceType": "github",
12+
"computedHash": "a94b83ddcd2ff1c30722577f693b1bfe32f2e1a83abdd6c08c2d6cc6753b53c8"
13+
},
14+
"vercel-composition-patterns": {
15+
"source": "vercel-labs/agent-skills",
16+
"sourceType": "github",
17+
"computedHash": "f98931159fa9c7fed043bcd18a891a46dcf89ababa38df13a4c5b7b30dc0ce07"
18+
},
19+
"vercel-react-best-practices": {
20+
"source": "vercel-labs/agent-skills",
21+
"sourceType": "github",
22+
"computedHash": "4365be772fd3b41994a72ad478472c6d680678e7f3859860ab010e9c46e48ee0"
23+
},
24+
"web-design-guidelines": {
25+
"source": "vercel-labs/agent-skills",
26+
"sourceType": "github",
27+
"computedHash": "a6a44d5498f7e8f68289902f3dedfc6f38ae0cee1e96527c80724cf27f727c2a"
28+
}
29+
}
30+
}

0 commit comments

Comments
 (0)