Publish Sign in

Dashboard Create Screen

Create a new screen in the Multi-site Dashboard with automatic route registration.

You say
Install this skill Read the source first Free Written by Automattic · unverified publisher
Context cost
1.7k tokensestimated from the bundle, loaded when it triggers
Bundle
1 file · 6.9 kBtext throughout, nothing executable
Licence
Source-availablefree to use
Last change
—no release on file
Servers it uses
Noneruns standalone

What it does

Create a new screen in the Multi-site Dashboard with automatic route registration

Installed, it changes the agent in these ways.

What this skill changes about the agent is not written down here yet. The listing was collected from its source, and the description is in its own SKILL.md.

Output format

Produces one artefact, exactly shaped.

content
Filed under

Learning & Documentation

The skill itself

This is the whole product. A skill is instructions the model reads, so there is nothing behind the listing you cannot see first — the front matter loads with every session, and the body below it loads when the skill triggers.

SKILL.md6.9 kB · 255 lines
--- name: dashboard-create-screen description: Create a new screen in the Multi-site Dashboard with automatic route registration allowed-tools: Read, Glob, Grep, Edit, Write, AskUserQuestion ---
7# Dashboard Create Screen Skill
8
9Creates new screens in client/dashboard with automatic route discovery and registration.
10
11## Step 1: Discover Available Routes
12
13First, find all router files and extract available routes.
14
15### Find Router Files
16
17Use Glob to discover router files:
18```
19client/dashboard/app/router/*.tsx
20client/dashboard/app/router/*.ts
21```
22
23### Extract Routes from Each File
24
25For each router file, use Grep to extract route information.
26
27**Find exported route constants:**
28```regex
29export\s+const\s+(\w+Route)\s*=\s*createRoute
30```
31
32**Extract parent relationships:**
33```regex
34getParentRoute:\s*\(\)\s*=>\s*(\w+Route)
35```
36
37**Extract path segments:**
38```regex
39path:\s*['"]([^'"]+)['"]
40```
41
42**Extract component import paths:**
43```regex
44import\(\s*['"]([^'"]+)['"]\s*\)
45```
46
47### Build Route Information
48
49For each discovered route, record:
50- Route variable name (e.g., siteBackupsRoute)
51- Parent route name (e.g., siteRoute)
52- Path segment (e.g., 'backups')
53- Source file path
54- Component directory (derived from import path)
55
56## Step 2: Discover Navigation Menus (After Route Selection)
57
58Menu discovery happens after the user selects a parent route. Find menus relative to the route's location.
59
60### Determine Menu Search Path
61
62Based on the selected parent route's import path, determine where to search for menus:
63
641. Extract the component directory from the parent route's lazy import
65 - Example: import('../../sites/backups') → search in client/dashboard/sites/
66 - Example: import('../../me/profile') → search in client/dashboard/me/
67
682. Use Glob to find menu files in that area:
69 ```
70 client/dashboard/{area}/**/*-menu/index.tsx
71 ```
72
733. Also check the app-level menu for top-level routes:
74 ```
75 client/dashboard/app/*-menu/index.tsx
76 ```
77
78### Extract Menu Information
79
80For each discovered menu file, use Grep to find:
81
82**Existing menu items pattern:**
83```regex
84<ResponsiveMenu\.Item\s+to=
85```
86
87**Route references in menu:**
88```regex
89to=\{?\s*['"/]([^'"}\s]+)
90```
91
92This helps understand the menu's structure and where to add new items.
93
94### Menu Item Pattern
95
96Menu items use ResponsiveMenu.Item:
97```typescript
98<ResponsiveMenu.Item to="/path/to/screen">
99 { __( 'Menu Label' ) }
100</ResponsiveMenu.Item>
101```
102
103Conditional menu items check feature support:
104```typescript
105{ siteTypeSupports.featureName && (
106 <ResponsiveMenu.Item to={ /sites/${ siteSlug }/feature }>
107 { __( 'Feature' ) }
108 </ResponsiveMenu.Item>
109) }
110```
111
112## Step 3: Gather User Input
113
114Ask the user for the following using AskUserQuestion:
115
1161. **Parent Route**: Present discovered routes grouped by source file
1172. **Screen Name**: lowercase-with-dashes (e.g., custom-settings)
1183. **Route Path**: URL path segment (e.g., custom-settings)
1194. **Page Title**: Human-readable title (e.g., Custom settings)
1205. **Page Description** (optional): Description shown below title
1216. **Add to Navigation Menu?**: Yes or No
122
123## Step 4: Determine File Locations
124
125Based on the selected parent route's import path, determine where to create the component.
126
127**Pattern:** If parent imports from ../../sites/backups, new screen goes in client/dashboard/sites/{screen-name}/
128
129**For sites area:** client/dashboard/sites/{screen-name}/index.tsx
130**For me area:** client/dashboard/me/{screen-name}/index.tsx
131**For other areas:** Follow the same pattern from parent's import path
132
133## Step 5: Create Component File
134
135Generate a basic component with the standard layout.
136
137### Screen Template
138
139```typescript
140import { __ } from '@wordpress/i18n';
141import { PageHeader } from '../../components/page-header';
142import PageLayout from '../../components/page-layout';
143
144export default function {ComponentName}() {
145 return (
146 <PageLayout
147 header={
148 <PageHeader
149 title={ __( '{PageTitle}' ) }
150 description={ __( '{PageDescription}' ) }
151 />
152 }
153 >
154 {/* Content goes here */}
155 </PageLayout>
156 );
157}
158```
159
160## Step 6: Register the Route
161
162Add the route definition to the same router file as the parent route.
163
164### Route Definition Pattern
165
166Add after other route exports in the file:
167
168```typescript
169export const {routeName}Route = createRoute( {
170 head: () => ( {
171 meta: [
172 {
173 title: __( '{PageTitle}' ),
174 },
175 ],
176 } ),
177 getParentRoute: () => {parentRoute},
178 path: '{routePath}',
179} ).lazy( () =>
180 import( '{componentImportPath}' ).then( ( d ) =>
181 createLazyRoute( '{routeId}' )( {
182 component: d.default,
183 } )
184 )
185);
186```
187
188### Wire into Route Tree
189
190Find where the parent route is used in the create*Routes() function and add the new route.
191
192**For standalone routes** (direct child of main area route):
193```typescript
194// Find the routes array (e.g., siteRoutes, meRoutes)
195// Add the new route to the array
196siteRoutes.push( newScreenRoute );
197```
198
199**For nested routes** (child of a feature route):
200```typescript
201// Find where parent uses .addChildren()
202// Add the new route to the children array
203parentRoute.addChildren( [ existingRoute, newScreenRoute ] )
204```
205
206## Step 7: Add Navigation Menu Entry (Optional)
207
208If the user requested a navigation menu entry, add it to the discovered menu file.
209
210### Locate Target Menu File
211
212Use the menu discovered in Step 2 based on the route's area:
213
2141. From the parent route's import path, extract the area (e.g., sites, me, plugins)
2152. Glob for client/dashboard/{area}/**/*-menu/index.tsx
2163. If multiple menus found, present them to the user for selection
2174. If no area-specific menu found, fall back to client/dashboard/app/primary-menu/index.tsx
218
219### Add Menu Item
220
221Read the target menu file and find an appropriate location (typically before the closing </ResponsiveMenu> tag).
222
223**Build the route path from parent route's path + new screen path:**
224- If parent path is /sites/$siteSlug and screen path is analytics → /sites/${ siteSlug }/analytics
225- If parent path is /me and screen path is api-keys → /me/api-keys
226
227**Insert menu item:**
228```typescript
229<ResponsiveMenu.Item to={ {fullRoutePath} }>
230 { __( '{PageTitle}' ) }
231</ResponsiveMenu.Item>
232```
233
234### Match Existing Patterns
235
236Analyze the existing menu items to match the pattern:
237- If menu uses template literals with siteSlug, use the same pattern
238- If menu uses simple strings, use simple strings
239- If menu items have conditional wrappers, ask user if one is needed
240
241### Conditional Menu Items
242
243If the screen requires feature gating (check if similar items in the menu use conditions):
244```typescript
245{ siteTypeSupports.{featureName} && (
246 <ResponsiveMenu.Item to={ /sites/${ siteSlug }/{routePath} }>
247 { __( '{PageTitle}' ) }
248 </ResponsiveMenu.Item>
249) }
250```
251
252## Coding Standards
253
254Follow the coding standards documented in client/dashboard/docs/.
255
In the file
SKILL.md920 words
Files1
LicenceSource-available
Why you can read it

