bad84ceac2
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)
1.0 KiB
1.0 KiB
Example React Project for Cursor
Minimal React + TypeScript project to test Cursor AI with .cursorrules.
Setup
# 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