jumpstart-mode 1.1.13 → 1.1.14

package/.github/skills/vuejs-developer/references/nuxt-patterns.md

@@ -0,0 +1,21 @@
+# Nuxt Patterns
+
+## Use plain Vue when
+
+- The app is mostly authenticated internal workflow UI.
+- SEO is not a primary requirement.
+- A separate backend already exists.
+- You want minimal deployment complexity.
+
+## Use Nuxt when
+
+- SSR or SSG is required.
+- Content-heavy public routes matter.
+- File-based routing and server routes improve speed.
+- You need lightweight BFF behavior in one app.
+
+## Nuxt guidance
+
+- Keep server-only logic in server routes.
+- Avoid exposing private keys in client runtime config.
+- Separate public and private runtime config clearly.

package/.github/skills/vuejs-developer/references/performance.md

@@ -0,0 +1,22 @@
+# Performance
+
+## Baseline optimizations
+
+- Lazy-load routes
+- Code split by feature
+- Debounce search and filters
+- Cancel stale in-flight requests
+- Virtualize long lists
+- Paginate large result sets
+
+## AI workflow performance
+
+- Support streaming responses for chat output
+- Poll long-running ingestion jobs with backoff
+- Avoid re-rendering full trace timelines on every tick
+- Use incremental rendering for large citation/result lists
+
+## Build diagnostics
+
+- Run bundle analysis for large dependencies
+- Track web vitals in production telemetry

package/.github/skills/vuejs-developer/references/pinia-state-management.md

@@ -0,0 +1,44 @@
+# Pinia State Management
+
+## Use Pinia for
+
+- Auth and identity context
+- Tenant and workspace context
+- Shared review queue state
+- App-level notifications
+- Cross-view feature flags
+
+## Do not use Pinia for
+
+- Local form state that lives in one component tree
+- One-off UI toggles with no cross-view impact
+
+## Store pattern
+
+```ts
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { searchDocuments } from '@/services/retrievalService'
+import type { RetrievalResult } from '@/types/retrieval'
+
+export const useRetrievalStore = defineStore('retrieval', () => {
+  const results = ref<RetrievalResult[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function search(query: string) {
+    loading.value = true
+    error.value = null
+
+    try {
+      results.value = await searchDocuments(query)
+    } catch {
+      error.value = 'Unable to complete search.'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { results, loading, error, search }
+})
+```

package/.github/skills/vuejs-developer/references/project-structure.md

@@ -0,0 +1,46 @@
+# Project Structure
+
+## Small and medium app baseline
+
+```text
+src/
+  assets/
+  components/
+    common/
+    layout/
+    domain/
+  composables/
+  router/
+  stores/
+  services/
+  types/
+  views/
+  App.vue
+  main.ts
+```
+
+## Enterprise app baseline
+
+```text
+src/
+  app/
+  components/
+  features/
+    documents/
+    retrieval/
+    review-queue/
+    users/
+    settings/
+  layouts/
+  router/
+  services/
+  stores/
+  types/
+  utils/
+```
+
+## Structure rules
+
+- Keep feature folders vertical when domain complexity grows.
+- Keep global `components` for shared primitives only.
+- Keep side effects in services/composables, not in base UI primitives.

package/.github/skills/vuejs-developer/references/review-queue-patterns.md

@@ -0,0 +1,27 @@
+# Review Queue Patterns
+
+## Queue capabilities
+
+- Priority and status filters
+- Assignment and ownership
+- Detail view with source input
+- AI output display
+- Evidence and citation panel
+- Approve, reject, edit actions
+- Override reason capture
+- Audit trail
+- Escalation path
+
+## Data model hints
+
+- `status`: pending, in-review, approved, rejected, escalated
+- `priority`: low, medium, high, critical
+- `assigneeId`
+- `overrideReason`
+- `reviewedBy`, `reviewedAt`
+
+## UX guidance
+
+- Preserve original request and generated output side by side.
+- Require reason fields for reject and override.
+- Show policy/context snippets near decision controls.

package/.github/skills/vuejs-developer/references/security.md

