メニュー
Vue 3 + Vite patterns for Elastro GUI: shared UI components, composables, lucide icons, axios API calls with bearer token, and build-to-elastro/gui workflow. Use when implementing or refactoring Elastro GUI views, components, or frontend features.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | elastro-gui-vue |
| description | Vue 3 + Vite patterns for Elastro GUI: shared UI components, composables, lucide icons, axios API calls with bearer token, and build-to-elastro/gui workflow. Use when implementing or refactoring Elastro GUI views, components, or frontend features. |
Stack: Vue 3.5, TypeScript, Vite 7, vue-router (hash), axios, lucide-vue-next.
packages/gui/src/
App.vue # Shell: sidebar, router-view, token extraction
store.ts # Reactive global state (token, clusters)
style.css # Design tokens + global utilities
components/ui/ # Shared Hawkins primitives
views/ # Route pages
utils/ # Pure helpers (health colors, formatters)
Build: npm run build outputs to elastro/gui/ (see vite.config.ts outDir).
| Component | Path | Props |
|---|---|---|
PageHeader | components/ui/PageHeader.vue | title, description?, eyebrow? + #actions slot |
StatusBadge | components/ui/StatusBadge.vue | status, variant?: 'solid' | 'outline', pulse? |
AlertBanner | components/ui/AlertBanner.vue | variant: 'error' | 'warning' | 'success' | 'info', default slot |
EmptyState | components/ui/EmptyState.vue | title, description? + #icon, #actions slots |
Rule: New views must use these instead of copying header/alert/empty markup.
// packages/gui/src/utils/health.ts
import { healthColor, healthPulse } from '../utils/health'
Use in views only when StatusBadge is insufficient (e.g. inline dots). Prefer the component.
const apiBase = import.meta.env.VITE_API_URL || ''
await axios.get(`${apiBase}/api/clusters`, {
headers: { Authorization: `Bearer ${state.token}` }
})
App.vue from URL ?token=onMounted if child mounts before parent finishes<div v-if="loading"><!-- skeletons --></div>
<div v-else-if="error"><AlertBanner variant="error">{{ error }}</AlertBanner></div>
<div v-else-if="items.length"><!-- content --></div>
<EmptyState v-else ... />
Prefer lucide-vue-next for new icons:
<script setup lang="ts">
import { LayoutDashboard } from 'lucide-vue-next'
</script>
<template><LayoutDashboard :size="20" /></template>
Keep existing inline SVGs when not touching that file for other reasons.
style.css; layout-specific in scoped <style>.w-1/2, .mt-4, etc.)animate-fade-in on page root div/#/cluster/namestore.ts types for Cluster shapeany on new code; legacy views may retain any until typed incrementallyvue-tsc -b via npm run build before shippingelastro-gui-netflix-uxelastro-gui-design-tokensElastro GUI design tokens: dark-first Hawkins-inspired HSL variables, typography scale, spacing, shadows, health semantics, and motion. Use when theming Elastro GUI, adding CSS variables, or aligning components to Netflix/Hawkins visual standards.
Hawkins-inspired Netflix UX patterns for Elastro's Vue GUI: dark cinematic shell, content-forward layouts, skeleton loading, semantic health states, browse-card affordances, and operational empty/error flows. Use when designing or reviewing Elastro GUI screens, UX uplift, or when the user mentions Netflix, Hawkins, or Elastro GUI UX.
Enforce Elastro logging standards: get_logger(__name__), package-level handler configuration, LogLoom enrichment, stderr-only diagnostics, and coverage for operational paths (collectors, remediation, managers, CLI commands). Use when adding or reviewing Elastro code, doing a logging coverage pass, or when the user mentions logs, observability, LogLoom, or ELASTRO_LOG_LEVEL.
FAANG-synthesized Python CLI patterns for Elastro: Click/rich-click command groups, global flags, stderr logging, dry-run/fix flows, fast-path startup, and testable command handlers. Use when adding CLI commands, refactoring elastro/cli, or implementing health/remediation UX.
FAANG-synthesized Python engineering patterns for Elastro: typing, Pydantic models, error taxonomy, thin CLI, test pyramids, safe remediation, and incremental PRs. Use when implementing features, reviewing Elastro PRs, or refactoring health/remediation/core modules.