Claude Skills by ainurdev

Use when checking a UI against WCAG basics — keyboard, contrast, semantics, and announced state.

Use when documenting endpoints or a public interface — task-oriented, with real examples.

Use when frontend work in this repo needs to be looked at rather than asserted — after changing anything under bridge/dashboard/web, bridge/miniapp/web or site/, or when the user says "screenshot it", "does it look right", "show me the dashboard", or asks you to verify a UI change. Covers headless capture in WSL and driving the live UIs over CDP.

Use when adding or changing a capability in this repo that users should reach — a new endpoint, panel, command, or piece of session data. Names every file the change has to touch across the bot, the Mini App and the dashboard, in order, so a surface doesn't get left behind. Use before writing code, not after.

Use when a change to this repo needs to actually run — after editing anything under bridge/, or when the user says "restart the bridge", "is it live", "ship it", "rebuild the dashboard", or reports that a fix you already made isn't working. Covers the build/restart/verify loop and the ways restarting from inside a bridge session kills your own turn.

Use when starting a feature, experiment or risky refactor in this repo — anything bigger than a one-file fix. Also when the user says "worktree", "new branch", "work on this in parallel", or when a change adds a table, a column or any new persisted data. Covers where the worktree goes, what is missing inside it, and keeping new data off the live bridge DB.

Use when writing release notes — grouped by what users can now do, not by commit.

Use when building or fixing a palette — accessible, consistent, and legible in both themes.

When the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "content ideas," "blog strategy," "topic clusters," or "content planning." For writing individual pieces, see copywriting. For SEO-specific audits, see seo-audit.

Use when the user sends /design-first <task> or presses the composer's DESIGN button — design the change before any implementation. Produces brand-system HTML mockups plus a short spec, screenshots them into the transcript, pushes the draft to the linked Claude Design project, and stops for approval; repo code changes start only after the user approves.

Use when the user sends /design-implement [name] — they designed something themselves in the claude.ai Design UI; pull it from the linked Claude Design project and implement it in this repo.

Use when critiquing a screen or component — hierarchy, spacing, states, and whether it reads as intentional.

Use when setting up or auditing a token system — colour, spacing, radius, and type as named decisions.

Use when a view can be empty, slow, or broken — design the other three states, not just the happy one.

Use when adding motion or feedback — fast, purposeful, interruptible, and reduced-motion aware.

Use this skill to generate well-branded interfaces and assets for Mystical Assistant — a remote-dev bridge that runs Claude Code on your machine, driven from a Telegram bot, a Telegram Mini App, and a localhost desktop dashboard. Its look is a phosphor CRT terminal HUD (teal-on-black, monospace, scanlines, corner-bracketed panels, an occult-oracle voice). Use for production work or throwaway prototypes/mocks/decks. Contains design guidelines, color/type/spacing tokens, fonts, the brand emblem...

Apply David Ogilvy's advertising principles when writing or reviewing copy, headlines, product descriptions, landing pages, ads, emails, or any persuasive text. Use when the goal is copy that sells, not copy that wins awards. Covers positioning, headlines, promises, brand voice, long-form copy, and visual logic. Source: How to Create Advertising That Sells (1972) + Ogilvy on Advertising.

Use when writing onboarding docs — get a newcomer to a working change on day one.

Use when setting type — a small ramp, deliberate line height, and hierarchy that survives real content.

Pick and apply a complete visual style direction — surface ladder, type scale, accent discipline, and one signature structural motif — for a website, landing page, dashboard, or app shell. Use when asked for a specific look such as dark glass, dark technical, frosted workspace, warm paper, beige minimal, editorial grid, archival book, wireframe diagnostic, cobalt contrast, or "make it feel premium/expensive/engineered", or when a design needs a coherent direction rather than ad-hoc styling.