Add NDK skill documentation and examples
- Introduced comprehensive documentation for the Nostr Development Kit (NDK) including an overview, quick reference, and troubleshooting guide. - Added detailed examples covering initialization, authentication, event publishing, querying, and user profile management. - Structured the documentation to facilitate quick lookups and deep learning, based on real-world usage patterns from the Plebeian Market application. - Created an index for examples to enhance usability and navigation. - Bumped version to 1.0.0 to reflect the addition of this new skill set.
This commit is contained in:
119
.claude/skills/react/README.md
Normal file
119
.claude/skills/react/README.md
Normal file
@@ -0,0 +1,119 @@
|
||||
# React 19 Skill
|
||||
|
||||
A comprehensive Claude skill for working with React 19, including hooks, components, server components, and modern React architecture.
|
||||
|
||||
## Contents
|
||||
|
||||
### Main Skill File
|
||||
- **SKILL.md** - Main skill document with React 19 fundamentals, hooks, components, and best practices
|
||||
|
||||
### References
|
||||
- **hooks-quick-reference.md** - Quick reference for all React hooks with examples
|
||||
- **server-components.md** - Complete guide to React Server Components and Server Functions
|
||||
- **performance.md** - Performance optimization strategies and techniques
|
||||
|
||||
### Examples
|
||||
- **practical-patterns.tsx** - Real-world React patterns and solutions
|
||||
|
||||
## What This Skill Covers
|
||||
|
||||
### Core Topics
|
||||
- React 19 features and improvements
|
||||
- All built-in hooks (useState, useEffect, useTransition, useOptimistic, etc.)
|
||||
- Component patterns and composition
|
||||
- Server Components and Server Functions
|
||||
- React Compiler and automatic optimization
|
||||
- Performance optimization techniques
|
||||
- Form handling and validation
|
||||
- Error boundaries and error handling
|
||||
- Context and global state management
|
||||
- Code splitting and lazy loading
|
||||
|
||||
### Best Practices
|
||||
- Component design principles
|
||||
- State management strategies
|
||||
- Performance optimization
|
||||
- Error handling patterns
|
||||
- TypeScript integration
|
||||
- Testing considerations
|
||||
- Accessibility guidelines
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when:
|
||||
- Building React 19 applications
|
||||
- Working with React hooks
|
||||
- Implementing server components
|
||||
- Optimizing React performance
|
||||
- Troubleshooting React-specific issues
|
||||
- Understanding concurrent features
|
||||
- Working with forms and user input
|
||||
- Implementing complex UI patterns
|
||||
|
||||
## Quick Start Examples
|
||||
|
||||
### Basic Component
|
||||
```typescript
|
||||
interface ButtonProps {
|
||||
label: string
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
const Button = ({ label, onClick }: ButtonProps) => {
|
||||
return <button onClick={onClick}>{label}</button>
|
||||
}
|
||||
```
|
||||
|
||||
### Using Hooks
|
||||
```typescript
|
||||
const Counter = () => {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
console.log(`Count is: ${count}`)
|
||||
}, [count])
|
||||
|
||||
return (
|
||||
<button onClick={() => setCount(c => c + 1)}>
|
||||
Count: {count}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Server Component
|
||||
```typescript
|
||||
const Page = async () => {
|
||||
const data = await fetchData()
|
||||
return <div>{data}</div>
|
||||
}
|
||||
```
|
||||
|
||||
### Server Function
|
||||
```typescript
|
||||
'use server'
|
||||
|
||||
export async function createUser(formData: FormData) {
|
||||
const name = formData.get('name')
|
||||
return await db.user.create({ data: { name } })
|
||||
}
|
||||
```
|
||||
|
||||
## Related Skills
|
||||
|
||||
- **typescript** - TypeScript patterns for React
|
||||
- **ndk** - Nostr integration with React
|
||||
- **skill-creator** - Creating reusable component libraries
|
||||
|
||||
## Resources
|
||||
|
||||
- [React Documentation](https://react.dev)
|
||||
- [React API Reference](https://react.dev/reference/react)
|
||||
- [React Hooks Reference](https://react.dev/reference/react/hooks)
|
||||
- [React Server Components](https://react.dev/reference/rsc)
|
||||
- [React Compiler](https://react.dev/reference/react-compiler)
|
||||
|
||||
## Version
|
||||
|
||||
This skill is based on React 19.2 and includes the latest features and APIs.
|
||||
|
||||
Reference in New Issue
Block a user