docs: add discord_ui_ux rule file capturing philosophy
This commit is contained in:
parent
f3f882cd06
commit
798d3d589c
|
|
@ -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.
|
||||
Loading…
Reference in New Issue