메뉴
Skill para la arquitectura y desarrollo del frontend de AgroNexus AI con Ionic Framework + Vue 3 (Composition API), Pinia para estado global, composables reutilizables y diseño premium "Modern AgTech SaaS".
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | frontend-ionic-vue |
| description | Skill para la arquitectura y desarrollo del frontend de AgroNexus AI con Ionic Framework + Vue 3 (Composition API), Pinia para estado global, composables reutilizables y diseño premium "Modern AgTech SaaS". |
| version | 1.0 |
| compatibility | ["claude-code","cursor","antigravity"] |
Este skill define la arquitectura, patrones y estándares del frontend de AgroNexus AI, construido como una aplicación móvil-first con Ionic Framework y Vue 3.
<script setup lang="ts">).| Tab | Nombre | Ruta | Descripción |
|---|---|---|---|
| 1 | Welcome Home | /tabs/home | Dashboard principal con resumen de sensores |
| 2 | AI Assistant | /tabs/chat | Chat conversacional con el agente Gemini |
| 3 | System Control | /tabs/system | Panel de control de actuadores y modo del sistema |
| 4 | Telemetry | /tabs/telemetry | Datos históricos y gráficos de sensores |
// composables/useApi.ts
export function useApi() {
const baseUrl = import.meta.env.VITE_API_URL;
async function authFetch<T>(endpoint: string, options?: RequestInit): Promise<T> {
const token = localStorage.getItem('supabase_token');
const res = await fetch(`${baseUrl}${endpoint}`, {
...options,
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json',
...options?.headers,
},
});
if (!res.ok) throw new Error(`API Error: ${res.status}`);
return res.json();
}
return { authFetch };
}
// stores/chatStore.ts
import { defineStore } from 'pinia';
interface ChatMessage {
content: string;
role: 'user' | 'assistant';
timestamp: string;
}
export const useChatStore = defineStore('chat', {
state: () => ({
messages: [] as ChatMessage[],
isLoading: false,
}),
actions: {
async sendMessage(text: string) { /* ... */ },
async loadHistory() { /* ... */ },
},
});
:root {
/* Primarios — Verde Agrícola */
--agro-primary: #2dd36f;
--agro-primary-dark: #1a9e4e;
--agro-primary-glow: rgba(45, 211, 111, 0.15);
/* Fondo — Dark Mode Premium */
--agro-bg-deep: #0a0f1a;
--agro-bg-card: rgba(20, 30, 50, 0.85);
--agro-bg-glass: rgba(255, 255, 255, 0.05);
/* Acentos */
--agro-accent-blue: #3dc2ff;
--agro-accent-amber: #ffc409;
--agro-accent-red: #eb445a;
/* Texto */
--agro-text-primary: #e8eaf6;
--agro-text-secondary: rgba(232, 234, 246, 0.6);
}
.agro-card {
background: var(--agro-bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.agro-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(45, 211, 111, 0.1);
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 8px var(--agro-primary-glow); }
50% { box-shadow: 0 0 20px var(--agro-primary-glow); }
}
@keyframes fade-slide-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.sensor-live { animation: pulse-glow 2s ease-in-out infinite; }
.card-enter { animation: fade-slide-up 0.4s ease-out; }
| Endpoint | Método | Auth | Vista |
|---|---|---|---|
/chat | POST | JWT | AI Assistant |
/chat/history | GET | JWT | AI Assistant |
/dashboard/latest | GET | JWT | Welcome Home |
/dashboard/history | GET | JWT | Telemetry |
/dashboard/state | GET | JWT | System Control |
/dashboard/mode | POST | JWT | System Control |
// Backend response (chat_history):
{ role: "user" | "ai", message: string, created_at: string }
// Frontend model (ChatMessage):
{ role: "user" | "assistant", content: string, timestamp: string }
// Transformación:
const mapped: ChatMessage = {
role: row.role === 'ai' ? 'assistant' : 'user',
content: row.message,
timestamp: row.created_at,
};
<ion-split-pane> gestiona la transición automáticamente.sm: 576px, md: 768px, lg: 992px, xl: 1200px.src/views/: Páginas principales (Home, Chat, System, Telemetry).src/stores/: Pinia stores (chat, sensors, auth).src/composables/: Lógica reutilizable (useApi, useSensors).src/theme/: Variables CSS y design tokens de Ionic.<script setup lang="ts"> — nunca Options API.Skill para construir y gestionar un backend modular con FastAPI especializado en agricultura de precisión (IoT), integración con Supabase (Auth/DB) y agentes inteligentes de Google Gemini.
Skill para el despliegue y operación de AgroNexus AI en Vercel (producción), incluyendo configuración de vercel.json, variables de entorno, monitoreo de logs y estrategias de troubleshooting en serverless.
Skill para la orquestación del agente de IA con Google Gemini, incluyendo ingeniería de prompts modulares, inyección de contexto RAG en tiempo real y gestión de memoria conversacional para agricultura de precisión.
Skill para la detección de anomalías en datos de sensores IoT, sistema de umbrales de seguridad agrícola, y lógica proactiva de control automatizado de actuadores para invernaderos de AgroNexus AI.
Skill para la integración completa con Supabase: autenticación JWT, esquema de base de datos PostgreSQL, políticas de Row Level Security (RLS), y persistencia de datos de sensores y chat para AgroNexus AI.
Skill para estrategias de testing, aseguramiento de calidad y validación end-to-end del ecosistema AgroNexus AI: tests unitarios, de integración, de endpoints y simulación de telemetría IoT.