frontend-design

name: frontend-design description: Create distinctive, production-grade frontend interfaces with high design quality using Flask/Jinja2 template structure. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code and UI design that avoids generic AI aesthetics with mandatory light/dark mode support. (project)

Create distinctive frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details.

Quick Reference

CSS Variables Reference: See references/css-variables.md for complete list of all CSS variables (--bs-*, --fin-*, --agent-*).

Premium Effects Reference: See references/premium-effects.md for aurora background, scroll reveal, and other premium visual effects.

Decision Tree

Does the screen belong to an EXISTING module?
│
├─ YES → Use existing CSS/JS files
│        Use existing class prefix (fin-*, cart-*, exp-*, etc.)
│        EXTEND, don't recreate
│
└─ NO  → Create NEW design system
         Choose unique class prefix
         Follow creation guidelines below

Known Design Systems

Using Existing Systems

Template Structure (with Premium Effects)

{% extends "base.html" %}

{% block title %}Page Title{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://github.com/Rafael-2109/frete-sistema/blob/main/{{ url_for('static', filename='css/[module]/[module].css') }}">
{% endblock %}

{% block content %}
<div class="container-fluid premium-page">
    <header class="page-header reveal">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-0">
                    <i class="fas fa-icon text-primary me-2"></i>
                    Título
                </h1>
                <small class="text-muted">Subtítulo</small>
            </div>
        </div>
    </header>
    <!-- Content -->
</div>
{% endblock %}

Key classes:

• premium-page → Auto-injects aurora background (centralized in base.html)
• reveal → Scroll reveal animation for headers/sections

For complete premium effects guide: references/premium-effects.md

Essential Patterns

Card:

.my-card {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
}

Table:

.table-container thead th {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

For complete patterns: See css-variables.md#6

Creating New Systems

Step 1: Define Identity

Step 2: CSS Variables Template

/* === [MODULE] DESIGN SYSTEM === */
:root {
    /* Backgrounds */
    --[prefix]-bg-primary: #0a1628;
    --[prefix]-bg-secondary: #111d2e;
    --[prefix]-bg-tertiary: #1a2942;

    /* Texto */
    --[prefix]-text-primary: #f0f6fc;
    --[prefix]-text-secondary: #8b949e;

    /* Acentos */
    --[prefix]-accent-primary: #00d4aa;
    --[prefix]-accent-success: #10b981;
    --[prefix]-accent-warning: #f59e0b;
    --[prefix]-accent-danger: #ef4444;
}

[data-theme="light"] {
    --[prefix]-bg-primary: #ffffff;
    /* ... light mode overrides */
}

Step 3: Signature Visual Moments (pick 2+)

A. Atmospheric Background:

.[prefix]-container::before {
    content: '';
    position: fixed;
    background: radial-gradient(
        ellipse at 70% 30%,
        rgba(var(--bs-primary-rgb), 0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
}

B. Entry Animation:

@keyframes [prefix]-fadeIn {
    from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

C. Progressive Glow Line:

.[prefix]-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 3px;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    transition: width 0.4s ease;
}
.[prefix]-card:hover::after { width: 100%; }

Quality Checklist

• Uses CSS variables (NOT hex colors)
• Dark mode complete
• Light mode complete (NOT just inverted)
• Theme toggle functional
• premium-page class on main container
• reveal class on header/sections
• At least 2 signature visual moments
• Reduced motion respected (@media (prefers-reduced-motion))
• WCAG AA contrast (4.5:1)

FORBIDDEN

/* ❌ NEVER USE */
background: #343541;     /* Fixed hex */
background: #0d1117;     /* GitHub Dark */
--accent: #58a6ff;       /* GitHub Blue */
font-family: Arial;      /* Generic font */

Always use: var(--bs-*), var(--fin-*), or var(--agent-*) depending on module.

If you need to check the availables variables: See references/css-variables.md