mcpField
D
detail-observation

detail-observation

github.com/dragoon0xDesign & UI679 installsUpdated 35w ago
Repository

About detail-observation

detail-observation is a design-analysis skill for inspecting interface details during a conversation. It emphasizes measured values and evidence-based notes on typography, spacing, borders, colors, and interface states.

Key features

  1. 01Count displayed type sizes
  2. 02Identify spacing values and scale
  3. 03Compare border-radius consistency
  4. 04Assess font-weight roles
  5. 05Record colors and interface states

Use cases

  1. 01Documenting a screen’s type and spacing values
  2. 02Checking component radius differences
  3. 03Reviewing interaction states for gaps

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dragoon0x/taste-skills --skill detail-observation

After installing, type/detail-observationin Claude Code to confirm it loaded.

Details

From the project README

Detail Observation

Catalog the micro-decisions nobody else notices.

How to use

  • /detail-observation Apply detail-level analysis constraints to this conversation.

Constraints

What to Catalog
  • MUST count the actual number of type sizes in use (not what the system says, what's on screen)
  • MUST identify the spacing scale (is it 4/8/16/24/32 or random values?)
  • MUST note border radius consistency (same across buttons, cards, inputs, or varying?)
  • MUST check weight usage (how many font weights, and is each one serving a clear purpose?)
  • SHOULD identify the color count and role of each color (primary, neutral, accent, semantic)
  • SHOULD check hover, focus, active, disabled, loading, empty, error, and success states
Precision Over Opinion
  • MUST use specific values: "16px margin" not "generous spacing"
  • MUST note inconsistencies with evidence: "buttons use 4px radius, cards use 8px, inputs use 6px"
  • NEVER say "it feels inconsistent" without pointing to the specific inconsistency
  • SHOULD compare observed values against the design system if one exists
Anti-Patterns
  • Stopping at the surface level ("the typography looks good")
  • Treating every inconsistency as an error (some breaks are intentional)
  • Spending time on details that don't affect the user experience

Comments

Markdown supported