aiux
Patterns & SkillsPatterns & SkillsCoursesCoursesNewsNewsResourcesResourcesSavedSaved
Overview

Foundations

  • What Is Claude Code?
  • What a Claude Code Skill Is
  • Patterns Teach You, Skills Teach Your Agent

Setup

  • Install a Skill Pack

Core Features

  • How Triggering Works

Best Practices

  • Working With Skills Day to Day
  1. Guides
  2. /
  3. Using AI UX Skills with Claude Code
  4. /
  5. Patterns Teach You, Skills Teach Your Agent
FoundationsLesson 3 of 6

Patterns Teach You, Skills Teach Your Agent

3 min readClaude Code for Designers

A pattern page and a skill file carry the same design knowledge, but they serve different readers at different moments. Knowing the difference tells you when to read one and when to install the other.

Who reads it
A pattern page: you, while you're deciding whether the approach is right. A skill: your agent, while it's writing code.
When it applies
A pattern page: whenever you open it. A skill: only when your request matches its trigger description.
Where it lives
A pattern page: on aiuxdesign.guide. A skill: in your repo, at `.claude/skills/aiux-<pattern>/SKILL.md`.
How long it lasts
A pattern page: one read, then it's on you to remember. A skill: every session, for as long as the file stays in the repo.

The two shapes aren't separate content. A skill's body is generated from the same pattern's takeaways, just reformatted as instructions an agent can act on instead of prose a person reads.

Read one, install the other

Read the pattern page to judge whether Claude's output actually realizes the pattern. Install the skill so the pattern gets applied even on the sessions where you're not watching closely.

Take Human-in-the-Loop as a worked example. On the pattern page, you experience it as examples, demos, and written guidance you read at your own pace, deciding whether an approval step belongs in your flow. Your agent experiences the same knowledge as five terse moves it applies while it writes the code for that review flow: add a pending state, block the automatic action until a person responds, surface an approve-or-reject control, log the decision, and default to blocking rather than allowing when the check fails. Same pattern, two very different shapes for two very different readers.

You know when to reach for which

  • Pattern pages inform your judgment; skills inform your agent's behavior
  • Skill bodies are generated from the same pattern takeaways, not written separately
  • The same knowledge reads as prose to you and as terse moves to your agent
  • Reading and installing are not substitutes for each other

Next: actually getting a skill pack installed in your repo.

← Previous LessonWhat a Claude Code Skill IsNext Lesson →Install a Skill Pack
← Back to Using AI UX Skills with Claude Code overview

aiux

AI UX patterns from shipped products. Demos, code, and real examples.

Have an idea? Share feedback

Get daily AI UX news

Services

  • Audit my product
  • Request an audit

Resources

  • All Patterns
  • Browse Categories
  • Contribute
  • Claude Code Skills
  • AI Interaction Toolkit
  • Agent Readability Audit
  • Newsletter
  • Documentation
  • Figma Make Prompts
  • Designer Guides
  • Design System
  • All Resources →

Company

  • About Us
  • Privacy Policy
  • Terms of Service
  • Contact

Links

  • Portfolio
  • GitHub
  • LinkedIn
  • More Resources

Copyright © 2026 All Rights Reserved.