Nothing in a skill executes. The client loads the text and the model follows it, so a skill can be audited the way a runbook is — by reading it.

What it costs in context

Skills are not billed by the call. They are paid for in context: every token the instructions occupy is a token your code, your diff and your conversation cannot use. Here is what this one takes and when it takes it.

≈50
always loaded
The name and description, so the model knows the skill exists and when to reach for it.
1,675
on trigger
The instruction body, read only when the skill fires.
0.86%
of a 200k window
Ten skills this size would take about 9% of the window before you open a file.
050k100k150k200k context window

1.7k tokens, estimated from the bundle at four bytes to the token, held for the rest of the session once it triggers. Middling. Fine to keep on in a project where you use it weekly, worth unloading in one where you never do.

Servers bill, skills cost

A server charges by the month. A skill charges once per session, in context, and then keeps charging it for as long as the session lives.

Before and after

The same question, put to the same model twice: once as it comes, and once with these instructions loaded.

No worked example has been published for this skill yet.

Adoption
Installsnone yet
Ratingno reviews yet

The procedure it runs

The procedure has not been published here. It is in the skill’s own SKILL.md, which its author has not sent to the marketplace yet.

Prose, not code

These steps are written for a model to follow, not executed by a runtime. It can still be told to skip one, and it will say so when it does.

