--- name: add-component description: Create or edit Flint Static UI components (TypeScript classes extending Component). 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/.test.ts`: ```typescript import { describe, it, expect } from 'bun:test'; import { MyComponent } from './.js'; describe('MyComponent', () => { it('should render with required props', () => { const html = MyComponent.render({ /* props */ }); expect(html).toContain(' { const html = MyComponent.render({ text: '', }); expect(html).not.toContain('

add-component

Scan your own AI components