@vetala/vetala 0.1.0-beta

package/skill/react-native-skills/rules/ui-scrollview-content-inset.md

@@ -0,0 +1,45 @@
+---
+title: Use contentInset for Dynamic ScrollView Spacing
+impact: LOW
+impactDescription: smoother updates, no layout recalculation
+tags: scrollview, layout, contentInset, performance
+---
+
+## Use contentInset for Dynamic ScrollView Spacing
+
+When adding space to the top or bottom of a ScrollView that may change
+(keyboard, toolbars, dynamic content), use `contentInset` instead of padding.
+Changing `contentInset` doesn't trigger layout recalculation—it adjusts the
+scroll area without re-rendering content.
+
+**Incorrect (padding causes layout recalculation):**
+
+```tsx
+function Feed({ bottomOffset }: { bottomOffset: number }) {
+  return (
+    <ScrollView contentContainerStyle={{ paddingBottom: bottomOffset }}>
+      {children}
+    </ScrollView>
+  )
+}
+// Changing bottomOffset triggers full layout recalculation
+```
+
+**Correct (contentInset for dynamic spacing):**
+
+```tsx
+function Feed({ bottomOffset }: { bottomOffset: number }) {
+  return (
+    <ScrollView
+      contentInset={{ bottom: bottomOffset }}
+      scrollIndicatorInsets={{ bottom: bottomOffset }}
+    >
+      {children}
+    </ScrollView>
+  )
+}
+// Changing bottomOffset only adjusts scroll bounds
+```
+
+Use `scrollIndicatorInsets` alongside `contentInset` to keep the scroll
+indicator aligned. For static spacing that never changes, padding is fine.

package/skill/react-native-skills/rules/ui-styling.md

@@ -0,0 +1,87 @@
+---
+title: Modern React Native Styling Patterns
+impact: MEDIUM
+impactDescription: consistent design, smoother borders, cleaner layouts
+tags: styling, css, layout, shadows, gradients
+---
+
+## Modern React Native Styling Patterns
+
+Follow these styling patterns for cleaner, more consistent React Native code.
+
+**Always use `borderCurve: 'continuous'` with `borderRadius`:**
+
+```tsx
+// Incorrect
+{ borderRadius: 12 }
+
+// Correct – smoother iOS-style corners
+{ borderRadius: 12, borderCurve: 'continuous' }
+```
+
+**Use `gap` instead of margin for spacing between elements:**
+
+```tsx
+// Incorrect – margin on children
+<View>
+  <Text style={{ marginBottom: 8 }}>Title</Text>
+  <Text style={{ marginBottom: 8 }}>Subtitle</Text>
+</View>
+
+// Correct – gap on parent
+<View style={{ gap: 8 }}>
+  <Text>Title</Text>
+  <Text>Subtitle</Text>
+</View>
+```
+
+**Use `padding` for space within, `gap` for space between:**
+
+```tsx
+<View style={{ padding: 16, gap: 12 }}>
+  <Text>First</Text>
+  <Text>Second</Text>
+</View>
+```
+
+**Use `experimental_backgroundImage` for linear gradients:**
+
+```tsx
+// Incorrect – third-party gradient library
+<LinearGradient colors={['#000', '#fff']} />
+
+// Correct – native CSS gradient syntax
+<View
+  style={{
+    experimental_backgroundImage: 'linear-gradient(to bottom, #000, #fff)',
+  }}
+/>
+```
+
+**Use CSS `boxShadow` string syntax for shadows:**
+
+```tsx
+// Incorrect – legacy shadow objects or elevation
+{ shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1 }
+{ elevation: 4 }
+
+// Correct – CSS box-shadow syntax
+{ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }
+```
+
+**Avoid multiple font sizes – use weight and color for emphasis:**
+
+```tsx
+// Incorrect – varying font sizes for hierarchy
+<Text style={{ fontSize: 18 }}>Title</Text>
+<Text style={{ fontSize: 14 }}>Subtitle</Text>
+<Text style={{ fontSize: 12 }}>Caption</Text>
+
+// Correct – consistent size, vary weight and color
+<Text style={{ fontWeight: '600' }}>Title</Text>
+<Text style={{ color: '#666' }}>Subtitle</Text>
+<Text style={{ color: '#999' }}>Caption</Text>
+```
+
+Limiting font sizes creates visual consistency. Use `fontWeight` (bold/semibold)
+and grayscale colors for hierarchy instead.

