ai base

.ai/standards/ui_design.md

@@ -0,0 +1,74 @@
+# [DEF:Std:UI_Svelte:Standard]
+# @TIER: CRITICAL
+# @PURPOSE: Unification of all Svelte components following GRACE-Poly (UX Edition).
+# @LAYER: UI
+# @INVARIANT: Every component MUST have `<!-- [DEF:] -->` anchors and UX tags.
+# @INVARIANT: Use Tailwind CSS for all styling (no custom CSS without justification).
+
+## 1. UX PHILOSOPHY: RESOURCE-CENTRIC
+*   **Definition:** Navigation and actions revolve around Resources (Dashboards, Datasets), not Tools (Migration, Git).
+*   **Discovery:** All actions (Migrate, Backup, Git) for a resource MUST be grouped together (e.g., in a dropdown menu).
+*   **Traceability:** Every action must be linked to a Task ID with visible logs in the Task Drawer.
+
+## 2. COMPONENT ARCHITECTURE: GLOBAL TASK DRAWER
+*   **Role:** A single, persistent slide-out panel (`GlobalTaskDrawer.svelte`) in `+layout.svelte`.
+*   **Triggering:** Opens automatically when a task starts or when a user clicks a status badge.
+*   **Interaction:** Interactive elements (Password prompts, Mapping tables) MUST be rendered INSIDE the Drawer, not as center-screen modals.
+
+## 3. COMPONENT STRUCTURE & CORE RULES
+*   **Styling:** Tailwind CSS utility classes are MANDATORY. Minimize scoped `<style>`.
+*   **Localization:** All user-facing text must use `$t` from `src/lib/i18n`.
+*   **API Calls:** Use `requestApi` / `fetchApi` wrappers. Native `fetch` is FORBIDDEN.
+*   **Anchors:** Every component MUST have `<!-- [DEF:] -->` anchors and UX tags.
+
+## 2. COMPONENT TEMPLATE
+Each Svelte file must follow this structure:
+```html
+<!-- [DEF:ComponentName:Component] -->
+<script>
+  /**
+   * @TIER: [CRITICAL | STANDARD | TRIVIAL]
+   * @PURPOSE: Brief description of the component purpose.
+   * @LAYER: UI
+   * @SEMANTICS: list, of, keywords
+   * @RELATION: DEPENDS_ON -> [OtherComponent|Store]
+   * 
+   * @UX_STATE: [StateName] -> Visual behavior description.
+   * @UX_FEEDBACK: System reaction (e.g., Toast, Shake).
+   * @UX_RECOVERY: Error recovery mechanism.
+   * @UX_TEST: [state] -> {action, expected}
+   */
+  import { ... } from "...";
+  
+  // Exports (Props)
+  export let prop_name = "...";
+  
+  // Logic
+</script>
+
+<!-- HTML Template -->
+<div class="...">
+  ...
+</div>
+
+<style>
+  /* Optional: Local styles using @apply only */
+</style>
+<!-- [/DEF:ComponentName:Component] -->
+```
+
+## 2. STATE MANAGEMENT & STORES
+*   **Subscription:** Use `$` prefix for reactive store access (e.g., `$sidebarStore`).
+*   **Data Flow:** Mark store interactions in `[DEF:]` metadata:
+    *   `# @RELATION: BINDS_TO -> store_id`
+
+## 3. UI/UX BEST PRACTICES
+*   **Transitions:** Use Svelte built-in transitions for UI state changes.
+*   **Feedback:** Always provide visual feedback for async actions (Loading spinners, skeleton loaders).
+*   **Modularity:** Break down components into "Atoms" (Trivial) and "Orchestrators" (Critical).
+
+## 4. ACCESSIBILITY (A11Y)
+*   Ensure proper ARIA roles and keyboard navigation for interactive elements.
+*   Use semantic HTML tags (`<nav>`, `<header>`, `<main>`, `<footer>`).
+
+# [/DEF:Std:UI_Svelte]