Skip to content

AGENTS.md

Latest commit

 

History

History
135 lines (94 loc) · 5.16 KB

AGENTS.md

File metadata and controls

135 lines (94 loc) · 5.16 KB

AGENTS.md — Argus Agent Context

You are an AI coding agent working with the Argus design intelligence platform.

Your capabilities via Argus

When connected to the Argus MCP server, you have access to design intelligence tools that let you analyze and improve visual quality. These tools return structured, deterministic results — not opinions.

Available MCP tools

design.inspect

Analyze a page or component's visual structure.

Input: { url?: string, selector?: string, html?: string } Output: PageSnapshot with element positions, computed styles, accessibility data, and structural relationships.

Use this when you need to understand what's visually happening on a page before making changes.

design.score

Score design quality against established principles.

Input: { snapshot: PageSnapshot, categories?: string[], threshold?: number } Output: ScoreReport with per-rule findings, category scores, and an aggregate score (0–100).

Categories: spacing, typography, color, hierarchy, accessibility, consistency.

Use this to evaluate whether your generated UI meets quality standards before presenting it to the user.

design.suggest

Get specific, actionable improvement suggestions.

Input: { snapshot: PageSnapshot, maxSuggestions?: number, focus?: string } Output: Array of Suggestion objects with element selectors, CSS changes, and expected score improvement.

Use this when the score is below threshold and you need concrete fixes.

design.apply

Apply a design fix and verify the improvement.

Input: { selector: string, changes: CSSChanges, verify?: boolean } Output: { applied: boolean, before: Score, after: Score, delta: number }

Use this to fix issues identified by design.suggest. The verify flag re-scores after applying to confirm improvement.

design.compare

Compare two states of a page.

Input: { before: PageSnapshot, after: PageSnapshot } Output: DiffReport with structural changes, score deltas, and visual regression indicators.

Use this after making changes to verify you improved things and didn't break anything.

design.preferences

Read the user's design taste profile.

Input: { action: "read" | "export", format?: "xml" | "json" } Output: DesignProfile with learned preferences, weighted rules, and category biases.

Use this before generating UI to align with the user's established preferences.

design.audit

Run a comprehensive design + accessibility audit.

Input: { url?: string, selector?: string, wcag?: "AA" | "AAA" } Output: Full AuditReport with all category scores, accessibility violations, and prioritized fix list.

Use this for thorough analysis when the user asks to evaluate or improve their design.

design.doctor

Check Argus installation and configuration health.

Input: {} Output: Diagnostic report with version info, configuration status, and any detected issues.

How to use these tools effectively

Before generating UI

  1. Call design.preferences to understand the user's taste
  2. Use the profile data to inform your CSS choices
  3. After generating, call design.score to verify quality

When improving existing UI

  1. Call design.inspect on the target area
  2. Call design.score to identify weak categories
  3. Call design.suggest for specific fixes
  4. Apply fixes via code changes
  5. Call design.compare to verify improvement

When the user says "make it better"

  1. Call design.audit for full analysis
  2. Present the top 3 findings to the user
  3. Ask which category to prioritize
  4. Apply fixes, re-score, show before/after

Score interpretation

Range Quality Action
90–100 Excellent Ship it
75–89 Good Minor tweaks optional
60–74 Fair Address warnings
40–59 Poor Significant issues need fixing
0–39 Critical Fundamental problems

Structured output format

All findings follow this structure:

<design_finding>
  <rule>spacing-consistency</rule>
  <severity>warning</severity>
  <element>.card-grid > .card</element>
  <message>Inconsistent horizontal gaps: 16px, 24px, 12px found. Expected uniform value.</message>
  <measured>3 distinct gap values</measured>
  <expected>1 consistent gap value</expected>
  <suggestion>Set gap: 16px on .card-grid (most common value)</suggestion>
</design_finding>

Design preference XML export

When exporting preferences for system prompts:

<design_preferences source="argus" version="2026.4.12">
  <rule category="spacing" weight="0.9">ALWAYS use 8px grid for all spacing values</rule>
  <rule category="typography" weight="0.85">PREFER heading weight 600 over 700</rule>
  <rule category="color" weight="0.8">NEVER use pure black (#000) for text — use #1a1a1a minimum</rule>
  <rule category="hierarchy" weight="0.75">ALWAYS ensure primary CTA is visually dominant by minimum 1.5x size ratio</rule>
  <rule category="consistency" weight="0.7">AVOID more than 5 distinct font sizes per page</rule>
</design_preferences>

Paste this block into any system prompt, CLAUDE.md, .cursorrules, or agent configuration. The agent will respect these learned preferences in all generated output.