회원가입
This commit is contained in:
96
.agent/skills/find-skills/SKILL.md
Normal file
96
.agent/skills/find-skills/SKILL.md
Normal file
@@ -0,0 +1,96 @@
|
||||
---
|
||||
name: find-skills
|
||||
description: Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", or "is there a skill that can help with X".
|
||||
---
|
||||
|
||||
# Find Skills
|
||||
|
||||
This skill helps you discover and install skills from the open agent skills ecosystem.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when the user:
|
||||
|
||||
- Asks "how do I do X" where X might be a common task with an existing skill
|
||||
- Says "find a skill for X" or "is there a skill for X"
|
||||
- Asks "can you do X" where X is a specialized capability
|
||||
- Expresses interest in extending agent capabilities
|
||||
- Wants to search for tools, templates, or workflows
|
||||
- Mentions they wish they had help with a specific domain (design, testing, deployment, etc.)
|
||||
|
||||
## What is the Skills CLI?
|
||||
|
||||
The Skills CLI (`npx skills`) is the package manager for the open agent skills ecosystem. Skills are modular packages that extend agent capabilities with specialized knowledge, workflows, and tools.
|
||||
|
||||
**Key commands:**
|
||||
|
||||
- `npx skills find [query]` - Search for skills interactively or by keyword
|
||||
- `npx skills add` - Install a skill from GitHub or other sources
|
||||
- `npx skills check` - Check for skill updates
|
||||
- `npx skills update` - Update all installed skills
|
||||
|
||||
**Browse skills at:** <https://skills.sh/>
|
||||
|
||||
## How to Help Users Find Skills
|
||||
|
||||
### Step 1: Understand What They Need
|
||||
|
||||
When a user asks for help with something, identify:
|
||||
|
||||
1. The domain (e.g., React, testing, design, deployment)
|
||||
2. The specific task (e.g., writing tests, creating animations, reviewing PRs)
|
||||
3. Whether this is a common enough task that a skill likely exists
|
||||
|
||||
### Step 2: Search for Skills
|
||||
|
||||
Run the find command with a relevant query:
|
||||
|
||||
```bash
|
||||
npx skills find [query]
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
- User asks "how do I make my React app faster?" → `npx skills find react performance`
|
||||
- User asks "can you help me with PR reviews?" → `npx skills find pr review`
|
||||
- User asks "I need to create a changelog" → `npx skills find changelog`
|
||||
|
||||
### Step 3: Present Recommendations
|
||||
|
||||
When you find relevant skills, present them to the user with:
|
||||
|
||||
1. The skill name and what it does
|
||||
2. The installation command
|
||||
3. A link to the skill's page
|
||||
|
||||
**Example response:**
|
||||
|
||||
> I found a skill that might help!
|
||||
>
|
||||
> **vercel-react-best-practices**
|
||||
> Vercel's official React performance guidelines for AI agents.
|
||||
>
|
||||
> To install it:
|
||||
> `npx skills add vercel-labs/agent-skills@vercel-react-best-practices`
|
||||
>
|
||||
> Learn more: <https://skills.sh/vercel-labs/agent-skills/vercel-react-best-practices>
|
||||
|
||||
If the user wants to proceed, you can install the skill for them:
|
||||
|
||||
```bash
|
||||
npx skills add vercel-labs/agent-skills@vercel-react-best-practices
|
||||
```
|
||||
|
||||
### Step 4: Verify Installation (Optional)
|
||||
|
||||
After installing, you can verify it was installed correctly:
|
||||
|
||||
```bash
|
||||
npx skills list
|
||||
```
|
||||
|
||||
## When No Skills Are Found
|
||||
|
||||
1. Try a broader search term
|
||||
2. Check the [skills.sh](https://skills.sh/) website manually if you suspect a network issue
|
||||
3. Suggest the user could create their own skill with `npx skills init`
|
||||
65
.agent/skills/nextjs-app-router-patterns/SKILL.md
Normal file
65
.agent/skills/nextjs-app-router-patterns/SKILL.md
Normal file
@@ -0,0 +1,65 @@
|
||||
---
|
||||
name: nextjs-app-router-patterns
|
||||
description: Best practices and patterns for building applications with Next.js App Router (v13+).
|
||||
---
|
||||
|
||||
# Next.js App Router Patterns
|
||||
|
||||
## Core Principles
|
||||
|
||||
### Server-First by Default
|
||||
|
||||
- **Use Server Components** for everything possible (data fetching, layout, static content).
|
||||
- **Use Client Components** (`"use client"`) only when interactivity (hooks, event listeners) is needed.
|
||||
- **Pass Data Down**: Fetch data in Server Components and pass it as props to Client Components.
|
||||
- **Composition**: Wrap Client Components around Server Components to avoid "rendering undefined" issues or waterfall de-opts.
|
||||
|
||||
### Routing & Layouts
|
||||
|
||||
- **File Structure**:
|
||||
- `page.tsx`: Route UI.
|
||||
- `layout.tsx`: Shared UI (wraps pages).
|
||||
- `loading.tsx`: Loading state (Suspense).
|
||||
- `error.tsx`: Error boundary.
|
||||
- `not-found.tsx`: 404 UI.
|
||||
- `template.tsx`: Layout that re-mounts on navigation.
|
||||
- **Parallel Routes**: Use `@folder` for parallel UI (e.g. dashboards).
|
||||
- **Intercepting Routes**: Use `(..)` to intercept navigation (e.g. modals).
|
||||
- **Route Groups**: Use `(group)` to organize routes without affecting the URL path.
|
||||
|
||||
## Data Fetching Patterns
|
||||
|
||||
### Server Side
|
||||
|
||||
- **Direct Async/Await**: `const data = await fetch(...)` inside the component.
|
||||
- **Request Memoization**: `fetch` is automatically memoized. For DB calls, use `React.cache`.
|
||||
- **Data Caching**:
|
||||
- `fetch(url, { next: { revalidate: 3600 } })` for ISR.
|
||||
- `fetch(url, { cache: 'no-store' })` for SSR.
|
||||
- Use `unstable_cache` for caching DB results.
|
||||
|
||||
### Client Side
|
||||
|
||||
- Use **SWR** or **TanStack Query** for client-side fetching.
|
||||
- Avoid `useEffect` for data fetching to prevent waterfalls.
|
||||
- Prefetch data using `queryClient.prefetchQuery` in Server Components and hydrate on client.
|
||||
|
||||
## Server Actions
|
||||
|
||||
- Use **Server Actions** (`"use server"`) for mutations (form submissions, button clicks).
|
||||
- Define actions in separate files (e.g. `actions.ts`) for better organization and security.
|
||||
- Use `useFormState` (or `useActionState` in React 19) to handle loading/error states.
|
||||
|
||||
## Optimization
|
||||
|
||||
- **Images**: Use `next/image` for automatic resizing and format conversion.
|
||||
- **Fonts**: Use `next/font` to eliminate layout shift (CLS).
|
||||
- **Scripts**: Use `next/script` with `strategy="afterInteractive"`.
|
||||
- **Streaming**: Use `<Suspense>` to stream parts of the UI (e.g. slow data fetches).
|
||||
|
||||
## Common Anti-Patterns to Avoid
|
||||
|
||||
1. **Fetching in Client Components without cache lib**: Leads to waterfalls.
|
||||
2. **"use client" at top level layout**: Forces the entire tree to be client-side.
|
||||
3. **Prop Drilling**: specialized `Context` should be used sparingly; prefer Composition.
|
||||
4. **Large Barrel Files**: Avoid `index.ts` exporting everything; import directly to aid tree-shaking.
|
||||
95
.agent/skills/vercel-react-best-practices/SKILL.md
Normal file
95
.agent/skills/vercel-react-best-practices/SKILL.md
Normal file
@@ -0,0 +1,95 @@
|
||||
---
|
||||
name: vercel-react-best-practices
|
||||
description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
|
||||
license: MIT
|
||||
metadata:
|
||||
author: vercel
|
||||
version: "1.0.0"
|
||||
---
|
||||
|
||||
# Vercel React Best Practices
|
||||
|
||||
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
|
||||
|
||||
## When to Apply
|
||||
|
||||
Reference these guidelines when:
|
||||
|
||||
- Writing new React components or Next.js pages
|
||||
- Implementing data fetching (client or server-side)
|
||||
- Reviewing code for performance issues
|
||||
- Refactoring existing React/Next.js code
|
||||
- Optimizing bundle size or load times
|
||||
|
||||
## Rule Categories by Priority
|
||||
|
||||
| Priority | Category | Impact | Prefix |
|
||||
| -------- | ------------------------- | ----------- | ------------ |
|
||||
| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
|
||||
| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
|
||||
| 3 | Server-Side Performance | HIGH | `server-` |
|
||||
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |
|
||||
| 5 | Re-render Optimization | MEDIUM | `rerender-` |
|
||||
| 6 | Rendering Performance | MEDIUM | `rendering-` |
|
||||
| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
|
||||
| 8 | Advanced Patterns | LOW | `advanced-` |
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### 1. Eliminating Waterfalls (CRITICAL)
|
||||
|
||||
- `async-defer-await` - Move await into branches where actually used
|
||||
- `async-parallel` - Use Promise.all() for independent operations
|
||||
- `async-dependencies` - Use better-all for partial dependencies
|
||||
- `async-api-routes` - Start promises early, await late in API routes
|
||||
- `async-suspense-boundaries` - Use Suspense to stream content
|
||||
|
||||
### 2. Bundle Size Optimization (CRITICAL)
|
||||
|
||||
- `bundle-barrel-imports` - Avoid large barrel files; use direct imports
|
||||
- `bundle-large-libraries` - Optimize heavy deps (e.g. framer-motion, lucide)
|
||||
- `bundle-conditional` - Lazy load conditional components
|
||||
- `bundle-route-split` - Split huge page components
|
||||
- `bundle-dynamic-imports` - Use next/dynamic for heavy client components
|
||||
|
||||
### 3. Server-Side Performance (HIGH)
|
||||
|
||||
- `server-cache-react` - Use React.cache() for per-request deduplication
|
||||
- `server-cache-next` - Use unstable_cache for data coaching
|
||||
- `server-only-utils` - Mark server-only code with 'server-only' package
|
||||
- `server-component-boundaries` - Keep client components at leaves
|
||||
- `server-image-optimization` - Use next/image with proper sizing
|
||||
|
||||
### 4. Client-Side Data Fetching (MEDIUM-HIGH)
|
||||
|
||||
- `client-use-swr` - Use SWR/TanStack Query for client-side data
|
||||
- `client-no-effect-fetch` - Avoid fetching in useEffect without caching libraries
|
||||
- `client-prefetch-link` - Use next/link prefetching
|
||||
- `client-caching-headers` - Respect cache-control headers
|
||||
|
||||
### 5. Re-render Optimization (MEDIUM)
|
||||
|
||||
- `rerender-memo-props` - Memoize complex props
|
||||
- `rerender-dependencies` - Use primitive dependencies in effects
|
||||
- `rerender-functional-setstate` - Use functional setState for stable callbacks
|
||||
- `rerender-context-split` - Split context to avoid wide re-renders
|
||||
|
||||
### 6. Rendering Performance (MEDIUM)
|
||||
|
||||
- `rendering-image-priority` - Priority load LCP images
|
||||
- `rendering-list-virtualization` - Virtualize long lists
|
||||
- `rendering-content-visibility` - Use content-visibility for long lists
|
||||
- `rendering-hoist-jsx` - Extract static JSX outside components
|
||||
- `rendering-hydration-no-flicker` - Use inline script for client-only data
|
||||
|
||||
### 7. JavaScript Performance (LOW-MEDIUM)
|
||||
|
||||
- `js-batch-dom-css` - Group CSS changes
|
||||
- `js-index-maps` - Build Map for repeated lookups
|
||||
- `js-combine-iterations` - Combine multiple filter/map into one loop
|
||||
- `js-set-map-lookups` - Use Set/Map for O(1) lookups
|
||||
|
||||
### 8. Advanced Patterns (LOW)
|
||||
|
||||
- `advanced-event-handler-refs` - Store event handlers in refs
|
||||
- `advanced-init-once` - Initialize app once per app load
|
||||
Reference in New Issue
Block a user