skills.rest
discourse
discourseOFFICIAL
Explore all skills by this author →
WebsiteGitHub

discourse-admin-ui

Build consistent Discourse admin interfaces using standard components and route patterns.

47.8k|9.0k|Updated Jan 12, 2013
Search Tags:#plugin#discourse#admin UI#formkit#ember#Navigation#config pages
One-click install
npx skills add https://github.com/discourse/discourse --skill discourse-admin-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: discourse-admin-ui
Source: https://github.com/discourse/discourse/tree/main/.skills/discourse-admin-ui
Command: npx skills add https://github.com/discourse/discourse --skill discourse-admin-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Discourse admin pages often drift into inconsistent layouts, navigation, and form patterns across core and plugins. This Skill codifies the official conventions for admin UI so every page uses the same page shell, components, and route structure.

Core Features & Use Cases

  • Page Shell & Navigation: Guides sidebar entries via ADMIN_NAV_MAP, DPageHeader breadcrumbs, tabs, actions, and browser title tokens.
  • Content Patterns: Covers AdminConfigAreaCard, DPageSubheader, FormKit forms, d-table responsive tables, empty states, and third-level new/edit routes.
  • Filtered Settings & Plugin UIs: Explains AdminConfigWithSettingsRoute pages filtered by area or category, plus plugin admin interfaces under /admin/plugins with addAdminPluginConfigurationNav.
  • Use Case: When adding a new admin config page for permalinks or a plugin settings tab, follow the references to wire the route, template, translations, and nav entry correctly the first time.

Quick Start

Use the discourse-admin-ui skill to create a new admin config page with a sidebar entry, DPageHeader, and a settings table.

Frequently Asked Questions about discourse-admin-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new Discourse admin config page?▼

Add an ADMIN_NAV_MAP entry with name, route, label, description, and icon, then create the Ember route, template, and translations. Use DPageHeader with breadcrumbs and wrap content in the admin-config-page__main-area class.

How do I build a plugin admin interface in Discourse?▼

Register the route in plugin.rb with add_admin_route and use_new_show_route: true, add a route map under admin.adminPlugins.show, and register navigation with api.addAdminPluginConfigurationNav in an admin-only initializer.

When should I use a filtered settings page versus a custom config page?▼

Use a filtered settings page with AdminConfigWithSettingsRoute and AdminAreaSettings when the page mainly exposes site settings by area or category. Build a custom config page when you need records, setup workflows, or rich help content.

Should admin forms be inline in tables or on separate routes?▼

Forms belong on standalone third-level new and edit routes such as /resource/new and /resource/:id/edit. These pages use a BackButton and AdminConfigAreaCard instead of the normal page header, and must reload directly.

What table classes does the Discourse admin UI use?▼

Use the d-table structure with d-table__header, d-table__row, and overview, detail, and controls cells. Every non-overview cell needs a d-table__mobile-label, and row actions go in the far-right controls cell.

Related Skills

Explore More Software Engineering Skills→
bikeindexbikeindex
308

sandbox-test-setup

Configure Ruby and RSpec environments for Bike Index across macOS and sandboxes.

Official
Advanced
trusted-americantrusted-american

qunit-testing

Reference QUnit and ember-qunit testing patterns for Ember applications.

Official
Advanced
jangtrinhjangtrinh

ck:ui-styling

Integrate shadcn/ui components with Tailwind CSS for accessible, theme-consistent UI styling.

Community
Intermediate
Lonsdale201Lonsdale201
21

jfb-settings-tab

Create JetFormBuilder settings tabs with Vue UI and nonce-protected saves.

Community
Advanced