Development guidelines for the fruit-letter-counter React app. Covers build commands, code style, naming conventions, and Tailwind CSS styling patterns.
Development guidelines for the fruit-letter-counter React application. This skill helps maintain consistent code quality and style across the project.
This is a React application that counts letters in fruit names. The codebase follows modern React patterns with functional components, hooks, and Tailwind CSS for styling.
When working on this project, use these commands:
1. **Install dependencies**: Run `npm install` before starting work
2. **Development server**: Use `npm start` to run the app locally
3. **Production build**: Run `npm run build` to create optimized build
4. **Testing**:
- Run all tests with `npm test`
- Run specific test with `npm test -- -t "testName"`
5. **Linting**:
- Check code with `npm run lint`
- Auto-fix issues with `npm run lint -- --fix`
Structure imports in this order:
1. React imports
2. Third-party library imports
3. Component imports
4. Utility/helper imports
Example:
```javascript
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import FruitDisplay from './components/FruitDisplay';
import { calculateLetters } from './utils/helpers';
```
Follow these strict naming patterns:
Example:
```javascript
<div className="flex items-center justify-center p-4 bg-gray-100 rounded-lg">
<button className="px-4 py-2 text-white bg-blue-500 hover:bg-blue-600">
Count Letters
</button>
</div>
```
Example:
```javascript
try {
const result = await processfruitData(input);
setResult(result);
} catch (error) {
console.error('Error processing fruit:', error);
setError('Failed to process fruit data');
}
```
When modifying or extending this project:
1. **Read existing code** to understand current patterns and structure
2. **Check tests** to understand expected behavior
3. **Follow naming conventions** strictly for all new code
4. **Use Tailwind classes** for all styling needs
5. **Group imports** according to the specified order
6. **Add error handling** for any async operations
7. **Run linter** with `npm run lint -- --fix` before committing
8. **Run tests** with `npm test` to verify changes
9. **Build project** with `npm run build` to ensure no build errors
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/fruit-letter-counter-guidelines/raw