@@ -0,0 +1,23 @@
+# Frontend Security
+
+## Main risks to prevent
+
+- Unsafe HTML rendering from AI output
+- Token leakage in local storage
+- Sensitive data in browser logs
+- Trusting route guards as authorization enforcement
+- Exposing secret values in VITE_* variables
+
+## Required controls
+
+- Sanitize markdown or HTML before rendering.
+- Prefer short-lived tokens and secure HTTP-only cookies where possible.
+- Keep secrets server-side.
+- Enforce backend authorization per endpoint.
+- Validate upload type and size server-side.
+
+## Security warnings
+
+- Route guards improve UX only.
+- Any VITE_* value is public.
+- Never hardcode long-lived secrets in frontend code.

package/.github/skills/vuejs-developer/references/styling-design-system.md

@@ -0,0 +1,25 @@
+# Styling and Design System
+
+## Supported approaches
+
+- Tailwind CSS
+- Scoped CSS
+- CSS Modules
+- UnoCSS
+- Component libraries when project constraints require them
+
+## Baseline design primitives
+
+- Typography scale
+- Spacing scale
+- Color tokens
+- Border radius tokens
+- Focus ring token
+
+## Enterprise UI mode
+
+- High contrast
+- Clear hierarchy
+- Dense but readable information layouts
+- Minimal decorative status cards
+- Depend on structure and typography over weak pastel signaling

package/.github/skills/vuejs-developer/references/testing.md

@@ -0,0 +1,42 @@
+# Testing
+
+## Core stack
+
+- Vitest
+- Vue Test Utils
+- Testing Library for Vue
+- Playwright
+- Mock Service Worker (MSW)
+
+## Coverage baseline
+
+- Unit tests for pure logic and composables
+- Component tests for rendering and interactions
+- Store tests for async transitions
+- Service tests for API contracts
+- E2E tests for primary workflows
+
+## Example
+
+```ts
+import { mount } from '@vue/test-utils'
+import RetrievalResultCard from '@/components/RetrievalResultCard.vue'
+
+describe('RetrievalResultCard', () => {
+  it('renders title and source', () => {
+    const wrapper = mount(RetrievalResultCard, {
+      props: {
+        result: {
+          id: '1',
+          title: 'Source Document',
+          source: 'SharePoint',
+          similarityScore: 0.91
+        }
+      }
+    })
+
+    expect(wrapper.text()).toContain('Source Document')
+    expect(wrapper.text()).toContain('SharePoint')
+  })
+})
+```

package/.github/skills/vuejs-developer/references/vue-router-patterns.md

@@ -0,0 +1,45 @@
+# Vue Router Patterns
+
+## Include
+
+- Public routes
+- Authenticated routes
+- Admin routes
+- 404 route
+- Lazy-loaded view components
+- Route meta for permissions
+
+## Guard rules
+
+- Route guards enforce UX navigation policy.
+- Backend APIs enforce real authorization.
+
+## Example
+
+```ts
+import { createRouter, createWebHistory } from 'vue-router'
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      component: () => import('@/layouts/AppLayout.vue'),
+      children: [
+        {
+          path: '',
+          name: 'dashboard',
+          component: () => import('@/views/DashboardView.vue')
+        },
+        {
+          path: 'review-queue',
+          name: 'reviewQueue',
+          component: () => import('@/views/ReviewQueueView.vue'),
+          meta: { requiresAuth: true, permission: 'review:read' }
+        }
+      ]
+    },
+    { path: '/:pathMatch(.*)*', name: 'notFound', component: () => import('@/views/NotFoundView.vue') }
+  ]
+})
+```

package/.github/skills/vuejs-developer/references/vue3-modern-standards.md

