Guidelines for generating UI code that matches the "Engineered Hardware" aesthetic of Project SENTINEL. Use when creating new components, implementing layouts, or ensuring visual consistency across the platform.
This skill defines the visual language and coding standards for the UI. The aesthetic is "Engineered Hardware" / "Premium Interface", emphasizing precision, technical clarity, and high-end manufacturing aesthetics.
Implement a new UI element in 4 steps:
components/ui/*.tsx.JetBrains Mono for technical data, and subtle glass effects.framer-motion with defined timing functions for subtle transitions.// Example: Engineered Hardware Card
import { Card } from "@/components/ui/card";
import { motion } from "framer-motion";
export function SystemCard({ title, value }: { title: string; value: string }) {
return (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: [0.25, 1, 0.5, 1] }}
>
<Card className="border-surface-200 bg-background/80 backdrop-blur-sm p-4">
<div className="text-[10px] uppercase tracking-widest text-muted-foreground font-mono mb-1">
{title}
</div>
<div className="text-2xl font-semibold tracking-tight">
{value}
</div>
</Card>
</motion.div>
);
}
bg-background/80, backdrop-blur) used for depth and layering, not decoration.components/ui/*.tsx (shadcn/ui based) for all standard elements.bg-background, text-foreground).Animations must be "subtle and purposeful", avoiding layout thrash or excessive movement.
framer-motiontransition-precision: cubic-bezier(0.25, 1, 0.5, 1) (Standard)transition-premium: cubic-bezier(0.22, 1, 0.36, 1) (Slow/Elegant)Step 1: Layout Definition Use the standard grid system and spacing. Ensure the view respects the admin/site boundary.
Step 2: Component Selection Prioritize existing components. If a new component is needed, document it in the design system.
Step 3: State Management Use React state for local UI changes. For global state (like task management), integrate with the appropriate providers.
// Integration with Task Management (Example)
const handleAction = async () => {
// Update UI state to show progress
setIsLoading(true);
try {
await updateTodoList({ todos: "[x] Completed UI Action" });
} finally {
setIsLoading(false);
}
};
Contrast & Color
Keyboard Navigation
focus-visible:ring-2).Use JetBrains Mono for tabular data and ensure it scales gracefully on mobile using overflow containers or responsive font sizes.
Leverage hsl(var(--variable)) for all colors to allow for runtime theme adjustments without CSS overrides.