nurosys-agents 2.0.0

package/.agent/frontend/skills/react-quality-review/rules/rerender-no-inline-components.md

@@ -0,0 +1,82 @@
+---
+title: Don't Define Components Inside Components
+impact: HIGH
+impactDescription: prevents remount on every render
+tags: rerender, components, remount, performance
+---
+
+## Don't Define Components Inside Components
+
+**Impact: HIGH (prevents remount on every render)**
+
+Defining a component inside another component creates a new component type on every render. React sees a different component each time and fully remounts it, destroying all state and DOM.
+
+A common reason developers do this is to access parent variables without passing props. Always pass props instead.
+
+**Incorrect (remounts on every render):**
+
+```tsx
+function UserProfile({ user, theme }) {
+  // Defined inside to access `theme` - BAD
+  const Avatar = () => (
+    <img
+      src={user.avatarUrl}
+      className={theme === 'dark' ? 'avatar-dark' : 'avatar-light'}
+    />
+  )
+
+  // Defined inside to access `user` - BAD
+  const Stats = () => (
+    <div>
+      <span>{user.followers} followers</span>
+      <span>{user.posts} posts</span>
+    </div>
+  )
+
+  return (
+    <div>
+      <Avatar />
+      <Stats />
+    </div>
+  )
+}
+```
+
+Every time `UserProfile` renders, `Avatar` and `Stats` are new component types. React unmounts the old instances and mounts new ones, losing any internal state, running effects again, and recreating DOM nodes.
+
+**Correct (pass props instead):**
+
+```tsx
+function Avatar({ src, theme }: { src: string; theme: string }) {
+  return (
+    <img
+      src={src}
+      className={theme === 'dark' ? 'avatar-dark' : 'avatar-light'}
+    />
+  )
+}
+
+function Stats({ followers, posts }: { followers: number; posts: number }) {
+  return (
+    <div>
+      <span>{followers} followers</span>
+      <span>{posts} posts</span>
+    </div>
+  )
+}
+
+function UserProfile({ user, theme }) {
+  return (
+    <div>
+      <Avatar src={user.avatarUrl} theme={theme} />
+      <Stats followers={user.followers} posts={user.posts} />
+    </div>
+  )
+}
+```
+
+**Symptoms of this bug:**
+- Input fields lose focus on every keystroke
+- Animations restart unexpectedly
+- `useEffect` cleanup/setup runs on every parent render
+- Scroll position resets inside the component

package/.agent/frontend/skills/react-quality-review/rules/rerender-simple-expression-in-memo.md

@@ -0,0 +1,35 @@
+---
+title: Do not wrap a simple expression with a primitive result type in useMemo
+impact: LOW-MEDIUM
+impactDescription: wasted computation on every render
+tags: rerender, useMemo, optimization
+---
+
+## Do not wrap a simple expression with a primitive result type in useMemo
+
+When an expression is simple (few logical or arithmetical operators) and has a primitive result type (boolean, number, string), do not wrap it in `useMemo`.
+Calling `useMemo` and comparing hook dependencies may consume more resources than the expression itself.
+
+**Incorrect:**
+
+```tsx
+function Header({ user, notifications }: Props) {
+  const isLoading = useMemo(() => {
+    return user.isLoading || notifications.isLoading
+  }, [user.isLoading, notifications.isLoading])
+
+  if (isLoading) return <Skeleton />
+  // return some markup
+}
+```
+
+**Correct:**
+
+```tsx
+function Header({ user, notifications }: Props) {
+  const isLoading = user.isLoading || notifications.isLoading
+
+  if (isLoading) return <Skeleton />
+  // return some markup
+}
+```

package/.agent/frontend/skills/react-quality-review/rules/rerender-transitions.md