Servers it uses

None. This skill calls no MCP servers at all.

Everything it needs is in the instructions, so it works in a project with nothing connected — the model reads the file and changes how it works with what it can already reach.

It asks the agent to write files, using whatever file access your client already has. It never touches the network.

What it asks for
Writes filesyes
Network accessno

Read from the allowed-tools line of this skill’s own SKILL.md. A skill grants no permissions of its own — it can only ask for tools your client already has.

What it will not do

Every skill is narrow, and the useful ones say where they stop. These are the jobs this one is the wrong tool for.

What this skill is not for has not been published here. Nothing is implied by that: it is a section the author has not filled in.

What is in the bundle

1 file, 6.9 kB on disk. A bundle is text throughout: the instructions the model reads, plus the templates it fills in.

  • SKILL.md6.9 kB
What is not in it

No dependencies and nothing executable: a skill is text the agent reads, so the bundle is 1 file you can review in full before installing. The Source-available licence covers the templates and examples as well as the instructions.

Install

Installing copies the bundle into your project. Nothing runs at install time — the files sit on disk until the model reads them.

# Dashboard Create Screen · 1.7k tokens when loaded npx mcprush@latest skill add automattic/dashboard-create-screen

Writes to .claude/skills/dashboard-create-screen/ in the current project. Add --global to put it in your home directory instead, for every project.

Which clients pick it up on their own

A skill is a folder of text. A client with a skills folder reads it without being told; everywhere else the same text works, it is just handed to the model rather than found.

Claude Code.claude/skills/
Claude Desktop
ChatGPT
Cursor.cursor/skills/
VS Code.github/skills/
Codex CLI.agents/skills/
Gemini CLI.gemini/skills/
Grok.grok/skills/
Zed.agents/skills/
Windsurf.windsurf/skills/
Agent SDK.claude/skills/
HTTP / API
This release
Versionnot versioned
Publishedno release date on file
PriceFree
Referenceautomattic/dashboard-create-screen

Versions

Its author publishes no version number, so there is nothing here to pin to: what you install is the folder as it stands today. Instructions change more often than APIs do — a skill can be rewritten entirely without anything it depends on moving.

v
  • No earlier releases have been published to the marketplace.
Pinning

Nothing to pin to: this skill carries no version number of its own. What you install is what the folder holds on the day you install it.

Reviews

—no reviews yet · no installs yet

Nobody has reviewed this skill yet. The rating is the mean of the reviews written here, so there is none until somebody writes the first.

Who can post

Only accounts that have had the skill installed for fourteen days, so a review is written after living with it rather than after reading it. Publishers may reply once.

Who wrote it

AU
Automattic

Publishes on mcprush.

0 servers listed1 skill listednot claimed
Profile
Publisher
Servers0
Claim this skill