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:
43
examples/cursor-react-skill/example-project/README.md
Normal file
43
examples/cursor-react-skill/example-project/README.md
Normal 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
|
||||
21
examples/cursor-react-skill/example-project/package.json
Normal file
21
examples/cursor-react-skill/example-project/package.json
Normal 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"
|
||||
}
|
||||
}
|
||||
23
examples/cursor-react-skill/example-project/src/App.tsx
Normal file
23
examples/cursor-react-skill/example-project/src/App.tsx
Normal 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;
|
||||
13
examples/cursor-react-skill/example-project/src/index.tsx
Normal file
13
examples/cursor-react-skill/example-project/src/index.tsx
Normal 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>
|
||||
);
|
||||
25
examples/cursor-react-skill/example-project/tsconfig.json
Normal file
25
examples/cursor-react-skill/example-project/tsconfig.json
Normal 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" }]
|
||||
}
|
||||
Reference in New Issue
Block a user