Dashboard and app UI skill.
Teaches your AI coding agent to build the dashboards and app screens people use every day: app shells, data tables, settings, detail panels, a command menu and keyboard shortcuts.
People open an app screen to get something done, often many times a day. A good one lets them spot what they need and act on it quickly, and still feels calm after months of use. This skill teaches your agent the tighter, quieter and more predictable design that calls for, across the whole signed-in product: the app shell, data tables, settings, dashboards, side panels and a command menu.
- Skill
wensity-app-ui- Plan
- Included with Wensity Pro
- Loads when
- Building a dashboard, admin panel, settings page, data table or internal tool
- Works in
- Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini CLI, OpenCode
- Format
- Agent Skills (SKILL.md), plain files in your project
- Pack
- One of the Wensity design skills for AI coding agents
Install
1. Sign in once. The CLI asks for an API token from your dashboard and saves it, so you never paste it into a chat.
pnpm dlx wensity@latest login
npx wensity@latest login
yarn dlx wensity@latest login
bunx wensity@latest login
2. Add the skill. It goes into every agent the CLI finds in your project.
pnpm dlx wensity@latest skills add wensity-app-ui
npx wensity@latest skills add wensity-app-ui
yarn dlx wensity@latest skills add wensity-app-ui
bunx wensity@latest skills add wensity-app-ui
Dashboard and app UI comes with Wensity Pro, together with every Pro skill, component, block and template.
Get ProWhen it loads
You never call a skill by name. Your agent reads the short description at the top of every installed skill and loads this one when the work calls for it. Requests like these bring it in:
- Build the invoices screen: sidebar, top bar, a filterable table with bulk actions and a side panel.
- This admin dashboard feels cluttered. Clean it up.
- Add a command menu and keyboard shortcuts to this app.
What it covers
- The app shell
- Sidebar, top bar and content area, how they collapse on smaller screens, and where actions live.
- Data tables
- Column order, sticky headers, row density, a toolbar with filters, selection, bulk actions and pagination.
- Forms and settings
- Sections that save the way people expect, with clear feedback.
- Dashboards and charts
- KPI tiles and charts that answer a question, not decoration.
- Panels and the command menu
- Detail drawers that keep the list in view, and a command menu for every frequent action.
- Feedback, shortcuts and first run
- Notifications, keyboard shortcuts, onboarding and screens that feel fast.
Sort, select and scroll a table
Forty invoices in a short frame. Sort a column, tick a few rows and scroll, then flip the switch and do it again.
Invoices
New invoice| Status | Actions | ||||
|---|---|---|---|---|---|
| Harbor StudioINV-2041 | Paid | Nov 9, 2026 | $180 | ||
| Bright Lane SchoolINV-2040 | Paid | 2026-11-08 | $1553.37 | ||
| Little Ferry CaféINV-2039 | Due | 6/11 | $2926.74 | ||
| Nordlicht GmbHINV-2038 | Paid | Nov 5, 2026 | $4299.11 | ||
| Ocampo LegalINV-2037 | Overdue | 2026-11-03 | $5672.48 | ||
| Kestrel LabsINV-2036 | Draft | 1/11 | $7045.85 | ||
| Osteria NoveINV-2035 | Paid | Oct 31, 2026 | $8418.22 | ||
| Tidewater Co-opINV-2034 | Due | 2026-10-29 | $691.59 | ||
| Mori ArchitectsINV-2033 | Paid | 28/10 | $2064.96 | ||
| Pallet & PineINV-2032 | Paid | Oct 26, 2026 | $3437.33 | ||
| Harbor StudioINV-2031 | Due | 2026-10-24 | $4810.7 | ||
| Bright Lane SchoolINV-2030 | Paid | 23/10 | $6183.07 | ||
| Little Ferry CaféINV-2029 | Overdue | Oct 21, 2026 | $7556.44 | ||
| Nordlicht GmbHINV-2028 | Draft | 2026-10-20 | $8929.81 | ||
| Ocampo LegalINV-2027 | Paid | 18/10 | $1202.18 | ||
| Kestrel LabsINV-2026 | Due | Oct 16, 2026 | $2575.55 | ||
| Osteria NoveINV-2025 | Paid | 2026-10-15 | $3948.92 | ||
| Tidewater Co-opINV-2024 | Paid | 13/10 | $5321.29 | ||
| Mori ArchitectsINV-2023 | Due | Oct 12, 2026 | $6694.66 | ||
| Pallet & PineINV-2022 | Paid | 2026-10-10 | $8067.03 | ||
| Harbor StudioINV-2021 | Overdue | 8/10 | $340.4 | ||
| Bright Lane SchoolINV-2020 | Draft | Oct 7, 2026 | $1713.77 | ||
| Little Ferry CaféINV-2019 | Paid | 2026-10-05 | $3086.14 | ||
| Nordlicht GmbHINV-2018 | Due | 4/10 | $4459.51 | ||
| Ocampo LegalINV-2017 | Paid | Oct 2, 2026 | $5832.88 | ||
| Kestrel LabsINV-2016 | Paid | 2026-09-30 | $7205.25 | ||
| Osteria NoveINV-2015 | Due | 29/9 | $8578.62 | ||
| Tidewater Co-opINV-2014 | Paid | Sep 27, 2026 | $851.99 | ||
| Mori ArchitectsINV-2013 | Overdue | 2026-09-26 | $2224.36 | ||
| Pallet & PineINV-2012 | Draft | 24/9 | $3597.73 | ||
| Harbor StudioINV-2011 | Paid | Sep 22, 2026 | $4970.1 | ||
| Bright Lane SchoolINV-2010 | Due | 2026-09-21 | $6343.47 | ||
| Little Ferry CaféINV-2009 | Paid | 19/9 | $7716.84 | ||
| Nordlicht GmbHINV-2008 | Paid | Sep 18, 2026 | $9089.21 | ||
| Ocampo LegalINV-2007 | Due | 2026-09-16 | $1362.58 | ||
| Kestrel LabsINV-2006 | Paid | 14/9 | $2735.95 | ||
| Osteria NoveINV-2005 | Overdue | Sep 13, 2026 | $4108.32 | ||
| Tidewater Co-opINV-2004 | Draft | 2026-09-11 | $5481.69 | ||
| Mori ArchitectsINV-2003 | Paid | 10/9 | $6854.06 | ||
| Pallet & PineINV-2002 | Due | Sep 8, 2026 | $8227.43 |
Sort by client, date or amount, then scroll the table.
Without the skill: Scroll and the header is gone. Nothing shows the sort, amounts in ragged digits never line up, dates come in three formats, actions hide until you hover, and ticked rows lead nowhere.
Open the command menu
A working command menu inside a small invoicing app. Press ⌘K or Ctrl K inside the demo, type, and run something with Enter.
Without the skill
Invoices
Nothing run yet.
Click into the demo and press ⌘K or Ctrl K, or use the search button. Try typing remind.
Without the skill: It zooms in slowly, lists everything in one column, and Enter does nothing until you arrow down to something. No shortcuts, so it never teaches a faster way.
With the skill
Invoices
Nothing run yet.
Click into the demo and press ⌘K or Ctrl K, or use the search button. Try typing remind.
With the skill: It is open the moment you ask, the top result is ready for Enter, results come in named groups with recent items first, and each action shows the key that runs it next time.
Key rules
- Calm over clever
- One accent and neutral surfaces. No gradients, glows or illustrations in the working area.
- Consistent over unique
- An action keeps its look and position from screen to screen, and every list uses one table pattern.
- Dense, never cramped
- More fits on screen by cutting extra boxes and borders, never by making text smaller.
- No entrance animation
- Content appears without animating in. Movement is kept for responses to what the user did.
- Keyboard first
- Common actions get keyboard shortcuts, and anything opened from the keyboard shows up with no delay.
- Filters live in the URL
- A filtered view can be shared, bookmarked and survives a reload.
Delete three files
Clear out three files and watch the click count. One side asks every time; the other just does it and lets you take it back.
Without the skill
Shared with you
0 deleted, 0 clicks
- Q3 board deck.pdf4.2 MB
- Interview notes, Priya.docx86 KB
- Logo final final v3.svg12 KB
- 2027 budget draft.xlsx310 KB
- Team offsite, Sintra.jpg2.8 MB
Without the skill: Every delete stops to ask the same question, so people press OK without reading, and a mistake cannot come back.
With the skill
Shared with you
0 deleted, 0 clicks
- Q3 board deck.pdf4.2 MB
- Interview notes, Priya.docx86 KB
- Logo final final v3.svg12 KB
- 2027 budget draft.xlsx310 KB
- Team offsite, Sintra.jpg2.8 MB
With the skill: The file goes the moment you ask, and Undo stays long enough to change your mind. Three deletes, three clicks.
Delete three files on each side and compare the click counts.
Files
Everything installs as plain files in your project, in a folder named after the skill.
SKILL.md- Shell, table, settings and dashboard patterns plus the checklist.
Works well with
Accessibility and UI states
ProEvery interaction and data state, plus keyboard, touch, zoom, forced colors and screen readers.
Layout and spacing
FreeA 4px spacing scale, grouping by distance, alignment, containers, grids and responsive structure.
Color and dark mode
ProOKLCH role tokens, true neutral greys, one accent, both themes, and a script that checks contrast and gamut.