From devops-skills
Builds and refines admin dashboards, back-office consoles, and management UIs with strong visual hierarchy and reusable composition across frameworks.
How this skill is triggered — by the user, by Claude, or both
Slash command
/devops-skills:office-web-ui-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill to build or evolve dashboard-style management interfaces with office-style structure, strong visual hierarchy, and reusable composition while keeping the result portable across frameworks and component libraries.
Use this skill to build or evolve dashboard-style management interfaces with office-style structure, strong visual hierarchy, and reusable composition while keeping the result portable across frameworks and component libraries.
Activate this skill only for admin dashboards, internal dashboards, back-office consoles, reporting systems, customer/user management systems, CRM/ERP-style management pages, or similarly operational products where users repeatedly scan, filter, compare, edit, approve, or manage records.
Do not activate this skill for general UI/UX polish, marketing pages, landing pages, portfolios, brand sites, editorial sites, ecommerce product pages, games, consumer app screens, or one-off visual redesigns unless the user explicitly says the work is for an admin, dashboard, internal tool, back-office, or management system.
This skill is written as the source of truth in SKILL.md so it can be reused across AI tools that support skills, prompt packs, or custom instructions. Tool-specific metadata should stay in adapter files only and must not change the core workflow.
Prioritize two outcomes at the same time:
This skill is not only for shells and navigation. Use it when the management product needs a polished:
When the user asks for a page to feel "beautiful", "modern", "premium", or "like a real web app", first confirm the task is an admin/dashboard/management surface before applying this skill. Do not turn unrelated UI work into generic dashboard boilerplate.
Default expectation:
Inspect the real project first:
Read these references as needed:
references/visual-language.mdreferences/navigation-and-panels.mdreferences/page-type-playbook.mdreferences/framework-adaptation.mdBefore choosing gradients, cards, or hero treatments, classify the page into one of these archetypes:
This decision is mandatory. The page archetype controls density, action placement, and how expressive the page should be.
Read:
references/page-type-playbook.mdDecide whether the page should be:
Use this to control how much gradient, glass, overlap, and decorative depth the page gets.
Rules:
Read:
references/visual-language.mdBefore deeper UI changes, add or normalize semantic classes on important regions.
Read references/locator-class-contract.md and apply these rules:
Use utility classes freely for low-level styling, but pair them with semantic wrappers for:
After the archetype and visual weight are chosen, compose the page in this order:
Use portable recipes for the recurring pieces:
Read:
references/component-recipes.mdBefore implementing, be able to state:
When the project does not already define a better pattern, use these defaults:
Read:
references/visual-language.mdreferences/navigation-and-panels.mdreferences/component-recipes.mdDescribe and implement UI in terms of behavior and structure first.
Do not overfit patterns to PrimeVue or any single library. Library-specific handling belongs in adaptation details only.
Read references/framework-adaptation.md when:
Before handoff, check:
Run the bundled scanner before asking the user where a UI element lives:
python3 scripts/scan_ui_locators.py /path/to/repo
Useful modes:
python3 scripts/scan_ui_locators.py /path/to/repo --match layout-sidebar
python3 scripts/scan_ui_locators.py /path/to/repo --prefix quote-create-page__
python3 scripts/scan_ui_locators.py /path/to/repo --json
Use the scanner to:
Also verify:
--collapsed, --active, --open, --rail for state, not entirely different base names.references/visual-language.mdreferences/navigation-and-panels.mdreferences/page-type-playbook.mdreferences/component-recipes.mdreferences/locator-class-contract.mdreferences/framework-adaptation.mdscripts/scan_ui_locators.py: scan semantic UI locator classes, report files and line numbers, and warn when major-region classes are ambiguous.npx claudepluginhub thienanblog/awesome-ai-agent-skills --plugin office-web-ui-skillsGenerates production-grade frontend UIs via design reasoning framework, style selection, anti-pattern avoidance, accessibility, and responsive standards for React/Vue/Svelte/HTML.
Generates responsive admin dashboards with collapsible sidebars, topbars, stats cards/charts, searchable/paginated data tables, and CRUD forms. Prompts for data type (users/orders), pages, tech stack (HTML+Chart.js or React).
Guides building SaaS dashboards, settings pages, data tables, and layouts with shadcn/ui + Tailwind. Covers component library selection, page composition, responsive design, dark mode, and UI states (loading, empty, error).