feature-requirements
Product requirements for FanHub features. Use when creating new pages, components, or user-facing functionality to ensure features meet product standards.
When & Why to Use This Skill
This Claude skill provides a comprehensive framework for FanHub product requirements, focusing on frontend development best practices. It ensures that every new feature, page, or React component meets high standards for error handling, user feedback, accessibility (A11y), and responsive design. By standardizing technical specifications, it helps developers build robust, user-centric, and data-driven applications while maintaining consistency across the codebase.
Use Cases
- Standardizing Frontend Development: Use this skill to ensure every new React component includes proper error boundaries, try-catch blocks, and user-friendly error messages.
- Enhancing User Experience (UX): Implement consistent loading states using skeleton screens and provide immediate feedback via success/failure toast notifications.
- Optimizing Accessibility and Responsiveness: Apply semantic HTML, ARIA labels, and mobile-first breakpoints to create inclusive and device-agnostic user interfaces.
- Streamlining Analytics Integration: Automatically apply the correct naming conventions and tracking logic for page views and user events to ensure data integrity.
| name | feature-requirements |
|---|---|
| description | Product requirements for FanHub features. Use when creating new pages, components, or user-facing functionality to ensure features meet product standards. |
FanHub Feature Requirements
When building new features or components for FanHub, ensure the following product requirements are met:
1. Error Handling
- Error Boundaries: Wrap all public pages in error boundaries
- Async Error Handling: Use try-catch for all async operations
- User-Friendly Messages: Show meaningful errors, not stack traces
- Error Logging: Log errors to console in development mode
Example:
try {
const data = await fetchCharacters();
setCharacters(data);
} catch (error) {
console.error('Failed to load characters:', error);
toast.error('Unable to load characters. Please try again.');
}
2. User Feedback
- Loading States: Use skeleton screens, not spinners
- Success Notifications: Toast notifications for successful actions
- Error Notifications: Toast notifications for failures
- Confirmations: Dialog prompts before destructive actions
Example (loading state):
{isLoading ? (
<CharacterCardSkeleton count={6} />
) : (
<CharacterGrid characters={characters} />
)}
3. Analytics & Tracking
- Page Views: Track on component mount
- User Events: Track all interactions (clicks, form submissions, etc.)
- Naming Convention: Use format:
fanhub_[page]_[action]
Example:
useEffect(() => {
trackPageView('characters_list');
}, []);
const handleCharacterClick = (character) => {
trackEvent('fanhub_characters_list_character_clicked', {
character_id: character.id
});
};
4. Accessibility
- Semantic HTML: Use proper elements (
<button>,<nav>,<main>) - ARIA Labels: Add where semantic HTML isn't enough
- Keyboard Navigation: Ensure tab order and keyboard shortcuts
- Focus Management: Handle focus on modals, navigation
Example:
<button
onClick={handleClick}
aria-label={`View details for ${character.name}`}
>
<CharacterCard character={character} />
</button>
5. Responsive Design
- Mobile-First: Design for mobile, enhance for desktop
- Breakpoints: 640px (sm), 768px (md), 1024px (lg)
- Touch Targets: Minimum 44px for interactive elements
- Flexible Layouts: Use flexbox/grid, avoid fixed widths
When to Apply
Use this skill when:
- Creating new pages or routes
- Building new React components
- Implementing user interactions
- Adding forms or data entry
- Building modal dialogs or overlays