Kord/.agents/rules/discord_ui_ux.md

trigger	description
model_decision	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.