@@ -0,0 +1,40 @@
+---
+title: Use Transitions for Non-Urgent Updates
+impact: MEDIUM
+impactDescription: maintains UI responsiveness
+tags: rerender, transitions, startTransition, performance
+---
+
+## Use Transitions for Non-Urgent Updates
+
+Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.
+
+**Incorrect (blocks UI on every scroll):**
+
+```tsx
+function ScrollTracker() {
+  const [scrollY, setScrollY] = useState(0)
+  useEffect(() => {
+    const handler = () => setScrollY(window.scrollY)
+    window.addEventListener('scroll', handler, { passive: true })
+    return () => window.removeEventListener('scroll', handler)
+  }, [])
+}
+```
+
+**Correct (non-blocking updates):**
+
+```tsx
+import { startTransition } from 'react'
+
+function ScrollTracker() {
+  const [scrollY, setScrollY] = useState(0)
+  useEffect(() => {
+    const handler = () => {
+      startTransition(() => setScrollY(window.scrollY))
+    }
+    window.addEventListener('scroll', handler, { passive: true })
+    return () => window.removeEventListener('scroll', handler)
+  }, [])
+}
+```

package/.agent/frontend/skills/react-quality-review/rules/rerender-use-ref-transient-values.md

@@ -0,0 +1,73 @@
+---
+title: Use useRef for Transient Values
+impact: MEDIUM
+impactDescription: avoids unnecessary re-renders on frequent updates
+tags: rerender, useref, state, performance
+---
+
+## Use useRef for Transient Values
+
+When a value changes frequently and you don't want a re-render on every update (e.g., mouse trackers, intervals, transient flags), store it in `useRef` instead of `useState`. Keep component state for UI; use refs for temporary DOM-adjacent values. Updating a ref does not trigger a re-render.
+
+**Incorrect (renders every update):**
+
+```tsx
+function Tracker() {
+  const [lastX, setLastX] = useState(0)
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => setLastX(e.clientX)
+    window.addEventListener('mousemove', onMove)
+    return () => window.removeEventListener('mousemove', onMove)
+  }, [])
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: lastX,
+        width: 8,
+        height: 8,
+        background: 'black',
+      }}
+    />
+  )
+}
+```
+
+**Correct (no re-render for tracking):**
+
+```tsx
+function Tracker() {
+  const lastXRef = useRef(0)
+  const dotRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      lastXRef.current = e.clientX
+      const node = dotRef.current
+      if (node) {
+        node.style.transform = `translateX(${e.clientX}px)`
+      }
+    }
+    window.addEventListener('mousemove', onMove)
+    return () => window.removeEventListener('mousemove', onMove)
+  }, [])
+
+  return (
+    <div
+      ref={dotRef}
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: 8,
+        height: 8,
+        background: 'black',
+        transform: 'translateX(0px)',
+      }}
+    />
+  )
+}
+```

package/.agent/frontend/skills/refactor-safely/SKILL.md

@@ -0,0 +1,29 @@
+---
+name: refactor-safely
+description: Plan and execute safe refactoring using dependency analysis
+disable-model-invocation: true
+---
+
+## Refactor Safely
+
+Use the knowledge graph to plan and execute refactoring with confidence.
+
+### Steps
+
+1. Use `refactor_tool` with mode="suggest" for community-driven refactoring suggestions.
+2. Use `refactor_tool` with mode="dead_code" to find unreferenced code.
+3. For renames, use `refactor_tool` with mode="rename" to preview all affected locations.
+4. Use `apply_refactor_tool` with the refactor_id to apply renames.
+5. After changes, run `detect_changes` to verify the refactoring impact.
+
+### Safety Checks
+
+- Always preview before applying (rename mode gives you an edit list).
+- Check `get_impact_radius` before major refactors.
+- Use `get_affected_flows` to ensure no critical paths are broken.
+- Run `find_large_functions` to identify decomposition targets.
+
+## Token Efficiency Rules
+- ALWAYS start with `get_minimal_context(task="<your task>")` before any other graph tool.
+- Use `detail_level="minimal"` on all calls. Only escalate to "standard" when minimal is insufficient.
+- Target: complete any review/debug/refactor task in ≤5 tool calls and ≤800 total output tokens.

package/.agent/frontend/skills/vuexy-component-guide/SKILL.md

