thalarch-design-systemlisted

# Thalarch Design System A strong site should look like one product, not a sequence of independently styled sections. Use this skill to create a **semantic design contract** before implementation or to reverse-engineer one from an existing frontend. ## 1. Start with product character Define: - product/subject; - audience; - primary job; - visual atmosphere; - density: airy / balanced / dense; - composition: ordered / asymmetric / expressive; - motion: restrained / fluid / cinematic; - one distinctive design idea that belongs to this product. Avoid design adjectives that could describe any startup. ## 2. Extract before inventing If an existing product already has UI or brand assets, inspect first: - theme/tokens; - CSS variables; - Tailwind/theme configuration; - component library; - typography declarations; - spacing/radius/shadow patterns; - icons and imagery; - screenshots or Figma/Stitch references when available. Preserve stable identity unless redesign is explicitly requested. ## 2.5 External design-reference atlas When the project/user does not already provide enough visual direction and external research is available, use `references/awesome-design-md.md`. That reference maps `VoltAgent/awesome-design-md` into Thalarch's workflow. The source is valuable because its analyzed `DESIGN.md` files encode design systems as structured reasoning rather than surface screenshots. Use it selectively: - choose one primary reference by task fit; - use at most one seco