mcpbeat Sign in

Unhappy Agent Skill

State-first design pass — inventories and implements all non-happy states (loading, empty, error, partial, conflict, offline) before the happy path, and refactors impossible boolean state to proper state machines. Use when starting a new screen, reviewing an existing one for edge-case gaps, or when the user says "handle the error state" / "add loading states" / "what happens when data is missing". Invoke when the user asks for unhappy on their UI, or mentions 'unhappy' alongside design / UI / frontend work.

920 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
237
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/educlopez/ui-craft --skill unhappy

The instruction itself

as written by the author

<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->

Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Design every non-happy state for the UI at $ARGUMENTS. Load the ui-craft skill and read references/state-design.md.

Step 1 — Inventory. List every data source and interactive surface in the target. For each, enumerate its states:

| Surface | idle | loading | empty | error | partial | conflict | offline |

|---------|------|---------|-------|-------|---------|----------|---------|

Mark each cell as designed (exists in code), missing (must add), or N/A (not applicable — e.g., a read-only view has no conflict state).

Step 2 — Fill the missing states. For each missing state, either stub it inline or add a follow-up task comment. Use references/state-design.md for:

  • Skeleton sizing (match final layout, 200ms delay, 5s upper bound)
  • Empty-state copy (why empty + next action + visual)
  • Error-state contract (specific cause + one-click recovery + support ID)
  • Offline handling (queue writes + reconcile on reconnect)

Step 3 — Audit the happy path. Flag every spot where the happy path assumes resource presence without checking. Fix with early-returns, state guards, or discriminated-union state handling. Booleans like isLoading && !error && data that allow impossible states are findings — refactor to a proper state machine or reducer.

Step 4 — Optimistic UI + reconciliation. For offline-likely actions (saves, sends, edits, toggles), implement optimistic UI with reconciliation on reconnect. Queue writes locally. Surface any rejected writes — never swallow them.

Knob gating (CRAFT_LEVEL):

| CRAFT_LEVEL | Required states to stub |

|-------------|-------------------------|

| ≤ 4 | idle, loading, error |

| 5-7 | idle, loading, empty, error, success |

| 8+ | all six — add partial, conflict, offline |

If CRAFT_LEVEL is unknown, default to 7.

Convergence note: To iterate until all required states are present, load skills/ui-craft/references/loops.md and run preset state-coverage (budget = the default loop budget defined in loops.md): after stubbing the highest-priority missing required state, re-inventory until all knob-required states are present or budget exhausted. Emit the pre-flight cost notice before iteration 1.

Output: edit the code directly. After each file, print the Review Format table from SKILL.md:

| Before | After | Why |

| --- | --- | --- |

| no loading state on <ProjectList> | skeleton rows matching final layout, 200ms delay | prevents "is it broken?" perception; avoids CLS |

| generic "Error" toast | inline error with specific cause + retry + support ID | recoverability (heuristic 9) |

One row per state added. No full diffs.

Next step: /harden — implement the states you just designed (rung 1).

Other skills for the same job

different authors, same section of the catalogue
Receiving Code Review
by ZhanlinCui
×7

Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation

2k tokens
Requesting Code Review
by ZhanlinCui
×6

Use when completing tasks, implementing major features, or before merging to verify work meets requirements

2k tokens
Git Commit
by github
vendor ×3

Execute git commit with conventional commit message analysis, intelligent staging, and message generation. Use when user asks to commit changes, create a git commit, or mentions "/commit". Supports: (1) Auto-detecting type and scope from changes, (2) Generating conventional commit messages from diff, (3) Interactive commit with optional type/scope/description overrides, (4) Intelligent file staging for logical grouping

799 tokens
Github Code Review
by ComeOnOliver
×3

Comprehensive GitHub code review with AI-powered swarm coordination

13k tokens
Karpathy Guidelines
by hyyhf
×3

Behavioral guidelines to reduce common LLM coding mistakes. Use when writing, reviewing, or refactoring code to avoid overcomplication, make surgical changes, surface assumptions, and define verifiable success criteria.

629 tokens
Code Reviewer
by google-gemini
vendor ×2

Use this skill to review code. It supports both local changes (staged or working tree) and remote Pull Requests (by ID or URL). It focuses on correctness, maintainability, and adherence to project standards.

795 tokens
Agent MD Refactor
by softaworks
×2

Refactor bloated AGENTS.md, CLAUDE.md, or similar agent instruction files to follow progressive disclosure principles. Splits monolithic files into organized, linked documentation.

4k tokens
Commit Work
by softaworks
×2

Create high-quality git commits: review/stage intended changes, split into logical commits, and write clear commit messages (including Conventional Commits). Use when the user asks to commit, craft a commit message, stage changes, or split work into multiple commits.

2k tokens

How to use it

Copy the folder

Take educlopez/unhappy from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.