Prompt lintPro
A prompt editor with inline warnings: conflicting rules, vague words, a missing output format and shouting, with squiggles, a gutter, hover explanations and one click fixes.
On this page
Installation
Usage
import { PromptLint } from "@/components/ui/chatcn/pro/prompt-lint"
<PromptLint value={prompt} onValueChange={setPrompt} />Built in rules: conflict (two rules that cannot both hold, such as concise and explain everything; both are marked and each names the other), vague (try to, if possible, a few, short, as needed, etc.), format (nothing says what the answer looks like) and caps (capitals as emphasis). Issues are underlined with a wavy line in their severity color, flagged by line in the gutter, explained on hover with a fix, and listed under the editor where the keyboard reaches them; choosing one selects its text. Add your own checks with rules: functions that return { id, rule, severity, start, end, title, detail, fix? }. lintPrompt is exported for CI and server checks. The textarea stays native, so caret, selection, undo and IME work as usual.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
value, defaultValue, onValueChange | string | The prompt |
rules | ((text) => LintIssue[])[] | Your own checks, after the built in ones |
disableRules | string[] | conflict, vague, format, caps |
label, placeholder | string | Editor name and example |
readOnly, disabled | boolean | Read only keeps the explanations and hides fixes |
maxHeight | number | Height before the editor scrolls. Default 360 |
Keyboard
| Key | Action |
|---|---|
| Tab from the editor | Into the issue list: select, fix or ignore each issue |
| Enter on an issue | Selects its text in the editor |
Accessibility
- The editor is a labeled native textarea described by the issue list.
- Severity is an icon and a hidden word as well as a color; the counts are a polite live region.
- Everything the hover card offers is also in the list.
Motion
The hover card fades and scales in from 0.97 over 125 ms, only for the pointer and only when motion is allowed. Fixes apply instantly.