claude-code-pilot 3.1.0 → 3.2.0

package/src/skills/dotnet-patterns/SKILL.md

@@ -0,0 +1,321 @@
+---
+name: dotnet-patterns
+description: Idiomatic C# and .NET patterns, conventions, dependency injection, async/await, and best practices for building robust, maintainable .NET applications.
+origin: ECC
+---
+
+# .NET Development Patterns
+
+Idiomatic C# and .NET patterns for building robust, performant, and maintainable applications.
+
+## When to Activate
+
+- Writing new C# code
+- Reviewing C# code
+- Refactoring existing .NET applications
+- Designing service architectures with ASP.NET Core
+
+## Core Principles
+
+### 1. Prefer Immutability
+
+Use records and init-only properties for data models. Mutability should be an explicit, justified choice.
+
+```csharp
+// Good: Immutable value object
+public sealed record Money(decimal Amount, string Currency);
+
+// Good: Immutable DTO with init setters
+public sealed class CreateOrderRequest
+{
+    public required string CustomerId { get; init; }
+    public required IReadOnlyList<OrderItem> Items { get; init; }
+}
+
+// Bad: Mutable model with public setters
+public class Order
+{
+    public string CustomerId { get; set; }
+    public List<OrderItem> Items { get; set; }
+}
+```
+
+### 2. Explicit Over Implicit
+
+Be clear about nullability, access modifiers, and intent.
+
+```csharp
+// Good: Explicit access modifiers and nullability
+public sealed class UserService
+{
+    private readonly IUserRepository _repository;
+    private readonly ILogger<UserService> _logger;
+
+    public UserService(IUserRepository repository, ILogger<UserService> logger)
+    {
+        _repository = repository ?? throw new ArgumentNullException(nameof(repository));
+        _logger = logger ?? throw new ArgumentNullException(nameof(logger));
+    }
+
+    public async Task<User?> FindByIdAsync(Guid id, CancellationToken cancellationToken)
+    {
+        return await _repository.FindByIdAsync(id, cancellationToken);
+    }
+}
+```
+
+### 3. Depend on Abstractions
+
+Use interfaces for service boundaries. Register via DI container.
+
+```csharp
+// Good: Interface-based dependency
+public interface IOrderRepository
+{
+    Task<Order?> FindByIdAsync(Guid id, CancellationToken cancellationToken);
+    Task<IReadOnlyList<Order>> FindByCustomerAsync(string customerId, CancellationToken cancellationToken);
+    Task AddAsync(Order order, CancellationToken cancellationToken);
+}
+
+// Registration
+builder.Services.AddScoped<IOrderRepository, SqlOrderRepository>();
+```
+
+## Async/Await Patterns
+
+### Proper Async Usage
+
+```csharp
+// Good: Async all the way, with CancellationToken
+public async Task<OrderSummary> GetOrderSummaryAsync(
+    Guid orderId,
+    CancellationToken cancellationToken)
+{
+    var order = await _repository.FindByIdAsync(orderId, cancellationToken)
+        ?? throw new NotFoundException($"Order {orderId} not found");
+
+    var customer = await _customerService.GetAsync(order.CustomerId, cancellationToken);
+
+    return new OrderSummary(order, customer);
+}
+
+// Bad: Blocking on async
+public OrderSummary GetOrderSummary(Guid orderId)
+{
+    var order = _repository.FindByIdAsync(orderId, CancellationToken.None).Result; // Deadlock risk
+    return new OrderSummary(order);
+}
+```
+
+### Parallel Async Operations
+
+```csharp
+// Good: Concurrent independent operations
+public async Task<DashboardData> LoadDashboardAsync(CancellationToken cancellationToken)
+{
+    var ordersTask = _orderService.GetRecentAsync(cancellationToken);
+    var metricsTask = _metricsService.GetCurrentAsync(cancellationToken);
+    var alertsTask = _alertService.GetActiveAsync(cancellationToken);
+
+    await Task.WhenAll(ordersTask, metricsTask, alertsTask);
+
+    return new DashboardData(
+        Orders: await ordersTask,
+        Metrics: await metricsTask,
+        Alerts: await alertsTask);
+}
+```
+
+## Options Pattern
+
+Bind configuration sections to strongly-typed objects.
+
+```csharp
+public sealed class SmtpOptions
+{
+    public const string SectionName = "Smtp";
+
+    public required string Host { get; init; }
+    public required int Port { get; init; }
+    public required string Username { get; init; }
+    public bool UseSsl { get; init; } = true;
+}
+
+// Registration
+builder.Services.Configure<SmtpOptions>(
+    builder.Configuration.GetSection(SmtpOptions.SectionName));
+
+// Usage via injection
+public class EmailService(IOptions<SmtpOptions> options)
+{
+    private readonly SmtpOptions _smtp = options.Value;
+}
+```
+
+## Result Pattern
+
+Return explicit success/failure instead of throwing for expected failures.
+
+```csharp
+public sealed record Result<T>
+{
+    public bool IsSuccess { get; }
+    public T? Value { get; }
+    public string? Error { get; }
+
+    private Result(T value) { IsSuccess = true; Value = value; }
+    private Result(string error) { IsSuccess = false; Error = error; }
+
+    public static Result<T> Success(T value) => new(value);
+    public static Result<T> Failure(string error) => new(error);
+}
+
+// Usage
+public async Task<Result<Order>> PlaceOrderAsync(CreateOrderRequest request)
+{
+    if (request.Items.Count == 0)
+        return Result<Order>.Failure("Order must contain at least one item");
+
+    var order = Order.Create(request);
+    await _repository.AddAsync(order, CancellationToken.None);
+    return Result<Order>.Success(order);
+}
+```
+
+## Repository Pattern with EF Core
+
+```csharp
+public sealed class SqlOrderRepository : IOrderRepository
+{
+    private readonly AppDbContext _db;
+
+    public SqlOrderRepository(AppDbContext db) => _db = db;
+
+    public async Task<Order?> FindByIdAsync(Guid id, CancellationToken cancellationToken)
+    {
+        return await _db.Orders
+            .Include(o => o.Items)
+            .AsNoTracking()
+            .FirstOrDefaultAsync(o => o.Id == id, cancellationToken);
+    }
+
+    public async Task<IReadOnlyList<Order>> FindByCustomerAsync(
+        string customerId,
+        CancellationToken cancellationToken)
+    {
+        return await _db.Orders
+            .Where(o => o.CustomerId == customerId)
+            .OrderByDescending(o => o.CreatedAt)
+            .AsNoTracking()
+            .ToListAsync(cancellationToken);
+    }
+
+    public async Task AddAsync(Order order, CancellationToken cancellationToken)
+    {
+        _db.Orders.Add(order);
+        await _db.SaveChangesAsync(cancellationToken);
+    }
+}
+```
+
+## Middleware and Pipeline
+
+```csharp
+// Custom middleware
+public sealed class RequestTimingMiddleware
+{
+    private readonly RequestDelegate _next;
+    private readonly ILogger<RequestTimingMiddleware> _logger;
+
+    public RequestTimingMiddleware(RequestDelegate next, ILogger<RequestTimingMiddleware> logger)
+    {
+        _next = next;
+        _logger = logger;
+    }
+
+    public async Task InvokeAsync(HttpContext context)
+    {
+        var stopwatch = Stopwatch.StartNew();
+        try
+        {
+            await _next(context);
+        }
+        finally
+        {
+            stopwatch.Stop();
+            _logger.LogInformation(
+                "Request {Method} {Path} completed in {ElapsedMs}ms with status {StatusCode}",
+                context.Request.Method,
+                context.Request.Path,
+                stopwatch.ElapsedMilliseconds,
+                context.Response.StatusCode);
+        }
+    }
+}
+```
+
+## Minimal API Patterns
+
+```csharp
+// Organized with route groups
+var orders = app.MapGroup("/api/orders")
+    .RequireAuthorization()
+    .WithTags("Orders");
+
+orders.MapGet("/{id:guid}", async (
+    Guid id,
+    IOrderRepository repository,
+    CancellationToken cancellationToken) =>
+{
+    var order = await repository.FindByIdAsync(id, cancellationToken);
+    return order is not null
+        ? TypedResults.Ok(order)
+        : TypedResults.NotFound();
+});
+
+orders.MapPost("/", async (
+    CreateOrderRequest request,
+    IOrderService service,
+    CancellationToken cancellationToken) =>
+{
+    var result = await service.PlaceOrderAsync(request, cancellationToken);
+    return result.IsSuccess
+        ? TypedResults.Created($"/api/orders/{result.Value!.Id}", result.Value)
+        : TypedResults.BadRequest(result.Error);
+});
+```
+
+## Guard Clauses
+
+```csharp
+// Good: Early returns with clear validation
+public async Task<ProcessResult> ProcessPaymentAsync(
+    PaymentRequest request,
+    CancellationToken cancellationToken)
+{
+    ArgumentNullException.ThrowIfNull(request);
+
+    if (request.Amount <= 0)
+        throw new ArgumentOutOfRangeException(nameof(request.Amount), "Amount must be positive");
+
+    if (string.IsNullOrWhiteSpace(request.Currency))
+        throw new ArgumentException("Currency is required", nameof(request.Currency));
+
+    // Happy path continues here without nesting
+    var gateway = _gatewayFactory.Create(request.Currency);
+    return await gateway.ChargeAsync(request, cancellationToken);
+}
+```
+
+## Anti-Patterns to Avoid
+
+| Anti-Pattern | Fix |
+|---|---|
+| `async void` methods | Return `Task` (except event handlers) |
+| `.Result` or `.Wait()` | Use `await` |
+| `catch (Exception) { }` | Handle or rethrow with context |
+| `new Service()` in constructors | Use constructor injection |
+| `public` fields | Use properties with appropriate accessors |
+| `dynamic` in business logic | Use generics or explicit types |
+| Mutable `static` state | Use DI scoping or `ConcurrentDictionary` |
+| `string.Format` in loops | Use `StringBuilder` or interpolated string handlers |

