How AI Agents Work

A visual breakdown of the agent architecture and decision loop

4

Core Components

LLM · Tools · Memory · Orchestrator

Perceive

Receive user input and extract intent, context, and constraints

Reason

Plan steps, select tools, evaluate options before acting

OBSERVE

Execute tool calls, capture results, feed back into context

RESPOND

Synthesize findings, format output, deliver to user

HTML Slide Deck Pipeline

8-step reviewable workflow — every stage traceable and editable

01 Analyze

Classify content, detect language, identify style signals

02 Confirm

Style, theme, audience, slide count — user confirms

03 Outline

Generate slide outline with full CSS_STYLE_INSTRUCTIONS

04 Review

Review outline structure, edit or reorder as needed

05 Generate

Copy template, substitute CSS vars, insert slide HTML

06 Review

Final HTML quality review before delivery

07 Preview

Open in browser, test navigation and animations

08 Ship

Single index.html — ready to share or print to PDF

Output

Self-contained HTML · WebGL backgrounds · Keyboard/Wheel/Touch navigation · Motion One animations · Cmd+P to PDF

peng-skills 2026

Three AI agent skills for HTML-based content creation

3

SKILLS

slide-deck · image-cards · cover-image

17

CURATED PRESETS

Auto-matched from content keywords

8

REVIEW STEPS

Every stage traceable and editable

12

CARD STYLES

For social media and article embeds

11

COVER PALETTES

From warm to duotone

1

HTML OUTPUT

No backend · No API key · No image gen