@patricio0312rev/skillset 0.1.0

package/templates/frontend/table-builder/ SKILL.md

@@ -0,0 +1,350 @@
+---
+name: table-builder
+description: Creates data table patterns with filtering, sorting, pagination, row actions, column configuration, server/client rendering modes, and empty/loading states. Use when building "data tables", "list views", "admin tables", or "data grids".
+---
+
+# Table Builder
+
+Generate production-ready data tables with sorting, filtering, and pagination.
+
+## Core Workflow
+
+1. **Define columns**: Column configuration with types
+2. **Choose mode**: Server-side or client-side rendering
+3. **Add features**: Sorting, filtering, pagination, search
+4. **Row actions**: Edit, delete, view actions
+5. **Empty states**: No data and error views
+6. **Loading states**: Skeletons and suspense
+7. **Mobile responsive**: Stack columns or horizontal scroll
+
+## Column Configuration
+
+```typescript
+import { ColumnDef } from "@tanstack/react-table";
+
+export const columns: ColumnDef<User>[] = [
+  {
+    accessorKey: "id",
+    header: "ID",
+    cell: ({ row }) => (
+      <span className="font-mono text-sm">{row.original.id}</span>
+    ),
+  },
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Name
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    cell: ({ row }) => (
+      <div className="font-medium">{row.getValue("name")}</div>
+    ),
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => {
+      const status = row.getValue("status") as string;
+      return (
+        <Badge variant={status === "active" ? "success" : "secondary"}>
+          {status}
+        </Badge>
+      );
+    },
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => <RowActions row={row} />,
+  },
+];
+```
+
+## React Table Implementation
+
+```typescript
+"use client";
+
+import {
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  flexRender,
+} from "@tanstack/react-table";
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onPaginationChange: setPagination,
+    state: { sorting, columnFilters, pagination },
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Input
+          placeholder="Search..."
+          value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+          onChange={(e) =>
+            table.getColumn("name")?.setFilterValue(e.target.value)
+          }
+          className="max-w-sm"
+        />
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <DataTablePagination table={table} />
+    </div>
+  );
+}
+```
+
+## Server-Side Pattern
+
+```typescript
+// app/users/page.tsx
+import { DataTable } from "@/components/ui/data-table";
+
+async function getUsers(params: {
+  page: number;
+  pageSize: number;
+  sortBy?: string;
+  sortOrder?: "asc" | "desc";
+  search?: string;
+}) {
+  const response = await fetch(`/api/users?${new URLSearchParams(params)}`);
+  return response.json();
+}
+
+export default async function UsersPage({
+  searchParams,
+}: {
+  searchParams: { page?: string; search?: string };
+}) {
+  const page = Number(searchParams.page) || 1;
+  const search = searchParams.search || "";
+
+  const { data, totalPages } = await getUsers({ page, pageSize: 10, search });
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-3xl font-bold">Users</h1>
+      <DataTable columns={columns} data={data} totalPages={totalPages} />
+    </div>
+  );
+}
+```
+
+## Pagination Component
+
+```typescript
+export function DataTablePagination({ table }: { table: Table<any> }) {
+  return (
+    <div className="flex items-center justify-between px-2">
+      <div className="text-sm text-gray-700">
+        {table.getFilteredSelectedRowModel().rows.length} of{" "}
+        {table.getFilteredRowModel().rows.length} row(s) selected
+      </div>
+      <div className="flex items-center space-x-6">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">Rows per page</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => table.setPageSize(Number(value))}
+          >
+            <option value="10">10</option>
+            <option value="20">20</option>
+            <option value="50">50</option>
+          </Select>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+## Row Actions
+
+```typescript
+function RowActions({ row }: { row: Row<User> }) {
+  const user = row.original;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem
+          onClick={() => navigator.clipboard.writeText(user.id)}
+        >
+          Copy ID
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => router.push(`/users/${user.id}`)}>
+          View Details
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => handleEdit(user)}>
+          Edit
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="text-red-600"
+          onClick={() => handleDelete(user)}
+        >
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+```
+
+## Empty State
+
+```typescript
+export function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center py-12">
+      <div className="rounded-full bg-gray-100 p-6">
+        <InboxIcon className="h-12 w-12 text-gray-400" />
+      </div>
+      <h3 className="mt-4 text-lg font-semibold">No data found</h3>
+      <p className="mt-2 text-sm text-gray-600">
+        Get started by creating a new record.
+      </p>
+      <Button className="mt-4">Create New</Button>
+    </div>
+  );
+}
+```
+
+## Loading Skeleton
+
+```typescript
+export function TableSkeleton() {
+  return (
+    <div className="space-y-4">
+      <Skeleton className="h-10 w-64" />
+      <div className="rounded-md border">
+        {Array.from({ length: 10 }).map((_, i) => (
+          <div key={i} className="flex gap-4 border-b p-4">
+            <Skeleton className="h-6 w-full" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+## Best Practices
+
+- Use TanStack Table for complex features
+- Server-side pagination for large datasets
+- Debounce search inputs
+- Persist sorting/filtering in URL params
+- Mobile: Horizontal scroll or card view
+- Accessibility: Keyboard navigation, ARIA
+
+## Output Checklist
+
+- [ ] Column definitions with types
+- [ ] Sorting functionality
+- [ ] Filtering/search
+- [ ] Pagination controls
+- [ ] Row actions menu
+- [ ] Empty state component
+- [ ] Loading skeleton
+- [ ] Mobile responsive
+- [ ] URL state persistence
+- [ ] Accessibility attributes

package/templates/performance/alerting-dashboard-builder/ SKILL.md

@@ -0,0 +1,162 @@
+---
+name: alerting-dashboard-builder
+description: Creates SLO-based alerts and operational dashboards with key charts, alert thresholds, and runbook links. Use for "alerting", "dashboards", "SLO", or "monitoring".
+---
+
+# Alerting & Dashboard Builder
+
+Build effective alerts and dashboards based on SLOs.
+
+## SLO Definition
+
+```yaml
+slos:
+  - name: api_availability
+    objective: 99.9%
+    window: 30d
+    sli: |
+      sum(rate(http_requests_total{status_code!~"5.."}[5m])) /
+      sum(rate(http_requests_total[5m]))
+
+  - name: api_latency
+    objective: 95% # 95% of requests under 500ms
+    window: 30d
+    sli: |
+      histogram_quantile(0.95, 
+        rate(http_request_duration_seconds_bucket[5m])
+      ) < 0.5
+```
+
+## Alert Rules
+
+```yaml
+groups:
+  - name: slo_alerts
+    rules:
+      # Fast burn (1% budget in 1h)
+      - alert: AvailabilitySLOFastBurn
+        expr: |
+          (1 - (sum(rate(http_requests_total{status_code!~"5.."}[1h])) /
+          sum(rate(http_requests_total[1h])))) > 0.01
+        for: 5m
+        labels:
+          severity: critical
+        annotations:
+          summary: "Burning 1% error budget per hour"
+          runbook: "https://runbooks.example.com/availability-fast-burn"
+
+      # Slow burn (10% budget in 24h)
+      - alert: AvailabilitySLOSlowBurn
+        expr: |
+          (1 - (sum(rate(http_requests_total{status_code!~"5.."}[24h])) /
+          sum(rate(http_requests_total[24h])))) > 0.001
+        for: 1h
+        labels:
+          severity: warning
+        annotations:
+          summary: "Burning error budget slowly"
+```
+
+## Dashboard Template
+
+```json
+{
+  "title": "Service Health Dashboard",
+  "rows": [
+    {
+      "title": "Golden Signals",
+      "panels": [
+        {
+          "title": "Request Rate",
+          "query": "sum(rate(http_requests_total[5m]))",
+          "type": "graph"
+        },
+        {
+          "title": "Error Rate",
+          "query": "sum(rate(http_requests_total{status_code=~"5.."}[5m]))",
+          "type": "graph"
+        },
+        {
+          "title": "Latency (p50, p95, p99)",
+          "queries": [
+            "histogram_quantile(0.50, rate(http_request_duration_seconds_bucket[5m]))",
+            "histogram_quantile(0.95, rate(http_request_duration_seconds_bucket[5m]))",
+            "histogram_quantile(0.99, rate(http_request_duration_seconds_bucket[5m]))"
+          ]
+        },
+        {
+          "title": "Saturation (CPU, Memory)",
+          "queries": [
+            "rate(process_cpu_seconds_total[5m])",
+            "process_resident_memory_bytes"
+          ]
+        }
+      ]
+    },
+    {
+      "title": "SLO Tracking",
+      "panels": [
+        {
+          "title": "Error Budget Remaining",
+          "query": "1 - ((1 - 0.999) - (1 - slo_availability))"
+        }
+      ]
+    }
+  ]
+}
+```
+
+## What to Do When Alert Fires
+
+```markdown
+# Alert Response Guide
+
+## HighErrorRate
+
+**What it means:** More than 5% of requests are failing
+
+**First steps:**
+
+1. Check recent deployments (rollback if needed)
+2. Review error logs for patterns
+3. Check dependent services health
+4. Verify database connectivity
+
+**Escalation:** If not resolved in 15 min, page on-call lead
+
+## HighLatency
+
+**What it means:** p95 latency above 2 seconds
+
+**First steps:**
+
+1. Check database query performance
+2. Review recent code changes
+3. Check cache hit rates
+4. Look for slow external API calls
+
+**Temporary mitigation:**
+
+- Scale up instances
+- Enable aggressive caching
+
+## LowAvailability
+
+**What it means:** Availability below 99.5%
+
+**First steps:**
+
+1. Check infrastructure (AWS status page)
+2. Review load balancer health checks
+3. Check for DDoS activity
+4. Verify auto-scaling functioning
+```
+
+## Output Checklist
+
+- [ ] SLOs defined
+- [ ] Alert rules configured
+- [ ] Dashboards created
+- [ ] Runbooks linked
+- [ ] Response guides documented
+      ENDFILE

package/templates/performance/backend-latency-profiler-helper/ SKILL.md

@@ -0,0 +1,108 @@
+---
+name: backend-latency-profiler-helper
+description: Identifies API latency hotspots and bottlenecks with profiling tools, slow endpoint detection, suspected causes, and fix roadmap. Use for "latency profiling", "performance bottlenecks", "slow APIs", or "backend performance".
+---
+
+# Backend Latency Profiler Helper
+
+Find and fix API performance bottlenecks.
+
+## Slow Endpoint Detection
+
+```typescript
+// Middleware to track latency
+app.use((req, res, next) => {
+  const start = Date.now();
+
+  res.on("finish", () => {
+    const duration = Date.now() - start;
+
+    if (duration > 1000) {
+      logger.warn(
+        {
+          endpoint: req.path,
+          method: req.method,
+          duration_ms: duration,
+          userId: req.user?.id,
+        },
+        "Slow request detected"
+      );
+    }
+  });
+
+  next();
+});
+```
+
+## Top Slow Endpoints
+
+```sql
+-- Query from logs
+SELECT
+  endpoint,
+  AVG(duration_ms) as avg_ms,
+  MAX(duration_ms) as max_ms,
+  COUNT(*) as requests
+FROM request_logs
+WHERE created_at > NOW() - INTERVAL '1 day'
+GROUP BY endpoint
+HAVING AVG(duration_ms) > 500
+ORDER BY avg_ms DESC
+LIMIT 10;
+```
+
+## Suspected Causes
+
+```typescript
+interface PerformanceBottleneck {
+  endpoint: string;
+  avgLatency: number;
+  suspectedCauses: string[];
+  fixPriority: "high" | "medium" | "low";
+}
+
+const bottlenecks: PerformanceBottleneck[] = [
+  {
+    endpoint: "GET /api/users/:id",
+    avgLatency: 2500,
+    suspectedCauses: [
+      "N+1 query fetching user orders",
+      "No database index on user_id",
+      "Expensive JSON serialization",
+    ],
+    fixPriority: "high",
+  },
+];
+```
+
+## Fix Roadmap
+
+```markdown
+# Performance Fix Roadmap
+
+## Week 1: Quick Wins
+
+- [ ] Add database indexes
+- [ ] Enable response caching
+- [ ] Fix N+1 queries
+
+## Week 2: Medium Effort
+
+- [ ] Optimize slow database queries
+- [ ] Implement Redis caching
+- [ ] Add connection pooling
+
+## Week 3: Long-term
+
+- [ ] Database query optimization
+- [ ] Service decomposition
+- [ ] CDN integration
+```
+
+## Output Checklist
+
+- [ ] Slow endpoints identified
+- [ ] Causes analyzed
+- [ ] Fix roadmap created
+- [ ] Monitoring configured
+      ENDFILE