Skip to content

Jump to…

↑ ↓ to move · Enter to open · Esc to close

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.

Workflow help

Follow a work item from brief to human review, or explore the support-request example.

Explore form patterns

View theme documentation

DevSikt assistant

Scripted component demo

How can I help? Try asking where to change colours or how to build the theme.

No AI connection. Messages reset on reload.

Full-page chat