Skip to content
Agent Orchestration
Skill

/gentle-ui-design

Trigger: product interface design, web UI, design critique, browsing experience, responsive layout. Guide usable interfaces for the current project.

From plugin
gentle-shell
2.2k15 skills10 agents

Claude Code

$ npx -y skills add gentleman-programming/gentle-shell --skill gentle-ui-design --agent claude-code

SKILL.md

gentle-ui-design.SKILL.md
name: gentle-ui-design
description: "Trigger: product interface design, web UI, design critique, browsing experience, responsive layout. Guide usable interfaces for the current project."
license: Apache-2.0
metadata:
  author: gentleman-programming
  version: "1.0"

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.
Read more
@gentleman-programming
Ships withgentle-shell

Gentle Shell is a Pi-native workspace for AI-assisted development, bringing parallel coding agents, live tasks, Git diffs, persistent memory, and permission controls into one terminal interface. Powered by Gentle AI and Organic Driven Development (ODD).

2.2k15 skills10 agents
Get the whole plugin

Stars on GitHub

Momentum

stars in total
2.2k
Star history of gentleman-programming/gentle-shell on GitHub, a chart by star-history.com

Other skills on gentle-shell.

More skills from other plugins.

1password

1password

Set up and use 1Password CLI for sign-in, desktop integration, and reading or injecting secrets.

clawdis11d393k
@steipete@steipeteInstall Skill
computer-use

computer-use

Drives the GUI of a visible local app window through `orca computer`: accessibility tree, clicks, typing, menus, dialogs, and…

orca11d111k
@stablyai@stablyaiInstall Skill
agentmail

agentmail

Use your assigned AgentMail inbox to read email tasks, explicitly send or reply, and check delivery. Provided automatically by…

paperclip11d109k
@paperclipai@paperclipaiInstall Skill
adr-create

adr-create

Create a new Architecture Decision Record with sequential numbering and AgentDB registration

@ruvnet@ruvnetInstall Skill

Questions about gentle-ui-design.

Which coding agents can use gentle-ui-design?
gentle-ui-design installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.