From 798d3d589c8b173dc54cf7e915d5d86f0106e2e2 Mon Sep 17 00:00:00 2001 From: artbiit Date: Tue, 7 Apr 2026 09:07:34 +0900 Subject: [PATCH] docs: add discord_ui_ux rule file capturing philosophy --- .agents/rules/discord_ui_ux.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 .agents/rules/discord_ui_ux.md diff --git a/.agents/rules/discord_ui_ux.md b/.agents/rules/discord_ui_ux.md new file mode 100644 index 0000000..fa9a346 --- /dev/null +++ b/.agents/rules/discord_ui_ux.md @@ -0,0 +1,27 @@ +--- +description: Discord Bot UI/UX Design Philosophy +--- + +# Discord Bot UI/UX Design Philosophy + +When designing or updating Discord command interfaces (Embeds, Components), adhere to the following UI/UX philosophy to ensure a clean, intuitive, and modern user experience. + +## 1. Minimal and Non-redundant Information (중복 정보 최소화) +- Do not display information in the Embed that is already visually apparent in the UI components. +- For example, if a `RoleSelectMenuBuilder` allows the user to select roles, use `.addDefaultRoles(ids)` (available in discord.js 14.14+) to display the currently selected roles natively inside the dropdown menu. +- Do NOT list those same roles redundantly as text inside the Embed fields. The Embed should remain concise, showing only titles and essential descriptions or instructions. + +## 2. Implicit State (명시적 토글 지양 및 상태 직관화) +- Avoid creating manual On/Off toggle buttons unless absolutely necessary. +- Derive the "Enabled/Disabled" state directly from the user's data naturally. For instance, if the user has selected at least one role (`roleIds.length > 0`), the feature is automatically considered "Active/Enabled". If they clear the selection, the feature is "Disabled". +- This reduces UI clutter (removing unnecessary toggle ActionRows) and aligns with modern design patterns where state implicitly follows the presence of data. + +## 3. Persistent and Seamless Interaction (매끄러운 대시보드 유지) +- Component interactions should feel fast and seamless without fragmenting the chat history. +- Always immediately call `await interaction.deferUpdate();` (or equivalent) when handling components (buttons, select menus) to prevent "Unknown interaction" timeout errors. +- Use `await interaction.editReply(...)` with the newly generated UI components to seamlessly update the dashboard frame in place. +- Do NOT generate new follow-up messages or close the menu unilaterally when the user still expects to tweak settings. + +## 4. Safe Response Timings (타임아웃 방지) +- When processing `ChatInputCommandInteraction` that might involve a database cold-start connection or external API calls, proactively call `await interaction.deferReply({ ephemeral: true });` right at the start. +- Update the UI with `await interaction.editReply(...)` once business logic resolves, bypassing Discord's strict 3-second timeout limitation and preventing crashes during initial boot load.