Skip to content

Commit ec5a81e

Browse files
Sayhi-bzbSayhi-bzb
committed
refactor: restructure agent-html DSL and runtime, remove legacy gap defaults
This commit overhauls the agent-html system: - Remove built-in gap defaults for layout components, update validation rules - Restructure gallery preview UI imports and isolate runtime components - Add standalone example app with source viewing and metrics - Update test configurations and add boundary checks - Sync skill documentation and generated reference files - Add react-resizable-panels dependency for layout panels
1 parent 43cabb7 commit ec5a81e

64 files changed

Lines changed: 2345 additions & 492 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.agents/skills/agent-html/SKILL.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Write `agent-html` DSL, not JSX or HTML.
1919
- Output only `agent-html` DSL.
2020
- Use `PascalCase` tags.
2121
- Root must be `<Page>`.
22-
- Use quoted scalar attrs like `gap="md"` or `value="82"`.
22+
- Use quoted scalar attrs like `columns="2"` or `value="82"`.
2323
- Do not use `class`, `className`, `style`, imports, hooks, JS expressions, or raw HTML tags.
2424
- Do not invent tags or attrs not present in the grammar reference.
2525
- Do not put bare text directly under `Page`, `Stack`, `Cluster`, or `Grid`.
@@ -30,6 +30,12 @@ Write `agent-html` DSL, not JSX or HTML.
3030
- Valid and invalid fixture patterns: `references/examples.md`
3131
- Icon lookup notes: `references/icons.md`
3232

33+
These files are generated from `src/agent-html/`.
34+
Do not hand-edit generated reference files.
35+
When the source changes, rerun the sync script.
36+
3337
## Scripts
3438

3539
- Search Lucide icon names: `scripts/search_icons.py "<query>"`
40+
- Sync generated skill resources from project sources:
41+
`python src/agent-html/scripts/sync_skill.py`

‎.agents/skills/agent-html/references/examples.md‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!-- AUTO-GENERATED FROM src/agent-html/fixtures -->
12
# Agent-HTML Examples
23

34
Source fixtures live in:
@@ -9,33 +10,17 @@ Use the closest valid fixture before inventing new structure.
910

1011
## Valid Patterns
1112

12-
- `minimal-page.xml`
13-
- Smallest legal page with `Page -> Stack -> Card`
1413
- `card-tabs-grid.xml`
15-
- Tabs + accordion + table composition
1614
- `complex-dashboard.xml`
17-
- Multi-section dashboard with layout primitives, cards, table, carousel, chart, and icons
1815
- `icon-basic.xml`
19-
- Minimal icon usage in `Alert` and `Badge`
16+
- `minimal-page.xml`
2017

2118
## Invalid Patterns
2219

23-
- `unknown-tag.xml`
24-
- Unknown DSL tag
2520
- `bare-text-under-grid.xml`
26-
- Bare text directly under layout node
27-
- `missing-tabs-trigger-value.xml`
28-
- Required attr missing
2921
- `carousel-missing-content.xml`
30-
- `Carousel` missing `CarouselContent`
3122
- `chart-missing-series.xml`
32-
- `Chart` missing `ChartSeries`
23+
- `layout-gap-not-allowed.xml`
24+
- `missing-tabs-trigger-value.xml`
3325
- `unknown-icon-name.xml`
34-
- Lucide icon name not found
35-
36-
## Usage Guidance
37-
38-
- Start from `minimal-page.xml` for tiny pages.
39-
- Start from `card-tabs-grid.xml` for common UI compositions.
40-
- Start from `complex-dashboard.xml` for realistic multi-panel pages.
41-
- Start from `icon-basic.xml` when testing icon placement.
26+
- `unknown-tag.xml`

‎.agents/skills/agent-html/references/grammar.md‎

Lines changed: 144 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,165 @@
1+
<!-- AUTO-GENERATED FROM src/agent-html/schema/prompt.md -->
12
# Agent-HTML Grammar
23

3-
Source of truth lives in:
4+
# Gallery Preview DSL
45

5-
- `src/agent-html/schema/prompt.md`
6+
## Contract
67

7-
Use that file when you need the full grammar.
8-
9-
## Core Contract
10-
11-
- Output only `agent-html` DSL.
8+
- Output only Gallery Preview DSL.
129
- Use JSX-like XML tags with `PascalCase`.
1310
- Root must be `<Page>`.
14-
- Attr values must be quoted scalars.
11+
- Attribute values must be quoted scalars.
12+
Example: `columns="2"`, `value="82"`.
1513
- Do not use `class`, `className`, `style`, imports, fragments, hooks, JS expressions, or raw HTML.
1614
- Do not use unknown tags or unknown attrs.
1715
- Do not put bare text directly under `Page`, `Stack`, `Cluster`, or `Grid`.
1816

