skillstore-cli 1.0.0

package/data/shared/framework/skills/frontend-development/assets/sample-output.md

@@ -0,0 +1,110 @@
+# Sample Output: Data Table Component Plan
+
+## Component: DataTable with Pagination, Sorting, and Filtering
+
+### Requirements
+- Display tabular data with configurable columns
+- Client-side sorting (click column header to toggle asc/desc)
+- Text filter per column + global search
+- Pagination with configurable page size (10, 25, 50)
+- Responsive: horizontal scroll on mobile, stacked cards below 480px
+- Accessible: keyboard navigation, ARIA roles, screen reader support
+
+### Component Tree
+
+```
+<DataTable>
+  ├── <TableToolbar>
+  │   ├── <GlobalSearch />
+  │   ├── <ColumnFilter />
+  │   └── <PageSizeSelector />
+  ├── <TableHeader>
+  │   └── <SortableColumn /> (per column)
+  ├── <TableBody>
+  │   └── <TableRow /> (per visible row)
+  │       └── <TableCell /> (per column)
+  ├── <TableFooter>
+  │   └── <Pagination />
+  └── <EmptyState /> (when no results)
+```
+
+### Props Interface
+
+```typescript
+interface DataTableProps<T> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  defaultPageSize?: number;
+  defaultSort?: { key: keyof T; direction: 'asc' | 'desc' };
+  onRowClick?: (row: T) => void;
+  loading?: boolean;
+  emptyMessage?: string;
+}
+
+interface ColumnDef<T> {
+  key: keyof T;
+  header: string;
+  sortable?: boolean;
+  filterable?: boolean;
+  render?: (value: T[keyof T], row: T) => ReactNode;
+  width?: string;
+}
+```
+
+### State Management
+
+```typescript
+// All state is local — no global store needed
+const [currentPage, setCurrentPage] = useState(1);
+const [pageSize, setPageSize] = useState(defaultPageSize);
+const [sortConfig, setSortConfig] = useState(defaultSort);
+const [filters, setFilters] = useState<Record<string, string>>({});
+const [globalSearch, setGlobalSearch] = useState('');
+
+// Derived data (memoized)
+const filteredData = useMemo(() => applyFilters(data, filters, globalSearch), [data, filters, globalSearch]);
+const sortedData = useMemo(() => applySort(filteredData, sortConfig), [filteredData, sortConfig]);
+const paginatedData = useMemo(() => paginate(sortedData, currentPage, pageSize), [sortedData, currentPage, pageSize]);
+```
+
+### Performance Considerations
+
+- **Virtual scrolling**: Enable when `data.length > 500` — use `@tanstack/react-virtual`
+- **Debounced search**: `globalSearch` input debounced at 300ms
+- **Memoized rows**: `React.memo(TableRow)` with stable `key` from row ID
+- **Stable callbacks**: `useCallback` for `onSort`, `onFilter`, `onPageChange`
+
+### Accessibility
+
+- `<table role="grid">` with `aria-sort` on sortable columns
+- `<th scope="col">` for column headers
+- Keyboard: Enter/Space to sort, Tab to navigate, arrow keys within cells
+- `aria-live="polite"` region announcing "Showing X of Y results"
+- Focus management: return focus to table after filter/sort changes
+
+### Testing Plan
+
+| Test | Type | Tool |
+|------|------|------|
+| Sort toggles correctly | Unit | Vitest |
+| Filter reduces visible rows | Component | Testing Library |
+| Pagination shows correct slice | Component | Testing Library |
+| Empty state renders | Component | Testing Library |
+| Keyboard navigation works | Component | Testing Library |
+| Responsive layout switches | Visual | Chromatic |
+| 10,000 rows renders smoothly | Performance | Lighthouse |
+
+### File Structure
+
+```
+components/DataTable/
+  ├── DataTable.tsx
+  ├── DataTable.module.css
+  ├── DataTable.test.tsx
+  ├── TableHeader.tsx
+  ├── TableRow.tsx
+  ├── Pagination.tsx
+  ├── GlobalSearch.tsx
+  ├── types.ts
+  └── utils.ts (applyFilters, applySort, paginate)
+```

package/data/shared/framework/skills/frontend-development/references/component-patterns.md