@@ -0,0 +1,55 @@
+# Vue 3 Modern Standards
+
+## Baseline stack
+
+- Vue 3
+- TypeScript
+- script setup
+- Composition API
+- Vite
+- Pinia
+- Vue Router
+
+## Component standards
+
+- Use typed props with `defineProps`.
+- Use typed emits with `defineEmits`.
+- Keep components focused on one purpose.
+- Move reusable behavior to composables.
+- Keep API calls in services, not components.
+
+## Required UI states
+
+Every async view should implement:
+
+- Loading
+- Empty
+- Error
+- Success
+
+## Example
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type RetrievalResult = {
+  id: string
+  title: string
+  source: string
+  similarityScore: number
+}
+
+const props = defineProps<{ result: RetrievalResult }>()
+
+const formattedScore = computed(() => `${Math.round(props.result.similarityScore * 100)}%`)
+</script>
+
+<template>
+  <article class="result-card">
+    <h3>{{ props.result.title }}</h3>
+    <p>{{ props.result.source }}</p>
+    <span>{{ formattedScore }}</span>
+  </article>
+</template>
+```

package/.github/skills/vuejs-developer/scripts/check_accessibility_patterns.py

@@ -0,0 +1,19 @@
+#!/usr/bin/env python3
+"""Simple grep-like check for common accessibility signals in Vue files."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+signals = ['aria-', 'role=', 'for=', 'id=', 'alt=', 'tabindex']
+files = sorted(Path('src').rglob('*.vue'))
+
+if not files:
+    print('No Vue files found under src')
+    raise SystemExit(0)
+
+for file in files:
+    text = file.read_text(encoding='utf-8', errors='ignore')
+    hits = [s for s in signals if s in text]
+    if hits:
+        print(f'{file.as_posix()}: {", ".join(hits)}')

package/.github/skills/vuejs-developer/scripts/detect_vue_stack.py

@@ -0,0 +1,28 @@
+#!/usr/bin/env python3
+"""Detect whether a project uses Vue, Nuxt, Vite, and TypeScript."""
+
+from __future__ import annotations
+
+import json
+from pathlib import Path
+
+package_file = Path('package.json')
+if not package_file.exists():
+    print('package.json not found')
+    raise SystemExit(1)
+
+package = json.loads(package_file.read_text(encoding='utf-8'))
+all_deps = {
+    **package.get('dependencies', {}),
+    **package.get('devDependencies', {}),
+}
+
+def has(name: str) -> bool:
+    return name in all_deps
+
+print(f"Vue: {'yes' if has('vue') else 'no'}")
+print(f"Nuxt: {'yes' if has('nuxt') else 'no'}")
+print(f"Vite: {'yes' if has('vite') else 'no'}")
+print(f"Pinia: {'yes' if has('pinia') else 'no'}")
+print(f"Vue Router: {'yes' if has('vue-router') else 'no'}")
+print(f"TypeScript: {'yes' if has('typescript') else 'no'}")

package/.github/skills/vuejs-developer/scripts/generate_component_map.py

@@ -0,0 +1,19 @@
+#!/usr/bin/env python3
+"""Generate a simple Vue component map by folder."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+root = Path('src/components')
+if not root.exists():
+    print('src/components not found')
+    raise SystemExit(1)
+
+components = sorted(root.rglob('*.vue'))
+if not components:
+    print('No Vue components found under src/components')
+    raise SystemExit(0)
+
+for comp in components:
+    print(comp.as_posix())

package/.github/skills/vuejs-developer/scripts/generate_frontend_backlog.py

@@ -0,0 +1,18 @@
+#!/usr/bin/env python3
+"""Generate a baseline Vue frontend backlog tailored for AI workflow apps."""
+
+backlog = [
+    'Set up Vue 3 + Vite + TypeScript + Pinia + Router baseline',
+    'Create typed API client and service modules',
+    'Implement global layout and navigation shell',
+    'Build RAG chat view with citation panel and error states',
+    'Implement review queue with approve/reject/edit actions',
+    'Add document upload and ingestion status views',
+    'Add unit/component tests for core features',
+    'Add E2E happy path for query to review flow',
+    'Run accessibility checks and resolve focus/label issues',
+    'Prepare CI pipeline and deployment configuration',
+]
+
+for i, item in enumerate(backlog, start=1):
+    print(f'{i}. {item}')

package/.github/skills/vuejs-developer/scripts/inspect_vue_project.py

@@ -0,0 +1,32 @@
+#!/usr/bin/env python3
+"""Quick project inventory for Vue/Nuxt codebases."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+ROOT = Path.cwd()
+
+TARGETS = [
+    'package.json',
+    'vite.config.ts',
+    'nuxt.config.ts',
+    'tsconfig.json',
+    'src/main.ts',
+    'src/App.vue',
+    'src/router/index.ts',
+    'src/stores',
+    'src/components',
+    'src/views',
+    'src/pages',
+    'src/composables',
+    'src/services',
+    'src/api',
+    'vitest.config.ts',
+    'playwright.config.ts',
+]
+
+for target in TARGETS:
+    path = ROOT / target
+    status = 'FOUND' if path.exists() else 'MISSING'
+    print(f'{status:7} {target}')

package/.github/skills/vuejs-developer/templates/.env.example

@@ -0,0 +1,8 @@
+VITE_API_BASE_URL=
+VITE_APP_NAME=
+VITE_AUTH_PROVIDER=
+VITE_FEATURE_FLAGS=
+VITE_TENANT_MODE=
+VITE_MOCK_MODE=
+VITE_ENV_NAME=
+VITE_TELEMETRY_ENDPOINT=

package/.github/skills/vuejs-developer/templates/.env.local.example

@@ -0,0 +1,8 @@
+VITE_API_BASE_URL=http://localhost:8000
+VITE_APP_NAME=ai-workflow-ui
+VITE_AUTH_PROVIDER=entra
+VITE_FEATURE_FLAGS=reviewQueue,traceViewer
+VITE_TENANT_MODE=single
+VITE_MOCK_MODE=true
+VITE_ENV_NAME=local
+VITE_TELEMETRY_ENDPOINT=http://localhost:4318/v1/traces

package/.github/skills/vuejs-developer/templates/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:20-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM nginx:1.27-alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

package/.github/skills/vuejs-developer/templates/api-client.ts

@@ -0,0 +1,32 @@
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL
+
+type RequestOptions = {
+  method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
+  body?: unknown
+  headers?: Record<string, string>
+  signal?: AbortSignal
+}
+
+export async function apiRequest<T>(path: string, options: RequestOptions = {}): Promise<T> {
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    method: options.method ?? 'GET',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      ...options.headers
+    },
+    body: options.body ? JSON.stringify(options.body) : undefined,
+    signal: options.signal
+  })
+
+  if (!response.ok) {
+    const bodyText = await response.text()
+    throw new Error(`API request failed (${response.status}): ${bodyText}`)
+  }
+
+  if (response.status === 204) {
+    return undefined as T
+  }
+
+  return (await response.json()) as T
+}

package/.github/skills/vuejs-developer/templates/base-button.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+defineProps<{
+  variant?: 'primary' | 'secondary' | 'danger'
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <button class="base-button" :class="variant ?? 'primary'" :disabled="disabled">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.base-button {
+  border: 1px solid #1f2937;
+  border-radius: 8px;
+  padding: 0.5rem 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.primary {
+  background: #111827;
+  color: #ffffff;
+}
+
+.secondary {
+  background: #ffffff;
+  color: #111827;
+}
+
+.danger {
+  background: #991b1b;
+  color: #ffffff;
+}
+
+.base-button:focus-visible {
+  outline: 3px solid #2563eb;
+  outline-offset: 2px;
+}
+</style>

package/.github/skills/vuejs-developer/templates/base-modal.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const props = defineProps<{
+  open: boolean
+  title: string
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+function onBackdropClick(event: MouseEvent) {
+  if (event.target === event.currentTarget) {
+    emit('close')
+  }
+}
+</script>
+
+<template>
+  <div v-if="props.open" class="modal-backdrop" role="presentation" @click="onBackdropClick">
+    <section class="modal" role="dialog" aria-modal="true" :aria-label="props.title">
+      <header class="modal-header">
+        <h2>{{ props.title }}</h2>
+        <button aria-label="Close dialog" @click="emit('close')">Close</button>
+      </header>
+      <div class="modal-body">
+        <slot />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgb(17 24 39 / 60%);
+}
+
+.modal {
+  width: min(700px, 92vw);
+  background: #ffffff;
+  border-radius: 10px;
+  border: 1px solid #d1d5db;
+}
+
+.modal-header,
+.modal-body {
+  padding: 1rem;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e5e7eb;
+}
+</style>

package/.github/skills/vuejs-developer/templates/citation-panel.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+type Citation = {
+  id: string
+  title: string
+  source: string
+  excerpt: string
+}
+
+defineProps<{
+  citations: Citation[]
+}>()
+</script>
+
+<template>
+  <aside aria-label="Citations">
+    <h2>Citations</h2>
+    <ul>
+      <li v-for="citation in citations" :key="citation.id">
+        <strong>{{ citation.title }}</strong>
+        <p>{{ citation.source }}</p>
+        <blockquote>{{ citation.excerpt }}</blockquote>
+      </li>
+    </ul>
+  </aside>
+</template>