19-
## Layout
20-
21-
- `Page:title=string, gap?="xs|sm|md|lg"`
22-
- `Stack:gap?="xs|sm|md|lg"`
23-
- `Cluster:gap?="xs|sm|md|lg", justify?="start|center|end|between", wrap?="true|false"`
24-
- `Grid:columns?="1|2|3|4", gap?="xs|sm|md|lg"`
25-
26-
## Supported UI Tags
27-
28-
- `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`
29-
- `Alert`, `AlertTitle`, `AlertDescription`, `AlertAction`
30-
- `AspectRatio`
31-
- `Badge`
32-
- `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`
33-
- `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`
34-
- `Progress`
35-
- `Separator`
36-
- `Table`, `TableCaption`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`
37-
- `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`
38-
- `Chart`, `ChartSeries`, `ChartTooltip`
39-
- `Icon`
40-
4117
## Defaults
4218

43-
- `Page gap="md"`
44-
- `Stack gap="md"`
45-
- `Cluster gap="md" justify="start" wrap="true"`
46-
- `Grid columns="2" gap="md"`
19+
- `Cluster justify="start" wrap="true"`
20+
- `Grid columns="2"`
4721
- `Alert variant="default"`
4822
- `Card size="default"`
4923
- `Carousel orientation="horizontal"`
5024
- `Separator orientation="horizontal"`
5125
- `Tabs orientation="horizontal"`
5226
- `ChartTooltip hideLabel="false"`
5327

54-
## Icon
28+
## Layout
29+
30+
- `Page:title=string -> Layout | UI`
31+
- `Stack -> Layout | UI`
32+
- `Cluster:justify?="start|center|end|between", wrap?="true|false" -> Layout | UI`
33+
- `Grid:columns?="1|2|3|4" -> Layout | UI`
34+
35+
## UI
36+
37+
- `Accordion:type="single|multiple" -> AccordionItem+`
38+
- `AccordionItem:value?=string, disabled?="true|false" -> AccordionTrigger, AccordionContent`
39+
- `AccordionTrigger -> Text`
40+
- `AccordionContent -> Layout | UI | Text`
41+
42+
- `Alert:variant?="default|destructive" -> Icon?, AlertTitle?, AlertDescription?, AlertAction?`
43+
- `AlertTitle -> Text`
44+
- `AlertDescription -> Text`
45+
- `AlertAction -> Layout | UI | Text`
46+
47+
- `AspectRatio:ratio=number -> Layout | UI`
48+
49+
- `Badge:variant?="default|secondary|destructive|outline|ghost|link" -> Text, Icon?`
50+
51+
- `Card:size?="default|sm" -> CardHeader?, CardContent?, CardFooter?`
52+
- `CardHeader -> CardTitle?, CardDescription?, CardAction?`
53+
- `CardTitle -> Text`
54+
- `CardDescription -> Text`
55+
- `CardAction -> Layout | UI | Text`
56+
- `CardContent -> Layout | UI | Text`
57+
- `CardFooter -> Layout | UI | Text`
58+
59+
- `Carousel:orientation?="horizontal|vertical" -> CarouselContent, CarouselPrevious?, CarouselNext?`
60+
- `CarouselContent -> CarouselItem+`
61+
- `CarouselItem -> Layout | UI | Text`
62+
- `CarouselPrevious -> none`
63+
- `CarouselNext -> none`
64+
65+
- `Progress:value=number -> none`
66+
67+
- `Separator:orientation?="horizontal|vertical" -> none`
68+
69+
- `Table -> TableCaption?, TableHeader?, TableBody?, TableFooter?`
70+
- `TableCaption -> Text`
71+
- `TableHeader -> TableRow+`
72+
- `TableBody -> TableRow+`
73+
- `TableFooter -> TableRow+`
74+
- `TableRow -> TableHead+ | TableCell+`
75+
- `TableHead -> Text`
76+
- `TableCell -> Layout | UI | Text`
77+
78+
- `Tabs:orientation?="horizontal|vertical", defaultValue?=string -> TabsList, TabsContent+`
79+
- `TabsList -> TabsTrigger+`
80+
- `TabsTrigger:value=string, disabled?="true|false" -> Text, Icon?`
81+
- `TabsContent:value=string -> Layout | UI | Text`
82+
83+
- `Chart:type="area|bar" -> ChartSeries+, ChartTooltip?`
84+
- `ChartSeries:key=string, label?=string`
85+
- `ChartTooltip:hideLabel?="true|false" -> none`
5586

5687
- `Icon:name=string -> none`
57-
- Names use Lucide kebab-case names.
58-
- Do not guess icon names. Use the icon search helper if unsure.
88+
89+
## Canonical Example
90+
91+
```xml
92+
<Page title="Gallery Preview">
93+
<Stack>
94+
<Card>
95+
<CardHeader>
96+
<CardTitle>Controls</CardTitle>
97+
<CardDescription>Preview action and state tokens.</CardDescription>
98+
</CardHeader>
99+
<CardContent>
100+
<Tabs defaultValue="publish">
101+
<TabsList>
102+
<TabsTrigger value="publish">Publish</TabsTrigger>
103+
<TabsTrigger value="review">Review</TabsTrigger>
104+
</TabsList>
105+
<TabsContent value="publish">
106+
<Stack>
107+
<Badge variant="secondary">82%</Badge>
108+
<Progress value="82" />
109+
</Stack>
110+
</TabsContent>
111+
<TabsContent value="review">
112+
<Alert>
113+
<AlertTitle>Review queue</AlertTitle>
114+
<AlertDescription>5 items remain.</AlertDescription>
115+
</Alert>
116+
</TabsContent>
117+
</Tabs>
118+
</CardContent>
119+
</Card>
120+
121+
<Grid columns="2">
122+
<Card>
123+
<CardContent>
124+
<Accordion type="single">
125+
<AccordionItem value="notes">
126+
<AccordionTrigger>Migration notes</AccordionTrigger>
127+
<AccordionContent>
128+
<Badge variant="outline">Pending</Badge>
129+
</AccordionContent>
130+
</AccordionItem>
131+
</Accordion>
132+
</CardContent>
133+
</Card>
134+
135+
<Card>
136+
<CardContent>
137+
<Table>
138+
<TableHeader>
139+
<TableRow>
140+
<TableHead>Signal</TableHead>
141+
<TableHead>State</TableHead>
142+
</TableRow>
143+
</TableHeader>
144+
<TableBody>
145+
<TableRow>
146+
<TableCell>Spacing</TableCell>
147+
<TableCell>Balanced</TableCell>
148+
</TableRow>
149+
</TableBody>
150+
</Table>
151+
</CardContent>
152+
</Card>
153+
</Grid>
154+
</Stack>
155+
</Page>
156+
```
157+
158+
## Never
159+
160+
- No `<div>`, `<p>`, `<span>`, `<img>`, or raw HTML tags.
161+
- No `class`, `className`, or `style`.
162+
- No JSX expressions like `{50}` or `{16 / 9}`.
163+
- No unknown tags.
164+
- No `TabsPanel`.
165+
- No bare text under `Page`, `Stack`, `Cluster`, or `Grid`.

‎.agents/skills/agent-html/references/icons.md‎

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,12 @@
1+
<!-- AUTO-GENERATED FROM src/agent-html/icons/README.md -->
12
# Agent-HTML Icons
23

3-
Do not embed the Lucide icon list into DSL output or prompt text.
4+
This directory isolates lucide icon lookup for the experimental `agent-html`
5+
DSL.
46

5-
## Rule
7+
The DSL prompt stays minimal:
68

7-
- Write only:
8-
- `<Icon name="alert-circle" />`
9+
- `Icon:name=string -> none`
910

10-
## Name Source
11-
12-
Project icon utilities live in:
13-
14-
- `src/agent-html/icons/icon-registry.ts`
15-
- `src/agent-html/icons/search-icons.ts`
16-
17-
## Query
18-
19-
Use the helper script:
20-
21-
```bash
22-
python .agents/skills/agent-html/scripts/search_icons.py "alert"
23-
```
24-
25-
Prefer exact names returned by the helper.
11+
The full icon list is not embedded in the prompt.
12+
Validation and lookup happen through the registry helpers in this directory.

‎.agents/skills/agent-html/scripts/search_icons.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
# AUTO-GENERATED FROM src/agent-html/icons/search-icons.ts intent
12
from pathlib import Path
23
import re
34
import sys

‎apps/agent-html/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"radix-ui": "^1.4.3",
2424
"react": "^19.2.4",
2525
"react-dom": "^19.2.4",
26+
"react-resizable-panels": "^4.11.1",
2627
"react-syntax-highlighter": "^16.1.1",
2728
"recharts": "^3.8.0",
2829
"shadcn": "^4.8.0",

0 commit comments

Comments
 (0)