@@ -0,0 +1,112 @@
+# Component Patterns
+
+## Design Principles
+
+### Single Responsibility
+Each component does one thing. If a component handles data fetching, transformation, AND rendering — split it.
+
+```
+Bad:  <UserDashboard />  (fetches users, formats dates, renders table, handles pagination)
+Good: <UserDashboard /> → <UserTable data={users} /> + <Pagination /> + useUsers() hook
+```
+
+### Composition Over Inheritance
+Never extend component classes. Compose behavior through children, slots, hooks, or higher-order patterns.
+
+### Props Down, Events Up
+Data flows one direction. Children communicate upward through callbacks (React), events (Vue), or outputs (Angular).
+
+## React Patterns
+
+### Custom Hooks
+Extract reusable logic into hooks. Every hook should have a single purpose.
+
+```typescript
+// Data fetching hook with loading/error states
+function useApi<T>(url: string) {
+  const [data, setData] = useState<T | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const [loading, setLoading] = useState(true);
+  // ... fetch logic
+  return { data, error, loading, refetch };
+}
+```
+
+### Context for Cross-Cutting Concerns
+Use context for theme, auth, locale — NOT for frequently changing state. Context changes re-render all consumers.
+
+### Render Props / Children as Function
+When a component needs to share internal state with flexible rendering:
+```typescript
+<DataLoader url="/api/users">
+  {({ data, loading }) => loading ? <Spinner /> : <UserList users={data} />}
+</DataLoader>
+```
+
+## Vue Patterns
+
+### Composition API
+Prefer `setup()` / `<script setup>` over Options API for new code. Group logic by feature, not by option type.
+
+### Composables
+Vue equivalent of custom hooks. Prefix with `use`:
+```typescript
+// useAuth.ts — encapsulates auth state and methods
+export function useAuth() {
+  const user = ref<User | null>(null);
+  const login = async (credentials: Credentials) => { /* ... */ };
+  const logout = async () => { /* ... */ };
+  return { user, login, logout };
+}
+```
+
+### Provide/Inject
+Use for dependency injection across deep component trees (similar to React Context).
+
+## State Management Strategies
+
+Choose the simplest option that works:
+
+| Scope | Solution | When |
+|-------|----------|------|
+| Single component | `useState` / `ref()` | Form inputs, toggles, local UI |
+| Parent-child | Props + callbacks | Shared between 2-3 components |
+| Subtree | Context / provide-inject | Theme, auth, shared config |
+| Global | Zustand / Pinia / NgRx | Cart, notifications, complex flows |
+| Server | React Query / SWR / Apollo | API data with cache + revalidation |
+
+**Rule of thumb**: If you reach for global state, ask "can server state (React Query/SWR) handle this instead?"
+
+## Error Boundaries
+
+Wrap major UI sections in error boundaries. Never let one broken widget crash the entire page.
+
+```typescript
+<ErrorBoundary fallback={<ErrorPanel />}>
+  <DashboardCharts />
+</ErrorBoundary>
+```
+
+Place boundaries at: route level, widget level, and around third-party components.
+
+## Form Handling
+
+- Use a form library (React Hook Form, Formik, VeeValidate) for complex forms
+- Validate on blur for individual fields, on submit for the full form
+- Show inline errors next to the field, summary errors at the top
+- Disable submit button during submission, show loading indicator
+- Handle server validation errors by mapping to field-level messages
+
+## Data Fetching Patterns
+
+### SWR / React Query / Apollo
+- Deduplicate identical requests automatically
+- Cache responses and revalidate in background
+- Handle loading, error, and stale states out of the box
+- Support optimistic updates for better UX
+
+### Key Practices
+- Define query keys consistently (e.g., `['users', { page, filter }]`)
+- Set appropriate `staleTime` (how long data is fresh) and `cacheTime` (how long to keep unused data)
+- Use `prefetchQuery` for anticipated navigation
+- Implement optimistic updates for mutations that need instant feedback

package/data/shared/framework/skills/frontend-development/references/performance-guide.md

