Agentic Basics

Meet Your Instructors

Pingfan Hu

PhD Candidate, EMSE
Systems Engineering

Dr. John Helveston

Associate Professor, EMSE
Director, Data Analytics

Today

01

What is an Agent?

Assistants vs agents

02

Workflow Setup

Agent + IDE + Speech-to-Text

03

Website Example

Multi-page HTML + A Style Sheet

04

Make It Reproducible

CLAUDE.md + Skills

Assistants vs Agents

Assistants

One-off tasks.

ChatGPT Claude Gemini

Today's focus

Agents

Full project workflows.

Codex Claude Code Gemini CLI

Daily questions, small tasks,
search engine.

File editing, continues development, long-term projects.

Agentic
Engineering

=

Model

+

Skills

+

Files

— practice 01 —

Install and initialize all three software.

Claude Code

AI agent by Anthropic.

Positron

Data science IDE by Posit.

FluidVoice

Voice-to-text app.

Where you launch matters

Global Scope

· ~/.claude/ resources
· Top-level CLAUDE.md for all projects
· Location for all skills and rules

Project Scope

· project/.claude/ resources
· Project-level CLAUDE.md
· Project-scope settings and hooks

Open your workspace

01

Create a folder

Choose a place on your computer and create a new folder. Name it however you like, without spaces.

02

Open it in Positron

In Positron, choose File › Open Folder… and pick the folder you just made.

03

Launch Claude Code

In Positron's terminal, type claude and press Enter.

Agents can do almost anything

Write code

Debug & refactor

Analyze data

Generate images

Summarize docs

Write & edit

Automate tasks

today's focus

Build HTML

Let’s get started with a website

index.html

about.html

contact.html

+

styles.css

several HTML files

one CSS file

Your First HTML Page

Talk using FluidVoice, or copy the text below and paste to Claude Code.

Example prompt

Create a single-page HTML introduction for Tom Hanks, a famous movie star in the United States, and place all styling in a separate styles.css file.

Tom Hanks is only one example.
Replace the name with anyone you admire: a movie star, an athlete, a scientist, anyone famous.

Example Output: Single Page

tom-hanks.html

tom-hanks.html + styles.css

Some More HTML Pages

Talk using FluidVoice, or copy the text below and paste to Claude Code.

Example prompt

For each notable film on the Tom Hanks page, create its own HTML page. Then link everything together: make each film on the main page clickable so it opens that film's page, and add a "Back to Tom Hanks" button at the top of every film page. Reuse the same styles.css so all pages match.

Tom Hanks is only one example.
Replace the name with anyone you like, the same person you chose before.

Example Output: A Full Website

tom-hanks.html

6 HTML pages + styles.css

The Structure of a Website

A Minimum Website

=

Several HTML Pages

+

A Stylesheet

my-website/

├─ html/

│ ├─ index.html

│ ├─ about.html

│ ├─ projects.html

│ └─ contact.html

└─ styles/

└─ styles.css

index.html

Know what you’re building

Idea

what to build,
what goes in it

→

Frameworks

scaffold the pages, links & stylesheet

Bootstrap Vue React

→

→

Today's focus

AI Agent

writes directly

→

HTML & Styling

several pages

index.html about.html contact.html

+

one stylesheet

styles.css

— practice 02 —

Build a small multi-page website.

STEP 01

Launch claude. Ask for one HTML page + its CSS.

STEP 02

Open index.html. Iterate on the look.

STEP 03

Add more pages, linked so you can click between them.

Happy with your homepage? Drop the link in the chat so everyone can see it.

The CLAUDE.md file

CLAUDE.md

Claude Code

≡

AGENTS.md

other agents

Home directory

~/.claude/
└── CLAUDE.md

Tell Claude Code to create

Global behavior

Project directory

project/
├── CLAUDE.md
└── folder/CLAUDE.md

Run /init to create

High-level summary of the project

Four modes of Claude Code

Use Shift + Tab to switch the mode

Plan

Make plans before a big work.

read-only

Manual

Manually approve/deny edits.

safe but slow

Accept Edits

Auto-applies file edits.

semi engagement

Auto

Auto-approves EVERYTHING.

full file access, use with care

Basic commands

/init

Creates project CLAUDE.md

/model

Switch the model

/effort

Low / mid / high thinking

/help

List every command

/resume

Reopen past sessions

/rewind

Roll back to a checkpoint

/compact

Condense chat, keep the core

/clear

Wipe context, start fresh

Skills

what is a skill?

A slash command that wraps a reusable, multi-step process.

Exemplar skill

ph-slide/

Why it helps

Saves time

Reproducible

Stable & consistent

Installing skills

Claude loads skills only from ~/.claude/skills/

Store it safely

1

Keep skills in a Git repo

2

Symlink to ~/.claude/skills/

Develop and use, both safe

Name it wisely

~/.claude/skills/

ph-html

ph-image

ph-slide

other-skill-1

other-skill-2

Build your skill

Now that we have a working site, let's build a skill from it, with Claude's help

Build the skill

Create a symlink

Example prompt

Look at this website folder and turn it into a reusable skill: write a SKILL.md plus a template/ folder holding the pages and styles.css. Then symlink it into ~/.claude/skills/ so I can reuse it anytime.

— practice 03 —

Turn your site into a skill.

STEP 01

Create a new repo, open it using your IDE, then launch claude inside it.

STEP 02

Give Claude your site's path and let it write your skill and the symlink shell command.

STEP 03

Ask Claude to run that command to create the symlink.

Three takeaways

You used an agent.

You built a website project.

You turned it into a skill.

One More Thing…

"

Your success is determined by your ability to speak, your ability to write, and the quality of your ideas — in that order.

   — Patrick Winston, MIT
  