Expert guidance for building financial data visualization applications with Next.js, TypeScript, and Tailwind CSS. Provides best practices for tables, charts, data formatting, and performance optimization.
Expert guidance for building financial data visualization applications using Next.js, TypeScript, and Tailwind CSS.
This skill provides comprehensive expertise for developing financial data display applications. It covers architecture, code style, data handling, visualization, and performance optimization specifically tailored for financial use cases.
1. **Technology Stack**
- Use TypeScript for all code files with strict mode enabled
- Implement Next.js App Router for all routing needs
- Utilize Tailwind CSS exclusively for styling
- Prioritize responsive and accessible design patterns
- Optimize performance when handling large financial datasets
2. **Code Style and Structure**
- Write functional components with TypeScript interfaces for props
- Use camelCase for variables and functions (e.g., `sortFinancialData`, `calculateTotalRevenue`)
- Use PascalCase for component names (e.g., `FinancialTable`, `RevenueChart`)
- Prefer named exports for components and functions
- Structure files in order: main component, subcomponents, utility functions, types
3. **TypeScript Implementation**
- Enable strict mode in tsconfig.json
- Define interfaces for all data structures and component props
- Avoid 'any' type; use precise types instead
- Leverage TypeScript utility types (Partial<T>, Pick<T, K>, etc.)
- Catch type-related errors at compile-time
4. **Rendering Strategies**
- Use server-side rendering (SSR) for initial data fetching
- Implement static site generation (SSG) for infrequently changing data
- Use dynamic imports for code splitting
- Utilize Next.js Image component for optimized image loading
- Follow latest Next.js documentation for routing and data fetching
5. **CSS Implementation**
- Use Tailwind utility classes for all styling
- Create custom utility classes for frequently used patterns
- Implement consistent color schemes using Tailwind's palette
- Ensure responsive design with Tailwind's breakpoint utilities
- Maintain design consistency across components
6. **Data Processing**
- Format currency and percentages properly
- Use appropriate number precision for financial calculations
- Consider using libraries like 'dinero.js' for currency operations
- Implement sorting and filtering for financial tables
- Validate all financial inputs thoroughly
7. **Table Components**
- Create reusable table components for financial data
- Implement pagination, sorting, and filtering features
- Add proper ARIA attributes for accessibility
- Optimize rendering for large datasets (consider virtualization)
- Ensure tables are mobile-responsive
8. **Data Visualization**
- Select appropriate chart types (line charts for trends, bar charts for comparisons)
- Implement interactive charts with tooltips and hover effects
- Make charts responsive across screen sizes
- Use libraries like 'recharts' or 'visx' for advanced visualizations
- Ensure visualizations are accessible
9. **Optimization Techniques**
- Use useMemo and useCallback for memoization
- Wrap components with React.memo to prevent unnecessary re-renders
- Choose efficient data structures for large datasets
- Implement lazy loading for components and data
- Monitor and optimize bundle sizes
10. **Validation and Error Management**
- Implement robust error handling for API calls and data processing
- Leverage TypeScript for compile-time error prevention
- Provide clear error messages and fallback UI
- Validate user inputs, especially financial data entry
- Handle edge cases in calculations and data display
11. **Use pnpm for all package operations**
- Add packages: `pnpm add <package>`
- Remove packages: `pnpm remove <package>`
- Install all packages: `pnpm install`
- Update packages: `pnpm update`
- Upgrade packages: `pnpm upgrade`
```typescript
interface FinancialData {
id: string;
date: Date;
revenue: number;
expenses: number;
profit: number;
}
interface FinancialTableProps {
data: FinancialData[];
onSort: (field: keyof FinancialData) => void;
}
export function FinancialTable({ data, onSort }: FinancialTableProps) {
// Implementation with Tailwind styling, sorting, and formatting
}
```
```typescript
export function formatCurrency(amount: number): string {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(amount);
}
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/financial-data-display-expert/raw