@@ -0,0 +1,369 @@
+---
+name: vuexy-component-guide
+description: >-
+  Comprehensive guide to all MUI components used in the Vuexy admin template with MUI v7. Covers 60+ MUI Material and Lab components, 5 custom wrappers (CustomTextField, CustomAvatar, CustomChip, CustomBadge, CustomTabList), and form-building patterns with react-hook-form + valibot. Use when building UI components, creating forms with validation, designing dialogs, drawers, tables, or steppers, or when the user asks about MUI components, form patterns, component configuration, custom wrappers, or how to build interfaces in this Vuexy Next.js project.
+disable-model-invocation: true
+---
+
+# Vuexy MUI Component Guide
+
+This skill covers **every MUI component** used in the Vuexy admin template, including custom wrappers in `@core/components/mui/`, form patterns, and layout guidelines.
+
+## Quick Decision Flow
+
+1. **Building a form?** → See [Form Patterns](#form-patterns) below
+2. **Displaying data in a table?** → See [Data Display](#data-display)
+3. **Showing a dialog/drawer?** → See [Overlays](#overlays)
+4. **Need a card with stats?** → See [Card Statistics Components](#card-statistics-components)
+5. **Navigation/tabs?** → See [Navigation](#navigation)
+
+## Core Rule: Use Custom Wrappers
+
+Vuexy provides styled wrappers over standard MUI components. **Always prefer the custom versions** from `@core/components/mui/`:
+
+| Custom Component | Wraps | Import Path | Added Props |
+|-----------------|-------|-------------|-------------|
+| `CustomTextField` | `TextField` | `@core/components/mui/TextField` | `size='small'` (default), `variant='filled'`, themed borders/colors |
+| `CustomAvatar` | `Avatar` | `@core/components/mui/Avatar` | `color`, `skin` (`'filled'`, `'light'`, `'light-static'`), `size` |
+| `CustomBadge` | `Badge` | `@core/components/mui/Badge` | `tonal` (`'true'` / `'false'`) for light bg badges |
+| `CustomChip` | `Chip` | `@core/components/mui/Chip` | `round` (`'true'` / `'false'`) for pill shape |
+| `CustomTabList` | `TabList` (@mui/lab) | `@core/components/mui/TabList` | `color`, `pill` (`'true'` / `'false'`) for pill-style tabs |
+| `CustomIconButton` | `Button` (styled) | `@core/components/mui/IconButton` | icon font sizes (S:20px, M:22px, L:24px), default color from `action.active` |
+| `CustomAutocomplete` | `Autocomplete` | `@core/components/mui/Autocomplete` | Paper slot styling, generic type support |
+
+### All other MUI components → import directly from `@mui/material/ComponentName`
+
+---
+
+## Form Patterns
+
+### Standard Form Template
+
+```tsx
+'use client'
+
+import { Controller, useForm } from 'react-hook-form'
+import { valibotResolver } from '@hookform/resolvers/valibot'
+import { object, string, nonEmpty, minLength, pipe, email } from 'valibot'
+import Grid from '@mui/material/Grid'
+import Button from '@mui/material/Button'
+import FormHelperText from '@mui/material/FormHelperText'
+import FormLabel from '@mui/material/FormLabel'
+import Radio from '@mui/material/Radio'
+import RadioGroup from '@mui/material/RadioGroup'
+import Checkbox from '@mui/material/Checkbox'
+import Switch from '@mui/material/Switch'
+import MenuItem from '@mui/material/MenuItem'
+import CustomTextField from '@core/components/mui/TextField'
+
+const schema = object({
+  name: pipe(string(), nonEmpty('Required'), minLength(1)),
+  email: pipe(string(), nonEmpty('Required'), email('Invalid email')),
+  password: pipe(string(), nonEmpty('Required'), minLength(8, 'Min 8 chars')),
+  country: pipe(string(), nonEmpty('Required')),
+  agree: pipe(string(), nonEmpty('Required'))
+})
+
+type FormValues = {
+  name: string
+  email: string
+  password: string
+  country: string
+  agree: string
+}
+
+export default function MyForm() {
+  const {
+    control,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormValues>({
+    resolver: valibotResolver(schema),
+    defaultValues: { name: '', email: '', password: '', country: '', agree: '' }
+  })
+
+  const onSubmit = (data: FormValues) => {
+    // handle submission
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Grid container spacing={6}>
+        {/* Text Input */}
+        <Grid size={{ xs: 12, sm: 6 }}>
+          <Controller
+            name='name'
+            control={control}
+            rules={{ required: true }}
+            render={({ field }) => (
+              <CustomTextField
+                {...field}
+                fullWidth
+                label='Name'
+                placeholder='John Doe'
+                {...(errors.name && { error: true, helperText: errors.name.message })}
+              />
+            )}
+          />
+        </Grid>
+
+        {/* Select Dropdown */}
+        <Grid size={{ xs: 12, sm: 6 }}>
+          <Controller
+            name='country'
+            control={control}
+            rules={{ required: true }}
+            render={({ field }) => (
+              <CustomTextField select fullWidth label='Country' {...field} error={Boolean(errors.country)}>
+                <MenuItem value=''>Select Country</MenuItem>
+                <MenuItem value='US'>United States</MenuItem>
+                <MenuItem value='UK'>United Kingdom</MenuItem>
+              </CustomTextField>
+            )}
+          />
+          {errors.country && <FormHelperText error>{errors.country.message}</FormHelperText>}
+        </Grid>
+
+        {/* Radio Group */}
+        <Grid size={{ xs: 12 }}>
+          <FormControl error={Boolean(errors.agree)}>
+            <FormLabel>Agreement</FormLabel>
+            <Controller
+              name='agree'
+              control={control}
+              rules={{ required: true }}
+              render={({ field }) => (
+                <RadioGroup row {...field}>
+                  <FormControlLabel value='yes' control={<Radio />} label='Yes' />
+                  <FormControlLabel value='no' control={<Radio />} label='No' />
+                </RadioGroup>
+              )}
+            />
+            {errors.agree && <FormHelperText error>This field is required</FormHelperText>}
+          </FormControl>
+        </Grid>
+
+        {/* Submit / Reset */}
+        <Grid size={{ xs: 12 }} className='flex gap-4'>
+          <Button variant='contained' type='submit'>Submit</Button>
+          <Button variant='tonal' color='secondary' type='reset' onClick={() => reset()}>Reset</Button>
+        </Grid>
+      </Grid>
+    </form>
+  )
+}
+```
+
+### Input Patterns Reference
+
+| Input Type | Props on `CustomTextField`/Wrapper | Additional Components |
+|-----------|---------------------------|----------------------|
+| Text | `fullWidth`, `label`, `placeholder` | — |
+| Email | `type='email'` | — |
+| Password | `type={isPasswordShown ? 'text' : 'password'}` + `InputAdornment` with toggle icon | `IconButton`, `InputAdornment` |
+| Select | `select` + `<MenuItem>` children | `MenuItem` |
+| Multi-select | `select` + `slotProps={{ select: { multiple: true } }}` | `MenuItem` |
+| Textarea | `multiline`, `rows={4}` | — |
+| Date | Custom wrapper with `AppReactDatepicker` + `customInput={CustomTextField}` | `AppReactDatepicker` from `@/libs/styles/AppReactDatepicker` |
+| Autocomplete | `CustomAutocomplete` wrapping `CustomTextField` via `renderInput` | `CustomAutocomplete` from `@core/components/mui/Autocomplete` |
+| Radio | `Controller` + `RadioGroup` + `FormControlLabel` + `Radio` | `FormLabel`, `FormControl`, `FormHelperText` |
+| Checkbox | `FormControlLabel` + `Checkbox` | `FormControl`, `FormHelperText` |
+| Switch | `FormControlLabel` + `Switch` | — |
+
+---
+
+## Layout Patterns
+
+### Page Layout (Grid-based)
+
+```tsx
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+
+// Page header
+<Typography variant='h4'>Page Title</Typography>
+<Typography variant='body2'>Page description</Typography>
+
+// Card grid
+<Grid container spacing={6}>
+  <Grid size={{ xs: 12, md: 6 }}>
+    <Card>...</Card>
+  </Grid>
+  <Grid size={{ xs: 12, md: 6 }}>
+    <Card>...</Card>
+  </Grid>
+</Grid>
+```
+
+### Responsive Breakpoints
+
+Use MUI sizes in `Grid`: `xs`, `sm`, `md`, `lg`, `xl`
+- Common patterns: `{ xs: 12, sm: 6 }`, `{ xs: 12, md: 4 }`, `{ xs: 12, md: 6 }`
+
+---
+
+## Component Catalog (Quick Reference)
+
+See [reference.md](reference.md) for complete component documentation with all configuration options.
+
+### Summary by Category
+
+**Inputs** — `CustomTextField`, `CustomAutocomplete` (searchable dropdowns), `Autocomplete`, `Select`, `MenuItem`, `InputAdornment`, `InputBase`, `FormControl`, `FormHelperText`, `FormLabel`, `FormGroup`, `FormControlLabel`, `InputLabel`, `Checkbox`, `Radio`, `RadioGroup`, `Switch`, `Rating`
+
+**Data Display** — `Typography`, `Card`, `CardContent`, `CardHeader`, `CardActions`, `CardMedia`, `Chip` (via `CustomChip`), `Avatar` (via `CustomAvatar`), `AvatarGroup`, `Badge` (via `CustomBadge`), `List`, `ListItem`, `ListItemButton`, `ListItemText`, `ListItemIcon`, `ListItemAvatar`, `Divider`, `Table`, `TableBody`, `TableCell`, `TableContainer`, `TableHead`, `TableRow`, `TablePagination`
+
+**Feedback** — `Alert`, `AlertTitle`, `CircularProgress`, `LinearProgress`, `Backdrop`, `Snackbar` (though project uses `react-toastify`)
+
+**Navigation** — `Button`, `ButtonGroup`, `Breadcrumbs`, `Tabs` (`TabContext`, `TabPanel`, `CustomTabList`), `Tab`, `Step`, `Stepper`, `StepLabel`, `StepContent`, `StepIcon`, `Pagination`
+
+**Overlays** — `Dialog`, `DialogTitle`, `DialogContent`, `DialogActions`, `Drawer`, `Popper`, `Fade`, `Grow`, `Zoom`, `Collapse`, `Menu`, `MenuList`, `MenuItem`, `Tooltip`, `ClickAwayListener`, `Paper`
+
+**Layout** — `Grid`, `Box`, `Stack`, `CssBaseline`, `Divider`
+
+**Surface** — `Card`, `CardActions`, `CardContent`, `CardHeader`, `CardMedia`, `Paper`, `Accordion`, `AccordionSummary`, `AccordionDetails`
+
+**Lab Components** — `TabContext`, `TabList` (CustomTabList), `TabPanel`, `Timeline`, `TimelineItem`, `TimelineSeparator`, `TimelineConnector`, `TimelineContent`, `TimelineDot`
+
+**Actions** — `Button` (text + icons), `CustomIconButton` (icon-only), `ButtonGroup`
+
+---
+
+## Dialog / Drawer Patterns
+
+### Standard Dialog
+
+```tsx
+'use client'
+
+import { useState } from 'react'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid'
+import CustomTextField from '@core/components/mui/TextField'
+import DialogCloseButton from '@/components/dialogs/DialogCloseButton'
+
+export default function MyDialog() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button variant='contained' onClick={() => setOpen(true)}>Open Dialog</Button>
+      <Dialog open={open} onClose={() => setOpen(false)} fullWidth maxWidth='sm'>
+        <DialogTitle>Dialog Title</DialogTitle>
+        <DialogCloseButton onClick={() => setOpen(false)} />
+        <DialogContent>
+          {/* Form or content */}
+        </DialogContent>
+        <DialogActions className='dialog-actions-dense'>
+          <Button variant='tonal' color='secondary' onClick={() => setOpen(false)}>Cancel</Button>
+          <Button variant='contained'>Submit</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
+```
+
+### Drawer (Slide-in Panel)
+
+```tsx
+import Drawer from '@mui/material/Drawer'
+
+<Drawer
+  open={open}
+  anchor='right'
+  variant='temporary'
+  onClose={() => setOpen(false)}
+  ModalProps={{ keepMounted: true }}
+  sx={{ '& .MuiDrawer-paper': { width: { xs: 300, sm: 400 } } }}
+>
+  {/* Drawer content */}
+</Drawer>
+```
+
+---
+
+## Button Variants
+
+| Variant | Usage | Example |
+|---------|-------|---------|
+| `contained` | Primary action | Submit, Save, Create |
+| `tonal` (Vuexy custom) | Secondary action | Cancel, Reset, Back |
+| `outlined` | Tertiary action | — |
+| `text` | Least prominent action | — |
+
+### CustomIconButton
+
+Import from `@core/components/mui/IconButton`. Styled `Button` optimized for icon-only actions.
+
+- **Icon sizes auto-scale**: `small` = 20px, `medium` = 22px, `large` = 24px
+- **Default color**: `var(--mui-palette-action-active)` (neutral gray) — no variant-specific color unless `color` prop set
+- **No ripple** when `themeConfig.disableRipple` is true
+- **Use when**: close buttons, menu toggles, edit/delete icon actions
+- **vs `@mui/material/IconButton`**: This project uses `CustomIconButton` which extends `MuiButton`, NOT `@mui/material/IconButton`. The custom version removes min-width constraint, applies specific padding, and integrates with theme config.
+
+---
+
+## CustomAutocomplete
+
+Import from `@core/components/mui/Autocomplete`. Wraps `@mui/material/Autocomplete` with Paper slot pre-configured.
+
+```tsx
+import CustomAutocomplete from '@core/components/mui/Autocomplete'
+import CustomTextField from '@core/components/mui/TextField'
+
+<CustomAutocomplete
+  options={users}
+  getOptionLabel={(o) => o.name}
+  value={selected}
+  onChange={(_, value) => setSelected(value)}
+  renderInput={(params) => <CustomTextField {...params} label='Select user' />}
+/>
+```
+
+---
+
+## Best Practices
+
+1. **Always use `CustomTextField`** for text inputs to maintain theme consistency
+2. **Use `CustomAvatar` with `skin='light'`** for softer appearance in user lists
+3. **Use `CustomChip` with `round='true'`** for pill-shaped tags
+4. **Use `CustomIconButton` for icon-only actions**, `Button` for text-based actions
+5. **Use `Stack` for simple flex layouts**, `Box` for complex layouts
+6. **Use `Grid` for responsive multi-column layouts**
+7. **Always pair `CustomAutocomplete` with `CustomTextField`** using `renderInput` prop
+8. **Use `CustomTabList` with `pill='true'`** for modern pill-style tabs
+9. **Use semantic colors** (primary, success, error) instead of hardcoded colors
+10. **Import only what you use** from `@mui/material` to keep bundle small
+11. **Wrap forms in `Stack` or `Grid`** for consistent spacing between fields
+12. **Use `Card` for content grouping** with `CardHeader`, `CardContent`, `CardActions`
+13. **Always provide `label` on form inputs** for accessibility
+14. **Avoid nesting too many `Box` elements** — use `Grid` for layouts
+
+## Accessibility
+
+1. **Always use `label` on form inputs** — required for screen readers
+2. **Use semantic HTML** (`button`, `select`, `input`)
+3. **Provide `aria-label` for `CustomIconButton`** icon-only buttons
+4. **Use proper heading hierarchy** (`h1` → `h2` → `h3`)
+5. **Ensure color contrast** meets WCAG standards (Vuexy theme ensures this)
+6. **Support keyboard navigation** — all MUI components are keyboard-accessible by default
+7. **Use error messages** (`helperText`) for validation feedback
+8. **Don't use color alone** to convey information — pair with text or icons
+
+---
+
+## Color System
+
+Use `color` prop on any MUI component: `'primary'`, `'secondary'`, `'error'`, `'warning'`, `'info'`, `'success'`
+
+For Avatars/Badges: use `skin` prop (`'filled'`, `'light'`, `'light-static'`) to control background style.
+
+---
+
+For the complete component reference with every available prop and configuration option, see [reference.md](reference.md).
+For full interface examples, see [examples.md](examples.md).