@@ -0,0 +1,169 @@
+# Frontend Performance Guide
+
+## Core Web Vitals
+
+### LCP (Largest Contentful Paint) — Target: < 2.5s
+- Preload critical resources (`<link rel="preload">` for hero images, fonts)
+- Server-side render or statically generate above-the-fold content
+- Avoid render-blocking CSS/JS — inline critical CSS, defer the rest
+- Use CDN for static assets with edge caching
+
+### FID / INP (First Input Delay / Interaction to Next Paint) — Target: < 100ms / < 200ms
+- Break long tasks (> 50ms) into smaller chunks with `requestIdleCallback` or `scheduler.yield()`
+- Move heavy computation to Web Workers
+- Minimize main-thread JavaScript during page load
+- Lazy-load non-critical third-party scripts
+
+### CLS (Cumulative Layout Shift) — Target: < 0.1
+- Always set `width` and `height` on images and videos (or use `aspect-ratio`)
+- Reserve space for dynamic content (ads, embeds, lazy-loaded sections)
+- Avoid inserting content above existing content after load
+- Use `font-display: swap` with proper font fallback metrics
+
+## Bundle Size Optimization
+
+### Code Splitting
+```typescript
+// Route-level splitting (React)
+const Dashboard = lazy(() => import('./pages/Dashboard'));
+
+// Feature-level splitting
+const HeavyChart = lazy(() => import('./components/HeavyChart'));
+```
+
+### Tree Shaking
+- Use ES modules (`import/export`), not CommonJS (`require`)
+- Import specific functions: `import { debounce } from 'lodash-es'` not `import _ from 'lodash'`
+- Mark packages as side-effect-free in `package.json`: `"sideEffects": false`
+
+### Bundle Analysis
+- Run `npx webpack-bundle-analyzer stats.json` or `npx source-map-explorer build/static/js/*.js`
+- Look for: duplicate dependencies, large libraries with small usage, unintended polyfills
+
+### Budget Targets
+| Resource | Budget |
+|----------|--------|
+| Total JS (compressed) | < 200 KB |
+| Total CSS (compressed) | < 50 KB |
+| Largest single chunk | < 100 KB |
+| Third-party JS | < 100 KB |
+
+## Rendering Optimization
+
+### React
+- `React.memo()` for components that render often with same props
+- `useMemo()` for expensive computed values (not for everything)
+- `useCallback()` for callbacks passed to memoized children
+- Use `key` prop correctly — stable, unique identifiers, never array index for dynamic lists
+
+### Virtual Lists
+For lists > 100 items, use virtualization:
+- `react-window` or `@tanstack/react-virtual`
+- Only renders visible items + small buffer
+- Reduces DOM nodes from thousands to dozens
+
+### Avoid
+- Inline object/array literals in JSX props (creates new reference every render)
+- Anonymous functions in JSX when passed to memoized children
+- Premature optimization — measure first with React DevTools Profiler
+
+## Image Optimization
+
+### Format Selection
+| Format | Use Case |
+|--------|----------|
+| WebP | General use, 25-35% smaller than JPEG |
+| AVIF | Best compression, limited browser support — use as first choice with fallback |
+| SVG | Icons, logos, illustrations (scalable, tiny file size) |
+| PNG | Screenshots, images requiring transparency |
+
+### Implementation
+```html
+<picture>
+  <source srcset="hero.avif" type="image/avif" />
+  <source srcset="hero.webp" type="image/webp" />
+  <img src="hero.jpg" alt="..." loading="lazy" decoding="async" width="800" height="400" />
+</picture>
+```
+
+- Use `loading="lazy"` for below-the-fold images
+- Use `fetchpriority="high"` for LCP image
+- Serve responsive sizes with `srcset` and `sizes` attributes
+- Compress images in CI pipeline (sharp, squoosh)
+
+## CSS Performance
+
+### Critical CSS
+- Inline above-the-fold CSS in `<head>` (< 14 KB)
+- Load remaining CSS asynchronously: `<link rel="preload" href="styles.css" as="style">`
+
+### CSS-in-JS Trade-offs
+| Approach | Pros | Cons |
+|----------|------|------|
+| CSS Modules | Zero runtime, scoped | Build step required |
+| Tailwind | Tiny production CSS, utility-first | Learning curve, verbose JSX |
+| styled-components | Dynamic styles, colocation | Runtime cost, larger bundle |
+
+**Recommendation**: CSS Modules or Tailwind for performance-critical apps. CSS-in-JS is fine for internal tools.
+
+## Caching Strategies
+
+### HTTP Cache Headers
+- Static assets (JS/CSS/images with hash): `Cache-Control: public, max-age=31536000, immutable`
+- HTML: `Cache-Control: no-cache` (always revalidate)
+- API responses: `Cache-Control: private, max-age=0, stale-while-revalidate=60`
+
+### Service Workers
+- Cache app shell for offline support
+- Use `stale-while-revalidate` strategy for API data
+- Precache critical routes during install phase
+- Version your cache and clean up old versions
+
+## Data Fetching Cleanup
+
+### AbortController for fetch requests
+
+Cancel in-flight requests when component unmounts or dependencies change:
+
+```typescript
+useEffect(() => {
+  const controller = new AbortController();
+
+  async function fetchData() {
+    try {
+      const res = await fetch('/api/data', { signal: controller.signal });
+      const data = await res.json();
+      setData(data);
+    } catch (err) {
+      if (err instanceof DOMException && err.name === 'AbortError') return; // Expected
+      setError(err);
+    }
+  }
+
+  fetchData();
+  return () => controller.abort();
+}, [dependency]);
+```
+
+**With TanStack Query**: Abort is handled automatically — no manual cleanup needed.
+
+### Timer cleanup
+
+Always clear intervals and timeouts on unmount:
+
+```typescript
+useEffect(() => {
+  const id = setInterval(() => refetch(), 30_000);
+  return () => clearInterval(id);
+}, []);
+```
+
+## Measurement Tools
+
+| Tool | Purpose |
+|------|---------|
+| Lighthouse CI | Automated audits in CI pipeline |
+| WebPageTest | Real-world loading waterfall analysis |
+| Chrome DevTools Performance | Flame chart, main thread analysis |
+| `web-vitals` library | Collect real user metrics (RUM) |
+| Bundle Analyzer | Identify large dependencies |