Agent skills and the design of your site

DHUM / DATA 70600 ยท Class 6

Skills

Contents of a skill folder

  • A skill is a folder of instructions for one kind of work
  • The main file is SKILL.md
frontend-design/SKILL.mdnamewhat to call itdescriptionwhen to use itinstructionshow to do the workLICENSE.txta skill can also holdexamples/finished work to imitatereference/longer notes it reads when neededscripts/small programs it can run

The start of a SKILL.md file

  • It's all text
  • If you can write clear instructions for a person, you can write one
---name: frontend-designdescription: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one...---# Frontend DesignTypography carries the personality ofthe page...the namethe agent reads thisto decide when to use itthe instructions areordinary prose

Skills during a conversation

  • Unused skills take up almost no room
  • You can also call one by name
at the start of a conversationnames and descriptions onlyfrontend-designvisual design of pagespdfreading and making PDFsskill-installerinstalling skills"Redesign my site"or $frontend-designmatchesthe full instructions are read

A prompt, a skill, and project instructions

  • Project instructions come in Class 13
a promptone requestproject Aproject Ba skillone kind of work, in any projectproject Aproject Bproject instructionsevery conversation in one projectproject Aproject Beach square is a conversation; colored squares are where the guidance applies

Sources of skills

bundled with Codexskill-installerGitHubanthropics/skillsthe plugin directoryin the Codex appyour ownwritten by youyour skillson this computerCodexClaudeother agentsthe same format works in each

Installing a skill from someone else

  • The agent follows the skill's instructions on your computer
  • It may run the skill's scripts
  • Read SKILL.md before installing one from a source you don't know
whoeverwrote itthe skillSKILL.mdinstructionsscripts/programsthe agentyour filesand accounts

The frontend-design skill

  • Anthropic publishes it on GitHub
  • Base the design on the subject
  • Choose type deliberately
  • Avoid the looks that generated pages share

Install the frontend-design skill from github.com/anthropics/skills/tree/main/skills/frontend-design

Design

The browser inside Codex

Codexthe conversationlocalhost:8000your siteopens the pageclicks and typestakes screenshotsthe agent checks its own work in the same browser you are looking at

Comments and styling on the page

  • Click part of the page and leave a comment
  • Or drag over an area
  • The styling panel lets you try a font, size, spacing, or color first
localhost:8000Jane Doesmaller, and less boldstylingfontIBM Plex Serifsize32spacing24colorpreview, then send to the agent

First versions that look alike

  • Models lean toward the most common choices they've seen
  • Your name and work come from your material
  • The layout, colors, and headline come from those defaults
  • The frontend-design skill has instructions against them
Jane DoeSam LeeAna Ruiza large banner, a short bio, three cards of projects

References for a design

  • Drag screenshots into the message
  • Say what to take from each one
  • "The headings are big and narrow" is enough
a posterthe big, narrow typea book pagehow much white spacea museum sitehow images are captionedthe agent

Four words for design

  • "The hierarchy is flat"
  • "The grid falls apart at phone width"
hierarchywhat is noticed firsttype scalehow sizes step downAa54Aa36Aa24Aa17gridthe columns things line up tocontrasthow different neighbors areAaAa

Checks before and after publishing

Every wordIs each factabout you correct,and did it comefrom yourmaterial?Narrow and zoomPhone width and200% zoom. Isanything cut offor scrollingsideways?Every linkDo links andbuttons go wherethey should, onthe live site too?The keyboardPress Tab throughthe page. Can yousee where you are?Contrast and titleCan you read allthe text? Does thebrowser tab showthe page name?

Homework

  • Install the frontend-design skill
  • Revise your site's design with two or three references
  • Leave comments on the page
  • Run the five checks, on the live site too
  • Have the agent save and push, so the public site updates