| name | sweep-dreams-design |
| description | Use this skill to generate well-branded interfaces and assets for Sweep Dreams (a calm, civic Chicago street-sweeping email-reminder tool), either for production or throwaway prototypes/mocks. Contains essential design guidelines, colors, type, fonts, the Chicago-star brand mark, and a full web UI kit for prototyping. |
| user-invocable | true |
Read the readme.md file within this skill first — it covers the brand idea, content/voice rules, visual foundations, iconography, and a full file index. Then explore the other files.
Key starting points:
- Tokens:
styles.css → tokens/*.css (colors, type, spacing, effects). Link styles.css to inherit every CSS custom property.
- Components:
components/<group>/<Name>.jsx with sibling .d.ts (props) and .prompt.md (what/when + usage). Brand mark lives in components/brand/.
- Full product:
ui_kits/web/ — landing → ward search (with map) → email → confirm → confirmation → edit alerts. components.jsx there is a standalone mirror of the primitives you can lift wholesale.
- Specimens:
guidelines/*.html show colors, type, spacing, and brand.
If creating visual artifacts (slides, mocks, throwaway prototypes), copy assets out (assets/star-mark.svg, assets/wordmark.svg) and write static HTML files that link styles.css. If working on production code, copy assets and follow the rules here to design as an expert in this brand.
Hold the line on the brand: navy = action, sky blue = accent + the star, red = ticket/alert, green = covered. Sentence case; mono for civic data (WARD 32, dates, time windows); calm motion, no bounce; Lucide line icons; no emoji.
If the user invokes this skill without other guidance, ask what they want to build, ask a few focused questions, then act as an expert designer who outputs HTML artifacts or production code as needed.
