svelte-claude-skills

# Svelte Dashboard Component for [COMPANY] Analytics

Here's a complete Svelte component for displaying real-time [DATA] analytics with interactive features:

```svelte
<script>
  import { onMount } from 'svelte';
  let data = [];
  let filteredData = [];
  let selectedFilter = 'all';
  let chart;

  onMount(async () => {
    // Fetch initial data
    const response = await fetch('/api/data');
    data = await response.json();
    filteredData = [...data];
    initChart();
  });

  function initChart() {
    // Initialize chart with filtered data
    // Chart initialization code here
  }

  function applyFilter(filter) {
    selectedFilter = filter;
    filteredData = data.filter(item => item.type === filter || filter === 'all');
    chart.update(filteredData);
  }
</script>

<div class="dashboard-container">
  <h2>Real-Time [DATA] Analytics</h2>
  <div class="filters">
    <button on:click={() => applyFilter('all')}>All</button>
    <button on:click={() => applyFilter('category1')}>Category 1</button>
    <button on:click={() => applyFilter('category2')}>Category 2</button>
  </div>
  <div class="chart-container" bind:this={chartElement}>
    <!-- Chart will be rendered here -->
  </div>
</div>

<style>
  .dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  .filters {
    margin-bottom: 20px;
  }
  .filters button {
    margin-right: 10px;
    padding: 8px 16px;
  }
  .chart-container {
    height: 500px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
</style>
```

## Key Features
- Real-time data fetching and display
- Interactive filtering system
- Responsive design for all devices
- Accessible color contrast
- Performance optimized for large datasets

## Implementation Notes
1. This component assumes you have a Svelte project set up with your preferred charting library.
2. The API endpoint '/api/data' should be replaced with your actual data endpoint.
3. You'll need to implement the chart initialization and update functions based on your chosen charting library.
4. Consider adding error handling for the data fetch operation.
5. For production use, add proper TypeScript types and documentation.