Skip to content
alyn
plugin87

Observe skill

Show whether the agent followed the kit's rules in recent sessions: pages edited and measured, Stop hook blocks, findings left open. Reads local hook events only.

$npx skills add plugin87/ux-ui-agent-skills --skill observe
GitHub stars
3,155
Pack installs
11k
Alyn Score
59/99
Updated
17 h ago
License
MIT
Design

Install Observe

Pick your agent. Every command is ready to paste.

$npx skills add plugin87/ux-ui-agent-skills --skill observe

The open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.

01

Install it

Run the command above, or upload the folder in Claude.

02

Ask naturally

Describe the task. Your agent loads observe when the request matches its description.

03

Name it if needed

If it does not trigger, say “use the observe skill”. In Codex, type $observe.

The skill itself

SKILL.md

GitHub

Requirements

This skill needs the full UX/UI Agent Skills kit: the gates, the references and the design-system library. Install it with npx ux-ui-agent-skills@3.1.0 init or as the Claude Code plugin. npx skills@1.7.6 add copies the skill folder and nothing else, and this skill has no guidance-only mode: its whole job is to read what the kit's hooks recorded, so without the kit there is nothing for it to do.

Step 0: is the kit here? Check once: ls ${CLAUDE_SKILL_DIR}/../../../scripts/observe.mjs >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING, say plainly that only the skill folder was installed, name the install command above, and stop. Do not guess the contents of a file you could not open, and do not report a result you did not produce.

Report what the hooks recorded - never a reconstruction from memory.

  1. Run node ${CLAUDE_SKILL_DIR}/../../../scripts/observe.mjs --project "$CLAUDE_PROJECT_DIR" (or without --project when the user asks about every project, and with --days N when they name a window).
  2. Quote the summary lines it prints. If it says no session edited UI, say that and stop: there is nothing to judge.
  3. For each session marked BROKE A RULE, run it again with --session <id> and say which rule failed and the timeline line that shows it.
  4. If the user wants the page, run it with --html <path> and give the path.

What it measures, and what it does not: three counted rules per session - every edited page had a passing gate before the end, no fast-gate finding was left on a file's latest version, and the agent never finished while the Stop hook still had pages open. It says nothing about design quality, and an unfinished session is not counted for or against.

Tips for Observe

  • • Start a fresh session after installing so your agent picks up the new skill.
  • • It is part of a pack with 26 skills. Install only the ones you need with --skill to keep triggers precise.
  • • If two skills overlap, mention the one you want by name.

Questions about Observe

What does the Observe skill do?

Show whether the agent followed the kit's rules in recent sessions: pages edited and measured, Stop hook blocks, findings left open. Reads local hook events only.

How do I install Observe?

Run "npx skills add plugin87/ux-ui-agent-skills --skill observe" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.

Does Observe work in Cursor and Codex?

Yes. Observe uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.

Is Observe free?

Observe is open source on GitHub under the MIT license. It is free to install; check the license before commercial use.

Who made Observe?

Observe is published by plugin87 in the plugin87/ux-ui-agent-skills repository, together with 25 other skills.

Similar skills. From other creators.