package/skill/react-vite-guide/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: react-vite-guide
+description:
+  React 19 + Vite SPA development guidelines. Composition patterns, performance
+  optimization, and web interface best practices. Use when writing, reviewing, or
+  refactoring React components in Vite-based projects. Covers compound components,
+  state management, bundle optimization, re-render prevention, accessibility, and
+  UI patterns. Triggers on React component work, performance issues, code review,
+  or new feature development.
+---
+
+# React 19 + Vite Guide
+
+Comprehensive guidelines for building React 19 SPA applications with Vite. Combines composition patterns, performance optimization, and web interface best practices into a single reference optimized for AI agent workflows.
+
+## Tech Stack
+
+- **React 19** — `use()`, ref as prop, React Compiler support
+- **Vite** — `React.lazy()` + dynamic `import()`, env variables, HMR
+- **TypeScript** — strict mode recommended
+- **Pure SPA (CSR)** — no SSR, no hydration concerns
+
+## Capability Index
+
+### 1. Composition Patterns (references/composition-patterns.md)
+
+Component architecture and state management patterns for scalable React apps.
+
+| Priority | Category | Impact |
+|----------|----------|--------|
+| 1 | Component Architecture | HIGH |
+| 2 | State Management | MEDIUM |
+| 3 | Implementation Patterns | MEDIUM |
+| 4 | React 19 APIs | MEDIUM |
+
+Key topics:
+- Boolean prop proliferation vs composition alternatives
+- Compound components with shared context
+- State management decoupled from UI via providers
+- Generic context interfaces (state/actions/meta)
+- State lifted into providers for sibling access
+- Explicit component variants vs boolean modes
+- Children vs render props
+- React 19: `use()` replaces `useContext()`, ref as regular prop
+
+### 2. Performance Optimization (references/performance-optimization.md)
+
+Performance optimization patterns adapted for Vite + React 19 SPA. Next.js-specific patterns removed; Vite equivalents provided.
+
+| Priority | Category | Impact |
+|----------|----------|--------|
+| 1 | Async Optimization | CRITICAL |
+| 2 | Bundle Size | CRITICAL |
+| 3 | Client-Side Data Fetching | MEDIUM-HIGH |
+| 4 | Re-render Optimization | MEDIUM |
+| 5 | Rendering Performance | MEDIUM |
+| 6 | JavaScript Performance | LOW-MEDIUM |
+| 7 | Advanced Patterns | LOW |
+
+Key topics:
+- `Promise.all()` and dependency-based parallelization
+- `React.lazy()` + `Suspense` for code splitting (Vite)
+- Barrel file import cost and direct imports
+- Hover/focus preloading for perceived speed
+- SWR for client-side data deduplication
+- Functional `setState`, lazy state initialization
+- `useTransition` for non-urgent updates
+- `content-visibility: auto` for long lists
+- `useRef` for transient values
+- Module-level caching patterns
+
+### 3. Web Interface (references/web-interface.md)
+
+UI/UX patterns for accessibility, forms, animation, performance, and content quality.
+
+| Category | Focus |
+|----------|-------|
+| Accessibility | ARIA, semantic HTML, keyboard handlers |
+| Focus States | `focus-visible`, no bare `outline-none` |
+| Forms | `autocomplete`, correct `type`, paste allowed |
+| Animation | `prefers-reduced-motion`, compositor-only props |
+| Typography | Ellipsis, curly quotes, `tabular-nums` |
+| Content Handling | Truncation, empty states, long content |
+| Images | Explicit dimensions, lazy loading |
+| Performance | Virtualization, no layout reads in render |
+| Navigation & State | URL reflects state, deep-linkable UI |
+| Touch & Interaction | `touch-action`, `overscroll-behavior` |
+| Dark Mode | `color-scheme`, `theme-color` meta |
+| Locale & i18n | `Intl.DateTimeFormat`, `Intl.NumberFormat` |
+
+### 4. Vite-Specific Patterns (references/vite-specific.md)
+
+Vite-specific configuration, conventions, and optimization patterns.
+
+Key topics:
+- Dynamic imports and code splitting with Vite
+- Environment variables (`import.meta.env`)
+- Vite plugin ecosystem (React SWC/Babel)
+- Build optimization (`manualChunks`, `rollupOptions`)
+- Alias and path resolution
+- CSS Modules / Tailwind CSS integration