mystical-assistant-designlisted
Install: claude install-skill ainurdev/mystical-assistant
Read the `readme.md` file within this skill, and explore the other available files.
If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets
out and create static HTML files for the user to view. If working on production code,
you can copy assets and read the rules here to become an expert in designing with this
brand.
If the user invokes this skill without any other guidance, ask them what they want to
build or design, ask some questions, and act as an expert designer who outputs HTML
artifacts _or_ production code, depending on the need.
## What's here
- `styles.css` — the one stylesheet to link. `@import`s every token + font file in `tokens/`.
- `tokens/` — `colors.css` (the phosphor palette + moods), `typography.css`, `spacing.css`,
`effects.css` (radius/glow/CRT primitives + the full keyframe library), `fonts.css`
(Share Tech Mono + JetBrains Mono via Google Fonts), `base.css`.
- `assets/` — the brand emblem SVGs (`emblem.svg`, `emblem-boot.svg`).
- `components/` — reusable React primitives in four groups: `core/` (Button, Chip, Card,
Banner, StatusDot, Spinner), `hud/` (Panel, Meter, Stat, Sparkline, SurfaceBadge,
Emblem), `terminal/` (ToolTag, ResultBlock, PromptLine), `forms/` (Field, Dropdown).
Each has a `.d.ts` (props) and `.prompt.md` (what/when + usage).
- `ui_kits/dashboard/` — the desktop HUD recreation (`index.html` + `app.jsx`).
- `ui_kits/miniapp/` — the Telegram Mini App recreation (`index.html` + `app.jsx`).
- `tem