Workspace / Help & getting started
Help & getting started
A practical guide to running, customizing and extending this HTML-first Tailwind theme.
5 topics
Theme guide
Run and build the theme
Use the source project through its development server. Double-clicking source HTML bypasses TypeScript, Tailwind compilation and shared partials.
npm ci
npx playwright install chromium
npm run dev
Open the local URL printed by Vite. Before delivery, run:
npm run check
npm run preview
npm run check builds the theme and runs the
Playwright suite. npm run preview serves the
compiled output. Deploy the contents of dist/ to
a static host; never edit generated files.
Customize pages, colours and navigation
Edit root HTML pages for page content. Shared sidebar markup
lives in src/project/partials/sidebar.html; Vite
expands {{> sidebar}} at build time.
Keep customer behaviour and CSS in src/project/.
The reusable theme foundation lives in
src/theme/. Add new pages to the input list in
vite.config.ts so production builds include them.
Override existing CSS custom properties in
src/project/css/project.css. Set light and dark
values deliberately; check text, controls and focus contrast
in both themes. Rebuild after adding new Tailwind utilities.
/* Replace placeholders with tested colour values. */
:root { --dd-accent: /* light value */; }
:root[data-theme="dark"] {
--dd-accent: /* dark value */;
}
Work manually or with a coding agent
No agent is required. The same HTML, TypeScript, CSS and npm commands work in an ordinary editor.
When delegating a change, give the agent the repository
instructions in AGENTS.md, name the source files
it may edit, and describe the expected behaviour. Ask it to
preserve unrelated changes and stop before adding services or
dependencies.
Update the project-owned demo page.
Keep the HTML-first Tailwind architecture.
Do not edit dist or add backend integrations.
Preserve keyboard access and light/dark tokens.
Run npm run check and review 390×844,
768×1024 and 1440×1000 screenshots.
Report changed files and any checks not run.
Review the result before publishing. Automated accessibility checks do not replace screen-reader, browser and human visual testing.
Understand preview data and persistence
Projects, people, model costs, test reports and integrations are fictional. Sign-in buttons do not authenticate; invitations do not send email; API keys do not grant access. Review decisions, read states, budgets and form edits reset on reload.
Pinned projects and collapsed sidebar groups are the
exception: those browser-local preferences use
devdash.sidebar-projects.v1 in localStorage.
Clearing that key resets the sidebar. No provider credentials
are stored.
Artifact previews fetch included text files from the same host. Their downloads are actual sample files, not live evidence from a repository.
Real authentication, authorization, metering, notifications and provider connections must be implemented separately. This is a UI theme, not a working developer-operations service.
Keyboard shortcuts and navigation
- ⌘K / Ctrl+K
- Open quick navigation from a workspace page, when no other dialog is open.
- Arrow keys and Enter
- Move through command-palette results and open a destination. Type multiple words to narrow the results.
- Escape
- Close the command palette or a native preview dialog. In mobile navigation, close the current open layer.
- Tab / Shift+Tab
- Move between controls. Project pins appear on keyboard focus as well as hover; touch devices show them without hover.
Use the skip link to reach the main content. Wide tables and log regions can be focused and scrolled with the keyboard.
No matching topics. Try a shorter term or clear the search.
Workflow help
Follow a work item from brief to human review, or explore the support-request example.