wp-admin-ui-development

name

wp-admin-ui-development

description

WordPress admin UI review and development guidance. Use when reviewing admin pages, settings screens, menu pages, notices, list tables, metabox-like interfaces, screen options, capability checks, admin scripts or styles, or when user mentions "admin UI", "settings page", "wp-admin", "admin screen", "options page", "list table", "admin menu", "admin notice", "screen options", or "dashboard page". Detects capability issues, Settings API misuse, admin-only performance problems, and UX mistakes in WordPress admin interfaces.

WordPress Admin UI Development Skill

Overview

Systematic review for WordPress admin interfaces. Core principle: Admin UIs should be capability-aware, predictable, and aligned with WordPress admin patterns instead of custom app-style behavior. Review covers menu registration, screen architecture, Settings API usage, notices, script and style loading, list-table patterns, and admin-side UX stability.

When to Use

Use when:

• Reviewing settings pages or plugin dashboards
• Auditing add_menu_page() / add_submenu_page() usage
• Checking admin forms, notices, and data-entry screens
• Reviewing admin script loading and screen targeting
• Analyzing capability checks for admin pages

Don't use for:

• Frontend UI review
• Full security-only audits (use wp-security-review)
• General plugin architecture without admin surface focus (use wp-plugin-development)

Code Review Workflow

1. Identify admin surface

   • Settings page
   • Dashboard widget or tools page
   • Custom list table
   • Modal-heavy admin workflow

2. Review screen registration

   • Menu slug, parent slug, capability
   • Dedicated callbacks
   • Screen-specific enqueue logic

3. Review form and state flow

   • Settings API or deliberate alternative
   • Nonces and capability checks
   • Stable success/error messaging

4. Review UX and maintainability

   • Avoid giant single-screen forms
   • Respect WordPress admin layout and component conventions
   • Load scripts only on relevant screens

5. Apply severity

   • CRITICAL: Missing capability checks, unrestricted admin actions, admin screens accessible to wrong roles
   • WARNING: Global admin asset loading, bypassed Settings API, unstable notice UX, oversized screens
   • INFO: Could use core components or cleaner screen split

File-Type Specific Checks

Admin Menu Registration

• CRITICAL: Missing capability requirement
• WARNING: Menu callback mixes routing, rendering, and form handling
• INFO: Could move large screens into separate classes or modules

Settings Forms

• CRITICAL: Missing nonce or capability check on save
• WARNING: Manual update_option() everywhere without Settings API structure
• WARNING: No sanitization callback for settings
• INFO: Could split settings into sections/tabs for maintainability

Admin Scripts and Styles

• WARNING: Scripts loaded on every admin screen
• WARNING: Inline JS for large features
• INFO: Could use screen IDs and conditional enqueues

Notices and Feedback

• WARNING: Persistent notices without dismissal handling
• WARNING: Success/error states are not tied to actual action outcome
• INFO: Could use clearer empty/loading states

Search Patterns for Quick Detection (ADM-21)

Use these rg commands for quick admin UI scanning.

CRITICAL Patterns

# Admin page registration
rg -n "add_menu_page|add_submenu_page|add_options_page|add_management_page" . -g '*.php'

# Admin-post handlers and nonces
rg -n "admin_post_|check_admin_referer|wp_verify_nonce|current_user_can" . -g '*.php'

WARNING Patterns

# Global admin enqueues
rg -n "admin_enqueue_scripts|wp_enqueue_script|wp_enqueue_style" . -g '*.php'

# Direct option updates in admin pages
rg -n "update_option|add_option" . -g '*.php'

# Admin notices
rg -n "admin_notices|notice-|is-dismissible" . -g '*.php'

INFO Patterns

# Settings API usage
rg -n "register_setting|add_settings_section|add_settings_field" . -g '*.php'

# Screen targeting helpers
rg -n "get_current_screen|current_screen|\$hook_suffix" . -g '*.php'

Reference Files

• references/settings-and-screens.md - Settings pages, screen registration, and admin screen structure
• references/admin-ux-patterns.md - Notices, admin scripts, tabs, list tables, and UX expectations

Output Format (ADM-23)

For each finding include severity, file reference, issue summary, admin impact, and a concrete fix suggestion. Call out where a problem is primarily security, architecture, or UX so follow-up reviews are easy to route.