Claude Code Plugin
App UI includes a Claude Code plugin that provides AI-assisted development for building user interfaces. The plugin includes specialized skills that help you write App UI code faster and with fewer errors.
What is Claude Code?
Claude Code is a command-line tool that brings AI assistance directly into your development workflow. It can read your codebase, understand context, and help you write, debug, and refactor code.
Installation
Prerequisites
- Claude Code CLI - Install Claude Code following the official installation guide
- App UI Package - Ensure you have the App UI package installed in your Unity project
Installing the Plugin
The Claude Code plugin is located in the Plugins~ folder of the App UI package. There are two ways to install it:
Option 1: Add as a Marketplace (Recommended)
This method allows you to install and manage the plugin through Claude Code's plugin system.
- Open Claude Code in your Unity project root directory
- Add the plugin directory as a marketplace:
/plugin marketplace add ./Packages/com.unity.dt.app-ui/Plugins~
- Install the plugin:
/plugin install app-ui@unity-app-ui
Note
If you installed App UI via git URL or a local path, adjust the path accordingly to point to your App UI package location.
- Verify the installation by running
/pluginand checking the Installed tab.
Option 2: Load Directly (For Development/Testing)
You can load the plugin directly when starting Claude Code:
claude --plugin-dir ./Packages/com.unity.dt.app-ui/Plugins~
This loads the plugin for the current session without permanent installation.
Available Skills
The App UI plugin provides multiple specialized skills to assist with different aspects of UI development:
Core Skill
| Skill | Description |
|---|---|
| app-ui | General-purpose App UI expert covering components, styling, MVVM, navigation, and overlays. This is the primary skill and entry point. |
Specialized Skills
| Skill | Description |
|---|---|
| app-ui-navigation | Deep expertise in the navigation system including NavGraph, NavHost, NavController, NavDestinations, and visual controllers (AppBar, Drawer, BottomNavBar, NavigationRail). |
| app-ui-redux | Redux state management patterns including Store, Slices, Reducers, Actions, AsyncThunks, middleware, and Redux DevTools integration. |
| app-ui-mvvm | MVVM architecture and dependency injection including ObservableObject, ObservableProperty, RelayCommand, UIToolkitAppBuilder, and service registration. |
| app-ui-theming | Theming and styling including USS variables, custom themes, dark/light mode switching, scale contexts, and BEM conventions. |
Using Skills
Once the plugin is installed, skills are available automatically. Claude will use them when relevant to your task, or you can invoke them directly.
Automatic Invocation
Claude automatically loads skills based on what you're working on. For example, if you ask about navigation, Claude will load the app-ui-navigation skill automatically.
Direct Invocation
You can invoke a skill directly using slash commands. Plugin skills are namespaced with the plugin name:
/app-ui:app-ui
Or invoke specialized skills:
/app-ui:app-ui-navigation
/app-ui:app-ui-redux
/app-ui:app-ui-mvvm
/app-ui:app-ui-theming
Tip
The core app-ui skill provides a solid foundation and will suggest specialized skills when appropriate. You can also invoke specialized skills directly when you need deeper guidance on specific topics like navigation flows or state management.
Usage Examples
Creating a New Screen with Navigation
Simply ask Claude about navigation and it will automatically use the relevant skills:
Create a settings screen with a back button that navigates to the home screen.
Include toggles for dark mode and notifications.
Or invoke the navigation skill directly:
/app-ui:app-ui-navigation Create a settings screen with navigation
Setting Up Redux State Management
Create a Redux store for managing user authentication state.
Include login/logout actions and async thunks for API calls.
Or invoke directly:
/app-ui:app-ui-redux Set up authentication state management
Building a Custom Theme
Create a custom dark theme with a blue primary color palette
and larger spacing for touch-friendly interfaces.
Or invoke directly:
/app-ui:app-ui-theming Create a custom dark theme with blue palette
Implementing MVVM Architecture
Set up an AppBuilder with dependency injection for a todo list app.
Create a TodoViewModel with observable properties and commands.
Or invoke directly:
/app-ui:app-ui-mvvm Set up MVVM for a todo list app
Skill Content
Each skill includes:
- SKILL.md - Overview, key concepts, and essential patterns
- reference.md - Comprehensive API reference and detailed documentation
- examples/ - Ready-to-use code examples
You can browse the skill files directly in:
Packages/com.unity.dt.app-ui/Plugins~/skills/
Best Practices
Let Claude choose skills - Claude automatically loads relevant skills based on your task. The core app-ui skill covers most use cases.
Use direct invocation for specific topics - When you need deep expertise on navigation, theming, or state management, invoke the specialized skill directly.
Reference existing code - Point Claude to your existing UXML files or C# scripts for context-aware suggestions.
Iterate on examples - Use the provided examples as starting points and ask Claude to customize them for your needs.
Troubleshooting
Plugin not found
If Claude cannot find the plugin, verify the path:
ls ./Packages/com.unity.dt.app-ui/Plugins~/.claude-plugin
You should see plugin.json and marketplace.json.
Skills not loading
Ensure the skills directory exists:
ls ./Packages/com.unity.dt.app-ui/Plugins~/skills/
You should see directories for each skill (app-ui, app-ui-navigation, etc.).
If skills still don't appear, try clearing the plugin cache and reinstalling:
rm -rf ~/.claude/plugins/cache
Then restart Claude Code and reinstall the plugin.
Checking for errors
Run /plugin in Claude Code and check the Errors tab to see any plugin loading issues.
Updating the plugin
When you update the App UI package, the plugin is automatically updated. If you added it as a marketplace, you can refresh by running:
/plugin marketplace update unity-app-ui