القائمة
Use when creating, editing, or reviewing any admin dashboard UI component. Covers the complete design system — colors, typography, components, layout, animations, and patterns.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when modifying logging, error handling, or diagnostic messages — logger setup, transports, error diagnosis patterns in src/logger.ts and src/errors.ts
Use when modifying the trusted host process — server orchestration, message routing, IPC handler, request lifecycle, event streaming, file handling, plugin loading, or agent delegation in src/host/
Use when modifying the sandboxed agent process — runner, IPC client, local/IPC tools, tool catalog, prompt building, or identity loading in src/agent/
Use when modifying agent sandbox isolation -- Docker, Apple Container (macOS), or k8s providers in src/providers/sandbox/
Use when modifying IPC protocol between host and agent — schemas, actions, length-prefix framing, or Zod validation in ipc-schemas.ts and ipc-server.ts
AX project architecture and coding skills - use sub-skills for specific subsystems (agent, host, cli, providers, etc.)
| name | ax-admin-dashboard-ui |
| description | Use when creating, editing, or reviewing any admin dashboard UI component. Covers the complete design system — colors, typography, components, layout, animations, and patterns. |
Invoke this skill BEFORE:
| File | Purpose |
|---|---|
ui/admin/src/index.css | All CSS custom properties, component classes, animations |
ui/admin/src/main.tsx | App entry point, router, layout shell |
ui/admin/src/components/ | Reusable React components |
ui/admin/src/pages/ | Page-level components (Overview, Agents, Security, Logs, Settings) |
dashboard/ | Legacy location — admin dashboard source is now at ui/admin/ |
See reference.png for the canonical visual reference.
<html class="dark"> is hardcoded.backdrop-filter: blur(8px) with transparent borders.#fafaf9 on near-black #09090b.rgba(255,255,255,0.06) at varying opacities, never solid white/gray lines.Page background: #09090b (var(--background))
Card background: #111113 (var(--card))
Secondary/hover: #1c1c1f (var(--secondary))
Primary text: #fafaf9 (var(--foreground))
Muted text: #71717a (var(--muted-foreground))
Amber (primary): #f59e0b (var(--color-amber)) — buttons, active nav, accents
Emerald (success): #34d399 (var(--color-emerald)) — status badges, running state
Rose (error): #fb7185 (var(--color-rose)) — error badges, blocked state
Sky (info): #38bdf8 (var(--color-sky)) — info badges, idle state
Violet (tertiary): #a78bfa (var(--color-violet)) — additional accents
Destructive: #ef4444 (var(--destructive)) — kill/delete buttons
Subtle: rgba(255, 255, 255, 0.06) (var(--border))
Input: rgba(255, 255, 255, 0.08) (var(--input))
Focus: rgba(255, 255, 255, 0.12) (var(--ring))
Use Tailwind opacity suffixes: border-border/30, border-border/50, border-border/80.
Sans: "Outfit", system-ui, sans-serif (var(--font-sans))
Mono: "IBM Plex Mono", ui-monospace (var(--font-mono))
Font feature settings: 'cv02', 'cv03', 'cv04', 'cv11' (Outfit stylistic alternates).
text-[10px] — Tiny labels, IDs, uppercase tracking-wide headers
text-[11px] — Small details, profile badges
text-[12px] — Body text, descriptions, status labels
text-[13px] — Standard body, labels, button text, nav items
text-[14px] — Card headers, section titles
text-[15px] — Logo/branding
text-2xl — Page headers (h2)
text-[28px] — Large stat numbers
300 (light) — Rarely used
400 (regular) — Body text
500 (medium) — Labels, buttons, badges, nav items
600 (semibold) — Page headers, stat numbers, card titles
700 (bold) — Rarely used
tracking-tight (-0.025em) — Headers, stat numbers
tracking-wide (0.025em) — Secondary labels
tracking-widest (0.1em) — Table headers, tiny uppercase labels
Base: bg-card/80 border border-border/40 rounded-xl backdrop-blur-sm shadow-sm
Hover: hover:border-border/60
Header: px-6 py-4 border-b border-border/30
Body: px-6 py-4
Use the .card, .card-header, .card-body CSS classes defined in index.css. Cards transition border-color over 200ms.
Primary (.btn-primary):
bg-amber text-primary-foreground px-4 py-2 rounded-lg text-[13px] font-medium
hover: lighter amber (90% mix with white)
disabled: opacity-50 cursor-not-allowed
Secondary (.btn-secondary):
bg-card text-muted-foreground border border-border/50 px-4 py-2 rounded-lg text-[13px] font-medium
hover: bg-accent border-border text-foreground
Danger (.btn-danger):
bg-destructive text-white px-4 py-2 rounded-lg text-[13px] font-medium
hover: lighter red (85% mix with white)
All buttons use inline-flex items-center justify-center gap-2 and transition 150ms.
Pattern: bg-[color]/5 text-[color] border border-[color]/20 rounded-full px-2 py-0.5 text-[10px] font-medium
| Badge | BG | Text | Border |
|---|---|---|---|
.badge-green | emerald/5 | #34d399 | emerald/20 |
.badge-red | rose/5 | #fb7185 | rose/20 |
.badge-yellow | amber/5 | #f59e0b | amber/20 |
.badge-blue | sky/5 | #38bdf8 | sky/20 |
.badge-zinc | muted/8 | #71717a | border/50 |
Running: w-1.5 h-1.5 rounded-full bg-emerald animate-pulse-live
Idle: w-1.5 h-1.5 rounded-full bg-sky
Stopped: w-1.5 h-1.5 rounded-full bg-muted-foreground/50
Error: w-1.5 h-1.5 rounded-full bg-rose
Text input (.input):
bg-input border border-border/50 rounded-lg px-3 py-2 text-[13px] text-foreground
placeholder: text-muted-foreground
focus: border-amber/50 ring ring-amber/10
disabled: opacity-50 cursor-not-allowed
Select (.select): Same as input, with appearance-none and SVG chevron at right.
Header: text-[10px] uppercase tracking-wide font-medium px-6 py-3 border-b border-border/50
Row: text-[13px] px-6 py-3 divide-y divide-border/30
Row hover: hover:bg-foreground/[0.02]
Active: bg-foreground/[0.04]
.skeleton)Shimmer gradient from secondary through secondary/foreground mix
1.5s ease-in-out infinite animation
rounded-lg
Width: w-[220px] fixed
Height: h-screen
BG: bg-sidebar (#09090b)
Border: border-r border-border/50
Nav items: text-[13px] font-medium px-3 py-2 rounded-lg
Active: text-amber bg-amber/5
Inactive: text-muted-foreground hover:text-foreground hover:bg-foreground/[0.03]
Dividers: h-px bg-border/30
Container: flex-1 overflow-auto
Wrapper: mx-auto max-w-[1400px] px-8 py-6
Texture: .noise-bg class on main content area
h2: text-2xl font-semibold tracking-tight text-foreground
Desc: mt-1 text-[13px] text-muted-foreground
Class: animate-fade-in-up
Actions flush right via flex justify-between
Mobile: grid-cols-1
Small: sm:grid-cols-2 or sm:grid-cols-3
Large: lg:grid-cols-3 or lg:grid-cols-4
Gap: gap-4 (1rem)
.animate-fade-in-up {
animation: fade-in-up 0.5s ease-out both;
}
/* translateY(8px) → translateY(0), opacity 0 → 1 */
Use style="animation-delay: 50ms" for staggered children (increment by 50ms).
.animate-pulse-live {
animation: pulse-live 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* opacity: 1 → 0.4 → 1 */
.glow-amber box-shadow: 0 0 20px rgba(245, 158, 11, 0.08)
.glow-emerald box-shadow: 0 0 20px rgba(52, 211, 153, 0.08)
.glow-rose box-shadow: 0 0 20px rgba(251, 113, 133, 0.08)
Default: transition-all duration-200
Colors: transition-colors duration-150
Fast: duration-150
Uses Lucide React (lucide-react package). Standard usage:
import { Shield, Activity, Users } from 'lucide-react';
<Shield size={14} strokeWidth={1.8} className="text-amber" />
12px — Inline with small text, badge icons
14px — Standard inline, nav icons, card header icons
16px — Section headers, status icons
20px — Stat card icons, page-level icons
32px — Hero/empty state icons
1.8 — Default for most icons
2.0 — Emphasis / larger icons
Custom thin scrollbars (already in index.css):
Width: 6px
Track: transparent
Thumb: rgba(255, 255, 255, 0.08), hover rgba(255, 255, 255, 0.15)
Border-radius: 3px
When adding a new UI element to the dashboard:
.card, .btn-primary, .badge-green, .input, .skeleton) before writing new CSStext-[10px] through text-[28px]font-medium (500) for labels/buttons, font-semibold (600) for headersanimate-fade-in-up to new page sections with staggered delayssize={14} with strokeWidth={1.8} by defaultborder-border/30 (subtle) or border-border/50 (normal)backdrop-blur-sm and transparent backgrounds (bg-card/80)color-mix(in srgb, color %, transparent) for opacity blending — not hex alphaui/admin/src/components/ or ui/admin/src/pages/npm run build and verify the current admin dashboard build output pathborder-border/50, not border-white)bg-gray-* Tailwind defaults — use var(--secondary), var(--card), var(--muted)font-bold — the heaviest weight in regular use is font-semibold (600).noise-bg classcolor-mix for consistent blending