---
name: dash
description: Build or review interfaces using HASH's DASH design system. Use for DASH component selection, Panda setup, token styling, or interface review in projects that use or are adopting DASH.
---

# Build with DASH

Deliver the requested interface using the target project's DASH packages, visual conventions, and interaction patterns. Preserve the user's chosen design and task scope. A review request produces findings; it does not authorize implementation or package upgrades.

## Establish the implementation context

Read the repository instructions and inspect the target application's dependency versions, Panda configuration, generated CSS entry point, theme and font setup, and a nearby working interface.

For available imports, props, tokens, and behavior, use the installed package's exports, types, documentation, and source. Use the application's approved design and HASH's foundation guidance for visual decisions. When the website and installed package differ, explain the mismatch and use the installed API; propose an upgrade only if the task needs it. Do not invent a component or prop to match a mock-up.

The canonical documentation is https://hash.design. Start at [llms.txt](https://hash.design/llms.txt), then read relevant pages as Markdown by appending `.mdx` to their paths. Prefer a few targeted pages over the full documentation dump. A component directory illustration is not evidence that its API is published. If network access is unavailable, use local package docs and report what could not be verified.

## Load only the reference needed

- Read [setup.md](references/setup.md) when adopting DASH, changing dependencies, configuring Panda or fonts, or diagnosing missing styles.
- Read [implementation.md](references/implementation.md) when choosing components, composing a screen, styling states, or adapting a layout.
- Read [review.md](references/review.md) when reviewing an interface or checking an implementation before handoff. Scale the checks to the changed behavior.

## Make the interface work

Identify the user's task, the data it needs, and the states that affect the requested change. Reuse existing application components and DASH components where their documented behavior fits. Read the relevant component examples before composing them; keep their keyboard, focus, labeling, and controlled-state contracts intact.

Use the project's Panda styling path and semantic tokens. Check token names against the installed helpers. A generated class name alone does not load the corresponding CSS. Keep style choices statically discoverable by Panda; map runtime values to a bounded set of declared styles.

Use the documented pattern for forms, saving, loading, empty results, and errors when it applies. Preserve entered data through validation and request failures. Keep task outcomes and uncertainty visible in text, including for people who cannot see a color change or animation.

Treat the page's status as part of its guidance. Proposed features do not establish runtime authorization, guarantee accessibility, or provide a published component API. Verify support in the target project before relying on a behavior. Use ordinary implemented controls for current work; isolate an explicitly requested research prototype and describe its limits.

Use approved assets for the intended brand. Follow the target project's font setup and the relevant usage terms. HASH's commercial font licenses do not grant third parties permission to use the fonts.

## Finish with evidence

Run relevant configured checks and exercise the changed interaction in the browser when available. Review keyboard operation, the applicable states, narrow layouts, both supported themes, and reduced motion where the change affects them. A small text edit does not need an entire application audit.

Report the result, the package versions or docs that informed non-obvious decisions, what was tested, and any remaining mismatch or untested behavior. Fix issues within scope. Ask for a decision only when missing information prevents a sound implementation, such as choosing a replacement for an unavailable component or changing a dependency beyond the requested work.