Aggiunte skills per agente

2026-06-04 17:11:11 +02:00
parent 60aab78cd3
commit df9bce64f7
2 changed files with 967 additions and 0 deletions
@@ -0,0 +1,822 @@
+---
+name: blazor-specialist
+description: Blazor UI development specialist. Use for building Blazor Server or WebAssembly apps, component development, state management, or form handling.
+---
+
+# Blazor UI Specialist Skill
+
+Specialized agent for Blazor Server and Blazor WebAssembly development, component design, and state management.
+
+## Role
+
+You are a Blazor UI Specialist responsible for building interactive web interfaces using Blazor, managing component lifecycle, implementing state management, handling forms and validation, and integrating with backend APIs.
+
+## Expertise Areas
+
+- Blazor Server architecture
+- Blazor WebAssembly (WASM)
+- Component lifecycle and rendering
+- State management (FluxState, Fluxor)
+- Form validation and submission
+- JavaScript interop
+- SignalR integration
+- Component libraries (FluentUI, MudBlazor)
+- Performance optimization
+- Authentication in Blazor
+- Responsive design patterns
+
+## Responsibilities
+
+1. **Component Development**
+   - Create reusable Blazor components
+   - Manage component parameters and events
+   - Implement component lifecycle methods
+   - Handle component state
+   - Create child/parent component communication
+
+2. **State Management**
+   - Implement global state management
+   - Use dependency injection for services
+   - Manage component-level state
+   - Handle application-wide events
+   - Implement undo/redo patterns
+
+3. **Forms and Validation**
+   - Build forms with EditForm
+   - Implement data annotations validation
+   - Handle custom validation
+   - Display validation messages
+   - Submit forms to API
+
+4. **API Integration**
+   - Call backend APIs from Blazor
+   - Handle authentication tokens
+   - Display loading states
+   - Handle errors gracefully
+   - Implement optimistic UI updates
+
+## Load Additional Patterns
+
+- `.claude/patterns/api-patterns.md`
+
+## Critical Rules
+
+### Blazor Best Practices
+- Use `@rendermode` appropriately (Server, WebAssembly, Auto)
+- Dispose of resources in components (IDisposable)
+- Avoid blocking the UI thread
+- Use `StateHasChanged()` sparingly
+- Minimize JavaScript interop
+- Use cascading parameters for shared data
+- Implement proper error boundaries
+
+### Component Design
+- Keep components focused (single responsibility)
+- Use parameters for component inputs
+- Use EventCallback for component outputs
+- Make components reusable
+- Separate presentation from logic
+- Use code-behind for complex logic
+
+### Performance
+- Use `@key` directive for list items
+- Virtualize long lists
+- Lazy load routes and components
+- Minimize re-renders
+- Use OnInitializedAsync for async initialization
+- Stream large datasets
+
+## Component Patterns
+
+### Basic Component
+```razor
+@* File: Components/BudgetCard.razor *@
+@namespace {ApplicationName}.UI.Components
+
+<div class="budget-card">
+    <h3>@Budget.Name</h3>
+    <p class="amount">@Budget.Amount.ToString("C")</p>
+    <p class="created">Created: @Budget.CreatedDate.ToString("d")</p>
+
+    <button @onclick="OnEditClicked">Edit</button>
+    <button @onclick="OnDeleteClicked" class="danger">Delete</button>
+</div>
+
+@code {
+    [Parameter, EditorRequired]
+    public BudgetResponse Budget { get; set; } = default!;
+
+    [Parameter]
+    public EventCallback<BudgetResponse> OnEdit { get; set; }
+
+    [Parameter]
+    public EventCallback<Guid> OnDelete { get; set; }
+
+    private async Task OnEditClicked()
+    {
+        if (OnEdit.HasDelegate)
+            await OnEdit.InvokeAsync(Budget);
+    }
+
+    private async Task OnDeleteClicked()
+    {
+        if (OnDelete.HasDelegate)
+            await OnDelete.InvokeAsync(Budget.BudgetId);
+    }
+}
+```
+
+### Component with Code-Behind
+```razor
+@* File: Pages/Budgets/BudgetList.razor *@
+@page "/budgets"
+@namespace {ApplicationName}.UI.Pages.Budgets
+@inherits BudgetListBase
+
+<PageTitle>Budgets</PageTitle>
+
+<div class="budget-list-page">
+    <h1>Budgets</h1>
+
+    @if (IsLoading)
+    {
+        <p>Loading budgets...</p>
+    }
+    else if (ErrorMessage is not null)
+    {
+        <div class="error">@ErrorMessage</div>
+    }
+    else if (!Budgets.Any())
+    {
+        <p>No budgets found. Create your first budget!</p>
+    }
+    else
+    {
+        <div class="budget-grid">
+            @foreach (var budget in Budgets)
+            {
+                <BudgetCard
+                    Budget="@budget"
+                    OnEdit="@HandleEditBudget"
+                    OnDelete="@HandleDeleteBudget" />
+            }
+        </div>
+    }
+
+    <button @onclick="HandleCreateBudget" class="primary">Create Budget</button>
+</div>
+```
+
+```csharp
+// File: Pages/Budgets/BudgetList.razor.cs
+using Microsoft.AspNetCore.Components;
+using {ApplicationName}.UI.Services;
+
+namespace {ApplicationName}.UI.Pages.Budgets;
+
+public class BudgetListBase : ComponentBase, IDisposable
+{
+    [Inject]
+    protected IBudgetService BudgetService { get; set; } = default!;
+
+    [Inject]
+    protected NavigationManager Navigation { get; set; } = default!;
+
+    [Inject]
+    protected ILogger<BudgetListBase> Logger { get; set; } = default!;
+
+    protected List<BudgetResponse> Budgets { get; set; } = new();
+    protected bool IsLoading { get; set; }
+    protected string? ErrorMessage { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadBudgetsAsync();
+    }
+
+    protected async Task LoadBudgetsAsync()
+    {
+        IsLoading = true;
+        ErrorMessage = null;
+
+        try
+        {
+            Budgets = await BudgetService.GetBudgetsAsync();
+        }
+        catch (Exception ex)
+        {
+            Logger.LogError(ex, "Error loading budgets");
+            ErrorMessage = "Failed to load budgets. Please try again.";
+        }
+        finally
+        {
+            IsLoading = false;
+        }
+    }
+
+    protected void HandleCreateBudget()
+    {
+        Navigation.NavigateTo("/budgets/create");
+    }
+
+    protected void HandleEditBudget(BudgetResponse budget)
+    {
+        Navigation.NavigateTo($"/budgets/{budget.BudgetId}/edit");
+    }
+
+    protected async Task HandleDeleteBudget(Guid budgetId)
+    {
+        try
+        {
+            await BudgetService.DeleteBudgetAsync(budgetId);
+            await LoadBudgetsAsync(); // Reload list
+        }
+        catch (Exception ex)
+        {
+            Logger.LogError(ex, "Error deleting budget {BudgetId}", budgetId);
+            ErrorMessage = "Failed to delete budget. Please try again.";
+        }
+    }
+
+    public void Dispose()
+    {
+        // Clean up subscriptions, timers, etc.
+    }
+}
+```
+
+## Form Validation Pattern
+
+```razor
+@* File: Pages/Budgets/CreateBudget.razor *@
+@page "/budgets/create"
+@namespace {ApplicationName}.UI.Pages.Budgets
+
+<PageTitle>Create Budget</PageTitle>
+
+<div class="create-budget-page">
+    <h1>Create Budget</h1>
+
+    <EditForm Model="@Model" OnValidSubmit="@HandleValidSubmit" FormName="CreateBudgetForm">
+        <DataAnnotationsValidator />
+        <ValidationSummary />
+
+        <div class="form-group">
+            <label for="name">Name:</label>
+            <InputText id="name" @bind-Value="Model.Name" class="form-control" />
+            <ValidationMessage For="@(() => Model.Name)" />
+        </div>
+
+        <div class="form-group">
+            <label for="amount">Amount:</label>
+            <InputNumber id="amount" @bind-Value="Model.Amount" class="form-control" />
+            <ValidationMessage For="@(() => Model.Amount)" />
+        </div>
+
+        <div class="form-group">
+            <label for="startDate">Start Date:</label>
+            <InputDate id="startDate" @bind-Value="Model.StartDate" class="form-control" />
+            <ValidationMessage For="@(() => Model.StartDate)" />
+        </div>
+
+        <div class="form-actions">
+            <button type="submit" class="btn btn-primary" disabled="@IsSubmitting">
+                @if (IsSubmitting)
+                {
+                    <span>Creating...</span>
+                }
+                else
+                {
+                    <span>Create</span>
+                }
+            </button>
+            <button type="button" class="btn btn-secondary" @onclick="@Cancel">Cancel</button>
+        </div>
+
+        @if (ErrorMessage is not null)
+        {
+            <div class="alert alert-danger mt-3">@ErrorMessage</div>
+        }
+    </EditForm>
+</div>
+
+@code {
+    [Inject]
+    private IBudgetService BudgetService { get; set; } = default!;
+
+    [Inject]
+    private NavigationManager Navigation { get; set; } = default!;
+
+    [SupplyParameterFromForm]
+    private CreateBudgetModel Model { get; set; } = new();
+
+    private bool IsSubmitting { get; set; }
+    private string? ErrorMessage { get; set; }
+
+    private async Task HandleValidSubmit()
+    {
+        IsSubmitting = true;
+        ErrorMessage = null;
+
+        try
+        {
+            var command = new CreateBudgetCommand(
+                Model.Name,
+                Model.Amount,
+                Model.StartDate);
+
+            var result = await BudgetService.CreateBudgetAsync(command);
+
+            Navigation.NavigateTo($"/budgets/{result.BudgetId}");
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = "Failed to create budget. Please try again.";
+        }
+        finally
+        {
+            IsSubmitting = false;
+        }
+    }
+
+    private void Cancel()
+    {
+        Navigation.NavigateTo("/budgets");
+    }
+}
+```
+
+```csharp
+// File: Models/CreateBudgetModel.cs
+using System.ComponentModel.DataAnnotations;
+
+public class CreateBudgetModel
+{
+    [Required]
+    [StringLength(100, MinimumLength = 3)]
+    public string Name { get; set; } = string.Empty;
+
+    [Required]
+    [Range(0.01, 1_000_000)]
+    public decimal Amount { get; set; }
+
+    [Required]
+    public DateTimeOffset StartDate { get; set; } = DateTimeOffset.Now;
+}
+```
+
+## State Management (Fluxor)
+
+### Install Fluxor
+```bash
+dotnet add package Fluxor.Blazor.Web
+```
+
+### Define State
+```csharp
+// File: Store/BudgetState/BudgetState.cs
+namespace {ApplicationName}.UI.Store.BudgetState;
+
+public record BudgetState
+{
+    public List<BudgetResponse> Budgets { get; init; } = new();
+    public bool IsLoading { get; init; }
+    public string? ErrorMessage { get; init; }
+}
+```
+
+### Define Actions
+```csharp
+// File: Store/BudgetState/BudgetActions.cs
+namespace {ApplicationName}.UI.Store.BudgetState;
+
+public record LoadBudgetsAction;
+public record LoadBudgetsSuccessAction(List<BudgetResponse> Budgets);
+public record LoadBudgetsFailureAction(string ErrorMessage);
+```
+
+### Implement Reducer
+```csharp
+// File: Store/BudgetState/BudgetReducers.cs
+using Fluxor;
+
+namespace {ApplicationName}.UI.Store.BudgetState;
+
+public static class BudgetReducers
+{
+    [ReducerMethod]
+    public static BudgetState ReduceLoadBudgetsAction(BudgetState state, LoadBudgetsAction action) =>
+        state with { IsLoading = true, ErrorMessage = null };
+
+    [ReducerMethod]
+    public static BudgetState ReduceLoadBudgetsSuccessAction(BudgetState state, LoadBudgetsSuccessAction action) =>
+        state with { IsLoading = false, Budgets = action.Budgets };
+
+    [ReducerMethod]
+    public static BudgetState ReduceLoadBudgetsFailureAction(BudgetState state, LoadBudgetsFailureAction action) =>
+        state with { IsLoading = false, ErrorMessage = action.ErrorMessage };
+}
+```
+
+### Implement Effects
+```csharp
+// File: Store/BudgetState/BudgetEffects.cs
+using Fluxor;
+
+namespace {ApplicationName}.UI.Store.BudgetState;
+
+public class BudgetEffects(IBudgetService budgetService)
+{
+    [EffectMethod]
+    public async Task HandleLoadBudgetsAction(LoadBudgetsAction action, IDispatcher dispatcher)
+    {
+        try
+        {
+            var budgets = await budgetService.GetBudgetsAsync();
+            dispatcher.Dispatch(new LoadBudgetsSuccessAction(budgets));
+        }
+        catch (Exception ex)
+        {
+            dispatcher.Dispatch(new LoadBudgetsFailureAction(ex.Message));
+        }
+    }
+}
+```
+
+### Register Fluxor
+```csharp
+// Program.cs
+builder.Services.AddFluxor(options =>
+{
+    options.ScanAssemblies(typeof(Program).Assembly);
+    options.UseReduxDevTools();
+});
+```
+
+### Use in Component
+```razor
+@inherits FluxorComponent
+@inject IState<BudgetState> BudgetState
+@inject IDispatcher Dispatcher
+
+<div>
+    @if (BudgetState.Value.IsLoading)
+    {
+        <p>Loading...</p>
+    }
+    else
+    {
+        @foreach (var budget in BudgetState.Value.Budgets)
+        {
+            <BudgetCard Budget="@budget" />
+        }
+    }
+</div>
+
+@code {
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        Dispatcher.Dispatch(new LoadBudgetsAction());
+    }
+}
+```
+
+## API Service Pattern
+
+```csharp
+// File: Services/BudgetService.cs
+namespace {ApplicationName}.UI.Services;
+
+using System.Net.Http.Json;
+
+public interface IBudgetService
+{
+    Task<List<BudgetResponse>> GetBudgetsAsync(CancellationToken cancellationToken = default);
+    Task<BudgetResponse> GetBudgetByIdAsync(Guid id, CancellationToken cancellationToken = default);
+    Task<CreateBudgetResponse> CreateBudgetAsync(CreateBudgetCommand command, CancellationToken cancellationToken = default);
+    Task UpdateBudgetAsync(Guid id, UpdateBudgetCommand command, CancellationToken cancellationToken = default);
+    Task DeleteBudgetAsync(Guid id, CancellationToken cancellationToken = default);
+}
+
+public class BudgetService(
+    HttpClient httpClient,
+    ILogger<BudgetService> logger
+) : IBudgetService
+{
+    public async Task<List<BudgetResponse>> GetBudgetsAsync(
+        CancellationToken cancellationToken = default)
+    {
+        try
+        {
+            var budgets = await httpClient.GetFromJsonAsync<List<BudgetResponse>>(
+                "/budgets",
+                cancellationToken);
+
+            return budgets ?? new List<BudgetResponse>();
+        }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "Error fetching budgets");
+            throw;
+        }
+    }
+
+    public async Task<BudgetResponse> GetBudgetByIdAsync(
+        Guid id,
+        CancellationToken cancellationToken = default)
+    {
+        try
+        {
+            var budget = await httpClient.GetFromJsonAsync<BudgetResponse>(
+                $"/budgets/{id}",
+                cancellationToken);
+
+            return budget ?? throw new InvalidOperationException("Budget not found");
+        }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "Error fetching budget {BudgetId}", id);
+            throw;
+        }
+    }
+
+    public async Task<CreateBudgetResponse> CreateBudgetAsync(
+        CreateBudgetCommand command,
+        CancellationToken cancellationToken = default)
+    {
+        try
+        {
+            var response = await httpClient.PostAsJsonAsync(
+                "/budgets",
+                command,
+                cancellationToken);
+
+            response.EnsureSuccessStatusCode();
+
+            var result = await response.Content.ReadFromJsonAsync<CreateBudgetResponse>(
+                cancellationToken: cancellationToken);
+
+            return result ?? throw new InvalidOperationException("Failed to create budget");
+        }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "Error creating budget");
+            throw;
+        }
+    }
+
+    public async Task UpdateBudgetAsync(
+        Guid id,
+        UpdateBudgetCommand command,
+        CancellationToken cancellationToken = default)
+    {
+        try
+        {
+            var response = await httpClient.PutAsJsonAsync(
+                $"/budgets/{id}",
+                command,
+                cancellationToken);
+
+            response.EnsureSuccessStatusCode();
+        }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "Error updating budget {BudgetId}", id);
+            throw;
+        }
+    }
+
+    public async Task DeleteBudgetAsync(
+        Guid id,
+        CancellationToken cancellationToken = default)
+    {
+        try
+        {
+            var response = await httpClient.DeleteAsync(
+                $"/budgets/{id}",
+                cancellationToken);
+
+            response.EnsureSuccessStatusCode();
+        }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "Error deleting budget {BudgetId}", id);
+            throw;
+        }
+    }
+}
+
+// Register service
+builder.Services.AddScoped<IBudgetService, BudgetService>();
+```
+
+## JavaScript Interop
+
+```razor
+@inject IJSRuntime JS
+
+<button @onclick="ShowAlert">Show Alert</button>
+<button @onclick="GetLocalStorage">Get from LocalStorage</button>
+
+@code {
+    private async Task ShowAlert()
+    {
+        await JS.InvokeVoidAsync("alert", "Hello from Blazor!");
+    }
+
+    private async Task GetLocalStorage()
+    {
+        var value = await JS.InvokeAsync<string>("localStorage.getItem", "myKey");
+        Console.WriteLine($"Value from localStorage: {value}");
+    }
+
+    private async Task SetLocalStorage()
+    {
+        await JS.InvokeVoidAsync("localStorage.setItem", "myKey", "myValue");
+    }
+}
+```
+
+```javascript
+// wwwroot/js/interop.js
+window.budgetApp = {
+    formatCurrency: function (amount) {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: 'USD'
+        }).format(amount);
+    },
+
+    showConfirmDialog: function (message) {
+        return confirm(message);
+    },
+
+    downloadFile: function (filename, content) {
+        const blob = new Blob([content], { type: 'text/plain' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+        window.URL.revokeObjectURL(url);
+    }
+};
+```
+
+## Authentication in Blazor
+
+```razor
+@* File: Pages/Login.razor *@
+@page "/login"
+@inject NavigationManager Navigation
+@inject IAuthenticationService AuthService
+
+<div class="login-page">
+    <h1>Login</h1>
+
+    <EditForm Model="@loginModel" OnValidSubmit="@HandleLogin">
+        <DataAnnotationsValidator />
+        <ValidationSummary />
+
+        <div class="form-group">
+            <label>Email:</label>
+            <InputText @bind-Value="loginModel.Email" class="form-control" />
+        </div>
+
+        <div class="form-group">
+            <label>Password:</label>
+            <InputText type="password" @bind-Value="loginModel.Password" class="form-control" />
+        </div>
+
+        <button type="submit" class="btn btn-primary">Login</button>
+    </EditForm>
+</div>
+
+@code {
+    private LoginModel loginModel = new();
+
+    private async Task HandleLogin()
+    {
+        var result = await AuthService.LoginAsync(loginModel.Email, loginModel.Password);
+
+        if (result.Success)
+        {
+            Navigation.NavigateTo("/");
+        }
+    }
+}
+```
+
+```razor
+@* File: Components/AuthorizeView.razor *@
+@using Microsoft.AspNetCore.Components.Authorization
+
+<AuthorizeView>
+    <Authorized>
+        <p>Hello, @context.User.Identity?.Name!</p>
+        <a href="/logout">Logout</a>
+    </Authorized>
+    <NotAuthorized>
+        <a href="/login">Login</a>
+    </NotAuthorized>
+</AuthorizeView>
+```
+
+## Performance Optimization
+
+### Virtualization
+```razor
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+
+<Virtualize Items="@budgets" Context="budget">
+    <BudgetCard Budget="@budget" />
+</Virtualize>
+```
+
+### Lazy Loading
+```razor
+@* File: App.razor *@
+<Router AppAssembly="@typeof(Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+    </Found>
+    <NotFound>
+        <PageTitle>Not found</PageTitle>
+        <p>Sorry, there's nothing at this address.</p>
+    </NotFound>
+</Router>
+```
+
+## Common Blazor Pitfalls
+
+### ❌ Avoid These Mistakes
+
+1. **Not Disposing Components**
+   - ❌ Subscribe to events without unsubscribing
+   - ✅ Implement IDisposable and clean up
+
+2. **Blocking UI Thread**
+   - ❌ Using `Task.Result` or `.Wait()`
+   - ✅ Always use `await`
+
+3. **Overusing StateHasChanged**
+   - ❌ Calling `StateHasChanged()` everywhere
+   - ✅ Let Blazor handle rendering automatically
+
+4. **Missing @key Directive**
+   - ❌ Rendering lists without `@key`
+   - ✅ Use `@key` for dynamic lists
+
+5. **Not Handling Errors**
+   - ❌ No error boundaries
+   - ✅ Use ErrorBoundary component
+
+## Blazor Checklist
+
+### Component Development
+- [ ] Components are focused and reusable
+- [ ] Parameters use `[Parameter]` attribute
+- [ ] EventCallbacks for component events
+- [ ] Code-behind for complex logic
+- [ ] IDisposable implemented where needed
+
+### Forms & Validation
+- [ ] EditForm used for forms
+- [ ] Data annotations validation
+- [ ] ValidationSummary displayed
+- [ ] Submit button disabled during submission
+- [ ] Error messages displayed
+
+### State Management
+- [ ] Global state managed (Fluxor/FluxState)
+- [ ] Component state localized
+- [ ] Services injected via DI
+- [ ] State changes trigger re-renders
+
+### API Integration
+- [ ] HttpClient configured
+- [ ] Loading states displayed
+- [ ] Error handling implemented
+- [ ] Authentication tokens included
+- [ ] Retry logic for transient failures
+
+### Performance
+- [ ] Virtualization for long lists
+- [ ] Lazy loading for routes
+- [ ] @key directive on lists
+- [ ] Minimal JavaScript interop
+- [ ] Component disposal implemented
+
+## Checklist Before Completion
+
+- [ ] All components render correctly
+- [ ] Forms validate and submit
+- [ ] API calls successful
+- [ ] Loading states displayed
+- [ ] Error handling functional
+- [ ] Authentication working
+- [ ] State management functional
+- [ ] Performance optimized
+- [ ] Responsive design implemented
+- [ ] Documentation complete
@@ -0,0 +1,145 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
+origin: ECC
+---
+
+# Frontend Design
+
+Use this when the task is not just "make it work" but "make it look designed."
+
+This skill is for product pages, dashboards, app shells, components, or visual systems that need a clear point of view instead of generic AI-looking UI.
+
+## When To Use
+
+- building a landing page, dashboard, or app surface from scratch
+- upgrading a bland interface into something intentional and memorable
+- translating a product concept into a concrete visual direction
+- implementing a frontend where typography, composition, and motion matter
+
+## Core Principle
+
+Pick a direction and commit to it.
+
+Safe-average UI is usually worse than a strong, coherent aesthetic with a few bold choices.
+
+## Design Workflow
+
+### 1. Frame the interface first
+
+Before coding, settle:
+
+- purpose
+- audience
+- emotional tone
+- visual direction
+- one thing the user should remember
+
+Possible directions:
+
+- brutally minimal
+- editorial
+- industrial
+- luxury
+- playful
+- geometric
+- retro-futurist
+- soft and organic
+- maximalist
+
+Do not mix directions casually. Choose one and execute it cleanly.
+
+### 2. Build the visual system
+
+Define:
+
+- type hierarchy
+- color variables
+- spacing rhythm
+- layout logic
+- motion rules
+- surface / border / shadow treatment
+
+Use CSS variables or the project's token system so the interface stays coherent as it grows.
+
+### 3. Compose with intention
+
+Prefer:
+
+- asymmetry when it sharpens hierarchy
+- overlap when it creates depth
+- strong whitespace when it clarifies focus
+- dense layouts only when the product benefits from density
+
+Avoid defaulting to a symmetrical card grid unless it is clearly the right fit.
+
+### 4. Make motion meaningful
+
+Use animation to:
+
+- reveal hierarchy
+- stage information
+- reinforce user action
+- create one or two memorable moments
+
+Do not scatter generic micro-interactions everywhere. One well-directed load sequence is usually stronger than twenty random hover effects.
+
+## Strong Defaults
+
+### Typography
+
+- pick fonts with character
+- pair a distinctive display face with a readable body face when appropriate
+- avoid generic defaults when the page is design-led
+
+### Color
+
+- commit to a clear palette
+- one dominant field with selective accents usually works better than evenly weighted rainbow palettes
+- avoid cliché purple-gradient-on-white unless the product genuinely calls for it
+
+### Background
+
+Use atmosphere:
+
+- gradients
+- meshes
+- textures
+- subtle noise
+- patterns
+- layered transparency
+
+Flat empty backgrounds are rarely the best answer for a product-facing page.
+
+### Layout
+
+- break the grid when the composition benefits from it
+- use diagonals, offsets, and grouping intentionally
+- keep reading flow obvious even when the layout is unconventional
+
+## Anti-Patterns
+
+Never default to:
+
+- interchangeable SaaS hero sections
+- generic card piles with no hierarchy
+- random accent colors without a system
+- placeholder-feeling typography
+- motion that exists only because animation was easy to add
+
+## Execution Rules
+
+- preserve the established design system when working inside an existing product
+- match technical complexity to the visual idea
+- keep accessibility and responsiveness intact
+- frontends should feel deliberate on desktop and mobile
+
+## Quality Gate
+
+Before delivering:
+
+- the interface has a clear visual point of view
+- typography and spacing feel intentional
+- color and motion support the product instead of decorating it randomly
+- the result does not read like generic AI UI
+- the implementation is production-grade, not just visually interesting