add-component

name	add-component
description	Create or edit Flint Static UI components (TypeScript classes extending Component<T>). Use when building reusable server-rendered UI that appears across multiple pages via {{tag}} placeholders in templates.

Add / Edit a Component

Create or modify reusable UI components in src/components/. Components are TypeScript classes that return HTML strings, invoked via {{tag}} placeholders in templates.

Trigger Phrases

• "Create a [name] component"
• "Add a reusable [card / banner / alert / grid] UI element"
• "Build a [name] widget that appears on multiple pages"
• "I need a {{tag}} that renders [description]"
• "Add a [testimonial / pricing / FAQ] section component"
• "Make the [name] component show [new data]"
• "Extend the [existing component] to support [variant]"

When to Use

• Building reusable UI that appears on multiple pages (nav, footer, card, alert)
• Rendering logic needs loops, conditionals, or computed values
• HTML output needs escapeHtml() for safety
• UI pattern needs unit testing

When NOT to Use

• Page-specific content → use Markdown in content/
• Page-specific HTML → use :::html block in content
• Page layout structure → use a template
• Client-side interactivity → use src/client/*.ts

Procedure

1. Write tests first

Create src/components/<name>.test.ts:

import { describe, it, expect } from 'bun:test';
import {  }  ;

(,  {
  (,  {
     html = .({  });
    (html).();
  });

  (,  {
     html = .({
      : ,
    });
    (html)..();
    (html).();
  });
});