feat: Add Cursor React example repo (Task 3.2)

Complete working example demonstrating Cursor + Skill Seekers workflow:

**Main Example (examples/cursor-react-skill/):**
- README.md (400+ lines) - Comprehensive guide with expected outputs
- generate_cursorrules.py - Automation script for complete workflow
- .cursorrules.example - Sample generated rules (React 18+ patterns)
- requirements.txt - Python dependencies

**Example Project (example-project/):**
- package.json - React 18 + TypeScript + Vite
- tsconfig.json - Strict TypeScript configuration
- src/App.tsx - Sample counter component
- src/index.tsx - React entry point
- README.md - Testing instructions

**Workflow Demonstrated:**
1. Scrape React docs → skill-seekers scrape
2. Package for Cursor → skill-seekers package --target claude
3. Extract and copy → unzip + cp to .cursorrules
4. Test in Cursor IDE with AI prompts

**Example Prompts Included:**
- useState hook patterns
- Data fetching with useEffect
- Custom hooks for validation
- TypeScript typing examples

Shows before/after comparison of AI suggestions with and without .cursorrules.

Updates: README.md + INTEGRATIONS.md (added Haystack to supported list)
This commit is contained in:
yusyus
2026-02-07 21:07:11 +03:00
parent 1c888e7817
commit bad84ceac2
11 changed files with 816 additions and 3 deletions

View File

@@ -0,0 +1,43 @@
# Example React Project for Cursor
Minimal React + TypeScript project to test Cursor AI with `.cursorrules`.
## Setup
```bash
# Install dependencies
npm install
# Start development server
npm run dev
```
## Testing Cursor AI
Once you have `.cursorrules` in this directory, try these prompts in Cursor:
### Basic Hooks
- "Create a form component with validation"
- "Add a useEffect to fetch user data"
- "Create a custom hook for local storage"
### TypeScript
- "Add proper TypeScript types to this component"
- "Create an interface for user data"
### Performance
- "Optimize this component with useMemo"
- "Add React.memo to prevent re-renders"
### Advanced
- "Create a Context provider for theme management"
- "Implement error boundary for this component"
- "Add lazy loading for this route"
## Comparing Results
Try the same prompt with and without `.cursorrules` to see the difference!
**Without .cursorrules**: Generic React code, may use outdated patterns
**With .cursorrules**: Modern React 18+, proper TypeScript, best practices

View File

@@ -0,0 +1,21 @@
{
"name": "cursor-react-example",
"version": "1.0.0",
"description": "Example React project with Cursor AI rules",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@vitejs/plugin-react": "^4.0.0",
"typescript": "^5.0.0",
"vite": "^4.3.0"
}
}

View File

@@ -0,0 +1,23 @@
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<h1>Cursor + React Example</h1>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
<button onClick={() => setCount(count - 1)}>
Decrement
</button>
<p>
Try using Cursor AI to generate more React components!
</p>
</div>
);
}
export default App;

View File

@@ -0,0 +1,13 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

View File

@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}