agentleFS
rahmanef63rahmanef63/si-coder-agent/skills/sc-ux/SKILL.md

sc-ux

Skill13 starsChanged 2 months agoMITView on GitHub

SI-Coder user experience skill for usable, accessible, predictable web interactions: navigation, information architecture, feedback, keyboard behavior, errors/recovery, forms, loading/empty states, responsive task priority, and desktop workbench ergonomics.

The file

We split this skill into the rules it gives an agent

9 rules. About 0 are common, 9 are distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈9

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Keep durable instructions in English.

    line 15
  2. Distinctive:

    Before changing a flow, identify:

    line 20
  3. Distinctive:

    Every important flow should satisfy:

    line 33
  4. Distinctive:

    Prefer recognition over memory: labels, context, recent choices, and visible affordances beat hidden recall.

    line 39
  5. Distinctive:

    Do not use ambiguous spinners for long operations when meaningful progress/state can be shown.

    line 52
  6. Distinctive:

    keep global navigation, local navigation, work area, and contextual tools conceptually distinct,

    line 59
  7. Distinctive:

    use one tab stop for composite toolbars/lists where appropriate and arrow-key navigation inside them,

    line 61
  8. Distinctive:

    keep primary work visible.

    line 65
  9. Distinctive:

    When tools allow, test the real flow rather than only reading components:

    line 72

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

sc-ux — usable before impressive

Language

Keep durable instructions in English. Reply in the user's language unless requested otherwise.

Core model

Optimize for task completion, comprehension, control, recovery, and accessibility. Do not equate fewer visible controls with better UX; hide complexity only when users can still discover, understand, and recover from actions.

Before changing a flow, identify:

  • primary user jobs and frequency,
  • user expertise and likely mental model,
  • entry points and navigation path,
  • current state model,
  • irreversible/destructive actions,
  • latency and failure points,
  • keyboard/touch/pointer requirements,
  • accessibility requirements,
  • responsive task priority,
  • explicit scope exclusions.

Usability gates

Every important flow should satisfy:

  1. Status is visible: users can tell what is happening, what changed, and what is selected.
  2. Language matches the user's task, not internal architecture.
  3. Users retain control: cancel/back/undo/retry where meaningful.
  4. Patterns are consistent across the product unless a difference communicates meaning.
  5. Prevent errors before explaining them.
  6. Prefer recognition over memory: labels, context, recent choices, and visible affordances beat hidden recall.
  7. Frequent tasks are efficient without making first use opaque.
  8. Interfaces contain only information/actions that earn their place.
  9. Errors explain impact and next recovery action.
  10. Help appears near the blocking context rather than as a documentation dump.

Interaction state contract

Important async/action surfaces must cover applicable states: idle → pending → progress → success | error → retry/cancel.

Data surfaces must cover applicable states: loading → populated | empty | error | permission-denied | offline/stale.

Do not use ambiguous spinners for long operations when meaningful progress/state can be shown.

Accessibility baseline

Use semantic controls and names. Preserve visible focus. Keyboard users must reach and operate every primary action without pointer-only traps. Do not encode meaning by color alone. Maintain sufficient text/control contrast. Respect reduced motion. Provide non-drag alternatives for required drag interactions. Make touch/pointer targets practical and avoid destructive actions adjacent to frequent controls without separation/confirmation/undo.

Desktop/workbench UX

For desktop shells and productivity tools:

  • keep global navigation, local navigation, work area, and contextual tools conceptually distinct,
  • support predictable focus movement between regions,
  • use one tab stop for composite toolbars/lists where appropriate and arrow-key navigation inside them,
  • preserve user context when opening/closing inspectors, dialogs, and secondary panes,
  • make resize/collapse boundaries discoverable,
  • remember reasonable layout state when product requirements allow,
  • keep primary work visible; do not let chrome dominate the canvas,
  • command palettes/shortcuts accelerate frequent actions but do not replace discoverable UI for essential tasks.

Responsive behavior

Responsive UX is reprioritization, not desktop columns → one long mobile stack. Preserve the highest-value task and state. Do not alter an explicitly excluded mobile/navigation surface.

Verification

When tools allow, test the real flow rather than only reading components:

  • first-use path,
  • frequent-user path,
  • keyboard-only path,
  • error/retry path,
  • empty/loading path,
  • destructive action recovery,
  • representative viewport resize,
  • deep link/back-forward behavior where relevant.

Record defects as problem → user impact → fix → verification.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.