4.6 KiB

Raw Blame History

🎨 UI/UX & Frontend Standards (The "Pixel-Perfect" Protocol)

Source: The Antigravity Brain. Audience: AI Agents (Designers & Frontend Engineers). Objective: Create Premium, Responsive, and Native interfaces that WOW the user on the first render.

[!CRITICAL] The Aesthetic Mandate: "Ugly software is a bug. Slow software is a crime. Use Vanilla CSS to create magic, not just layouts."

1. 🧠 The AI "Pre-Render" Check (Cognitive Optimization)

Before writing HTML/CSS, clear these mental hurdles to avoid "ugly mockups":

The "Bootstrap" Hallucination:
- Error: Using class names like col-md-6, p-4, text-center without defining them.
- Fix: WE DO NOT USE EXTERNAL FRAMEWORKS (Tailwind/Bootstrap) unless explicitly requested. You MUST write the CSS for every class you use.
The "Mobile-Last" Sin:
- Error: Writing desktop CSS and forgetting mobile.
- Fix: Start with mobile, then use @media (min-width: 768px) for desktop enhancements.
The "Placeholder" Trap:
- Error: Using lorem ipsum or https://via.placeholder.com.
- Fix: Use Real Data (e.g., "R$ 1.250,00", "João Silva") and generate generic icons (SVG) or colored divs instead of extensive broken images.

2. 🎨 The Design System (Variables or Death)

You MUST define these variables at the top of your CSS (:root). Do not hardcode values.

:root {
    /* 1. Palette (HSL for programmatic manipulation) */
    --hue-primary: 220; /* Blue */
    --primary: hsl(var(--hue-primary), 60%, 50%);
    --primary-hover: hsl(var(--hue-primary), 60%, 40%);
    --surface: hsl(220, 15%, 98%);
    --text: hsl(220, 15%, 10%);
    
    /* 2. Typography (Fluid Scale) */
    --font-sans: 'Inter', system-ui, sans-serif;
    --text-sm: clamp(0.8rem, 0.5vw + 0.5rem, 0.9rem);
    --text-base: clamp(1rem, 0.5vw + 0.8rem, 1.125rem);
    --text-xl: clamp(1.5rem, 1vw + 1rem, 2rem);
    
    /* 3. Spacing (Fluid Math) */
    --space-s: clamp(0.5rem, 1vw, 1rem);
    --space-m: clamp(1rem, 2vw, 2rem);
    
    /* 4. Glassmorphism & Depth */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

3. 🏗️ Engineering Workflow (Context Matters)

Path A: "Show me an idea" (The Quick Mockup)

Goal: Visual validation, rapid prototyping.
Format: Single index.html containing CSS (<style>) and JS (<script>).
Focus: Visual impact, "WOW" factor, animation. Code cleanliness is secondary to visual speed.

Path B: "Build the System" (The Software Engineer)

Goal: Scalability, Maintainability, Production-Ready.
Format: Full directory structure (src/components, src/styles, src/utils).
Mandates:
- DRY (Don't Repeat Yourself): If a button style is used twice, it's a class. If a layout is used twice, it's a component.
- Separation of Concerns: CSS in .css, JS in .js. No inline styles.
- Modular Architecture: Use specific files for specific domains (e.g., frota.css, financeiro.js).
- Reusability: Build generic components (Card, Button, Modal) first, then compose pages.

4. 🚀 Performance & Native Features

Modals: Use <dialog>.

dialog.showModal(); // Built-in backdrop and focus trap

Accordions: Use <details> and <summary>. No JS needed.

Animations: Use CSS Keyframes for entrance animations (fade-in, slide-up).

@keyframes slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.card { animation: slide-up 0.5s ease-out forwards; }

5. 🤖 The "Self-Correction" Checklist (Audit Yourself)

Before outputting code, verify:

Contrast: Can I read the text on the button? (White text on light yellow bg = REJECT).
Scrollbar: Did I hide the ugly default scrollbar? (::-webkit-scrollbar { width: 8px; ... }).
Empty States: If a list is empty, did I show a nice "No items found" illustration/div?
Responsive: Did I use flex-wrap: wrap or Grid auto-fit?
Console Errors: Did I fix references to missing files?

6. Persona Signatures (Aesthetic Flavors)

Steve Jobs Mode: Minimalist. Lots of Whitespace (gap: 4rem). Typography is the hero.
Tony Stark Mode: Dark Mode default. Neon accents (box-shadow: 0 0 20px var(--primary)). HUD-like data density.
Corporate Mode: Clean. White cards on gray background. Borders are thin (1px solid #e5e7eb).

4.6 KiB Raw Blame History