SuperAPI AI Directory

gentle-ui-design

Design & creation

View repository

Updated 11-05 04:20

About this skill

Activation Contract

Use for web and product interfaces when shaping, implementing, or assessing a user experience. Pair with gentle-design when producing artboards: gentle-design owns delivery, this skill owns UX quality. Use gentle-ai-tui-design for terminal interfaces.

Hard Rules

  • Keep a read-only critique read-only; do not install tools or dependencies for this guidance.
  • Establish the user's job and success condition before appearance. Ask only when missing intent would materially change a decision.
  • Reuse the project's brand, components, and platform conventions; avoid universal aesthetic bans.
  • Do not invent evidence or conceal inaccessible controls. Model real content ranges and states; this guidance adds no hooks, detectors, or mandatory tool chains.

Decision Gates

Need or symptom Load and apply
Unclear purpose, weak copy, or generic direction references/task-and-content.md
Search, large collections, or difficult comparison references/browse-and-compare.md
Flat hierarchy, clutter, or weak feedback references/composition-and-feedback.md
Narrow screens, input access, or missing states references/adaptive-interfaces.md

Execution Steps

  1. Identify the audience, primary job, constraints, and likely content sizes; inspect existing project conventions when available.
  2. Load only the relevant references and select defaults or justified exceptions for the task.
  3. Apply the project's visual language and account for touch, keyboard, focus, contrast, and reduced motion.
  4. Inspect visually when useful and authorized; report observations rather than implying an inspection occurred.

Output Contract

Summarize design choices and tradeoffs, files changed if any, checks actually performed, and important unknowns.

References

  • references/task-and-content.md — purpose, information architecture, art direction, and truthful copy.
  • references/browse-and-compare.md — search, collection scale, comparison, and navigation state.
  • references/composition-and-feedback.md — hierarchy, density, color, type, and visual feedback.
  • references/adaptive-interfaces.md — responsive behavior, accessible interaction, and states.