package/src/skills/frontend-design/SKILL.md

@@ -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

package/src/skills/frontend-slides/SKILL.md

@@ -0,0 +1,184 @@
+---
+name: frontend-slides
+description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
+origin: ECC
+---
+
+# Frontend Slides
+
+Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
+
+Inspired by the visual exploration approach showcased in work by zarazhangrui (credit: @zarazhangrui).
+
+## When to Activate
+
+- Creating a talk deck, pitch deck, workshop deck, or internal presentation
+- Converting `.ppt` or `.pptx` slides into an HTML presentation
+- Improving an existing HTML presentation's layout, motion, or typography
+- Exploring presentation styles with a user who does not know their design preference yet
+
+## Non-Negotiables
+
+1. **Zero dependencies**: default to one self-contained HTML file with inline CSS and JS.
+2. **Viewport fit is mandatory**: every slide must fit inside one viewport with no internal scrolling.
+3. **Show, don't tell**: use visual previews instead of abstract style questionnaires.
+4. **Distinctive design**: avoid generic purple-gradient, Inter-on-white, template-looking decks.
+5. **Production quality**: keep code commented, accessible, responsive, and performant.
+
+Before generating, read `STYLE_PRESETS.md` for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas.
+
+## Workflow
+
+### 1. Detect Mode
+
+Choose one path:
+- **New presentation**: user has a topic, notes, or full draft
+- **PPT conversion**: user has `.ppt` or `.pptx`
+- **Enhancement**: user already has HTML slides and wants improvements
+
+### 2. Discover Content
+
+Ask only the minimum needed:
+- purpose: pitch, teaching, conference talk, internal update
+- length: short (5-10), medium (10-20), long (20+)
+- content state: finished copy, rough notes, topic only
+
+If the user has content, ask them to paste it before styling.
+
+### 3. Discover Style
+
+Default to visual exploration.
+
+If the user already knows the desired preset, skip previews and use it directly.
+
+Otherwise:
+1. Ask what feeling the deck should create: impressed, energized, focused, inspired.
+2. Generate **3 single-slide preview files** in `.ecc-design/slide-previews/`.
+3. Each preview must be self-contained, show typography/color/motion clearly, and stay under roughly 100 lines of slide content.
+4. Ask the user which preview to keep or what elements to mix.
+
+Use the preset guide in `STYLE_PRESETS.md` when mapping mood to style.
+
+### 4. Build the Presentation
+
+Output either:
+- `presentation.html`
+- `[presentation-name].html`
+
+Use an `assets/` folder only when the deck contains extracted or user-supplied images.
+
+Required structure:
+- semantic slide sections
+- a viewport-safe CSS base from `STYLE_PRESETS.md`
+- CSS custom properties for theme values
+- a presentation controller class for keyboard, wheel, and touch navigation
+- Intersection Observer for reveal animations
+- reduced-motion support
+
+### 5. Enforce Viewport Fit
+
+Treat this as a hard gate.
+
+Rules:
+- every `.slide` must use `height: 100vh; height: 100dvh; overflow: hidden;`
+- all type and spacing must scale with `clamp()`
+- when content does not fit, split into multiple slides
+- never solve overflow by shrinking text below readable sizes
+- never allow scrollbars inside a slide
+
+Use the density limits and mandatory CSS block in `STYLE_PRESETS.md`.
+
+### 6. Validate
+
+Check the finished deck at these sizes:
+- 1920x1080
+- 1280x720
+- 768x1024
+- 375x667
+- 667x375
+
+If browser automation is available, use it to verify no slide overflows and that keyboard navigation works.
+
+### 7. Deliver
+
+At handoff:
+- delete temporary preview files unless the user wants to keep them
+- open the deck with the platform-appropriate opener when useful
+- summarize file path, preset used, slide count, and easy theme customization points
+
+Use the correct opener for the current OS:
+- macOS: `open file.html`
+- Linux: `xdg-open file.html`
+- Windows: `start "" file.html`
+
+## PPT / PPTX Conversion
+
+For PowerPoint conversion:
+1. Prefer `python3` with `python-pptx` to extract text, images, and notes.
+2. If `python-pptx` is unavailable, ask whether to install it or fall back to a manual/export-based workflow.
+3. Preserve slide order, speaker notes, and extracted assets.
+4. After extraction, run the same style-selection workflow as a new presentation.
+
+Keep conversion cross-platform. Do not rely on macOS-only tools when Python can do the job.
+
+## Implementation Requirements
+
+### HTML / CSS
+
+- Use inline CSS and JS unless the user explicitly wants a multi-file project.
+- Fonts may come from Google Fonts or Fontshare.
+- Prefer atmospheric backgrounds, strong type hierarchy, and a clear visual direction.
+- Use abstract shapes, gradients, grids, noise, and geometry rather than illustrations.
+
+### JavaScript
+
+Include:
+- keyboard navigation
+- touch / swipe navigation
+- mouse wheel navigation
+- progress indicator or slide index
+- reveal-on-enter animation triggers
+
+### Accessibility
+
+- use semantic structure (`main`, `section`, `nav`)
+- keep contrast readable
+- support keyboard-only navigation
+- respect `prefers-reduced-motion`
+
+## Content Density Limits
+
+Use these maxima unless the user explicitly asks for denser slides and readability still holds:
+
+| Slide type | Limit |
+|------------|-------|
+| Title | 1 heading + 1 subtitle + optional tagline |
+| Content | 1 heading + 4-6 bullets or 2 short paragraphs |
+| Feature grid | 6 cards max |
+| Code | 8-10 lines max |
+| Quote | 1 quote + attribution |
+| Image | 1 image constrained by viewport |
+
+## Anti-Patterns
+
+- generic startup gradients with no visual identity
+- system-font decks unless intentionally editorial
+- long bullet walls
+- code blocks that need scrolling
+- fixed-height content boxes that break on short screens
+- invalid negated CSS functions like `-clamp(...)`
+
+## Related ECC Skills
+
+- `frontend-patterns` for component and interaction patterns around the deck
+- `liquid-glass-design` when a presentation intentionally borrows Apple glass aesthetics
+- `e2e-testing` if you need automated browser verification for the final deck
+
+## Deliverable Checklist
+
+- presentation runs from a local file in a browser
+- every slide fits the viewport without scrolling
+- style is distinctive and intentional
+- animation is meaningful, not noisy
+- reduced motion is respected
+- file paths and customization points are explained at handoff