Communitygithub.com

ulasalyesil/personal-website-v2

User research planning and synthesis at the observed behaviour layer — produces candidate job stories with confidence ratings

What is personal-website-v2?

personal-website-v2 is a Claude Code agent skill that user research planning and synthesis at the observed behaviour layer — produces candidate job stories with confidence ratings.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ulasalyesil/personal-website-v2/tree/HEAD/.agents/skills/layers-observed-behaviour

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

/layers-observed-behaviour

Assumes /layers-intro has been loaded for framework context.

The observed behaviour layer is the closest we can get to reality. It is raw material — what users actually do, not what we think they do or wish they would do. Everything above it is interpretation; this layer is the source.

Decisions this layer needs to make:

  • What specific questions do we most need to answer about our users?
  • What evidence already exists, and how reliable is it?
  • How do we gather what's missing?
  • What patterns emerge — and what can we claim with confidence vs. what remains assumption?

Methods:

MethodWhen
JTBD interviewsUnderstanding triggers, motivations, and anxieties. Interview about a real past experience, not hypotheticals.
Contextual inquiry / observationWhen what users say differs from what they do. Watching real work reveals tacit behaviour.
Diary studiesWhen the behaviour is distributed over time or infrequent — users self-report as events occur.
Support ticket / review analysisExisting product with accumulated signal. Good for identifying pain points at scale without recruiting.
Analytics reviewWhat users do (not why). Complements qualitative; doesn't replace it.
Usability observationWhere do people struggle or succeed with an existing product?

Quality signals — what good looks like:

  • Observations are specific and close to raw data, not summarised into conclusions
  • Job stories are grounded in something seen or heard, not inferred from team beliefs
  • Confidence levels are marked: observed / inferred / assumed
  • Research gaps are named explicitly, not papered over
  • Workarounds are flagged — a need real enough to motivate improvisation is a strong signal

This skill works in two modes. Detect which applies and state it clearly:

  • Plan mode — no research yet; help design a study
  • Synthesise mode — existing research material; help make sense of it

If they have partial research, start in Synthesise mode with what exists, then shift to Plan mode to identify gaps.


Guided session

Tell me what you're working on — what question you most need to answer about your users — or say "plan" or "synthesise" to start a guided session.

Ask: "Where should I capture the work from this session?" (see /layers-intro for options)

Ask: "Do you have existing research — interviews, session recordings, support tickets, analytics — or do we need to plan research from scratch?" State the mode clearly once you know.


Plan mode

Phase 1 — Define the learning goal

Help the designer articulate what they most need to understand. Push past vague goals:

  • Not "understand users better" but "understand what triggers someone to refer a friend, and what makes them hesitate"

Write out 2–3 specific research questions.

Phase 2 — Identify participants

Who has the behaviour we need to observe? Push on assumptions:

  • Existing users, potential users, or churned users?
  • Is the behaviour something they do currently, or something they'd do in a new situation?
  • How many participants for meaningful signal? (Qualitative interviews: 6–10 usually reaches saturation)

Phase 3 — Design the study

Choose the right method based on the learning goal. If running JTBD interviews, generate an interview guide:

Opening: "Tell me about the last time you [relevant behaviour]. Walk me through what was happening at that point."

Timeline: "What triggered that? What did you try first? What made you keep going / give up / switch?"

Motivations: "What were you hoping would be different after doing this? What were you worried about? What almost stopped you?"

Closing: "Is there anything I haven't asked that would help me understand this better?"

Remind the designer: listen for nouns (candidate domain objects) and the language users use naturally — this feeds the domain layer.

Phase 4 — Plan synthesis

Before going to research: agree on how findings will be captured and organised. One observation per note, tagged with the research question it speaks to. Raw quotes over summaries.


Synthesise mode

Phase 1 — Take stock

Ask the designer to share what they have — transcripts, notes, data summaries, whatever form. Ask: how was this collected, what questions was it designed to answer, how confident are you in its quality?

Phase 2 — Extract observations

Pull out concrete observations — things users said, did, or felt. Stay close to raw data; no interpretation yet.

If working from memory rather than documents, elicit by asking:

  • "What was the most surprising thing a user did or said?"
  • "What kept coming up across different users?"
  • "What did users struggle with that you didn't expect?"

Phase 3 — Identify patterns

Group observations by theme:

  • Recurring situations that trigger the behaviour
  • Common motivations — underlying goals that keep appearing
  • Shared anxieties — hesitations that show up across users
  • Workarounds — what users do when the product doesn't serve the job

Phase 4 — Draft candidate job stories

From the patterns: When [situation], I want to [motivation], so I can [expected outcome].

For each: is the "When" specific enough? Is the "I want to" a motivation or a solution? Mark confidence: observed / inferred / assumed.

Phase 5 — Flag research gaps

What questions do the observations not yet answer? What would a designer need to know that this research doesn't tell them? These become input for a follow-up Plan mode session.


Completion

Produce:

  1. Key observations — significant raw findings
  2. Patterns — grouped themes with supporting observations
  3. Candidate job stories — with confidence ratings
  4. Research gaps — questions still unanswered

Close with: "These job stories are ready to refine at the user needs layer. Run /layers-user-needs to work through them."

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

ulasalyesil/personal-website-v2

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

ulasalyesil/personal-website-v2

Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.

ulasalyesil/personal-website-v2

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

ulasalyesil/personal-website-v2

Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.

ulasalyesil/personal-website-v2

This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).

ulasalyesil/personal-website-v2

Best practices and example-driven guidance for building SwiftUI views and components. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens, or needing component-specific patterns and examples.

ulasalyesil/personal-website-v2

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

ulasalyesil/personal-website-v2

Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.

ulasalyesil/personal-website-v2

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

ulasalyesil/personal-website-v2

Enforces an opinionated UI baseline to prevent AI-generated interface slop.

ulasalyesil/personal-website-v2

Build modern, composable, and accessible React UI components following the components.build specification. Use when creating, reviewing, or refactoring component libraries, design systems, or any reusable UI components. Triggers on tasks involving component APIs, composition patterns, accessibility, styling systems, or TypeScript props.

ulasalyesil/personal-website-v2

Ship correct, complete metadata.

ulasalyesil/personal-website-v2

Survey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on source code — never implements, fixes, or refactors anything itself. Use when asked to audit a codebase, find improvement opportunities (bugs, security, performance, test coverage, tech debt, migrations, DX), suggest features or where to take the project next (roadmap, product direction), or generate handoff plans for another agent to implement.

ulasalyesil/personal-website-v2

Defines the product's objects, relationships, states, and vocabulary independently of any interface — the most load-bearing layer

ulasalyesil/personal-website-v2

Maps domain concepts, terminology conflicts, and bounded contexts — produces a noun harvest for the conceptual model layer

ulasalyesil/personal-website-v2

Maps interaction structure and flow — produces breadboard notation with edge cases, failure paths, and open decisions

ulasalyesil/personal-website-v2

Framework orientation for Layers of Product Design — load this first; provides the context all other skills depend on

ulasalyesil/personal-website-v2

Diagnostic audit across all seven layers — identifies the bottleneck layer and recommends where to focus

ulasalyesil/personal-website-v2

Connects user opportunities to business outcomes and solution bets — produces a strategy tree and prioritised experiments

ulasalyesil/personal-website-v2

Audits existing surface against lower-layer decisions and produces a surface decision inventory — vocabulary, object consistency, completeness, feedback, hierarchy, accessibility

Related Skills