UI Context

SkillDatabases & data

Load context for UI, frontend, navigation, and analytics work. Use when starting any visual, interaction, or engagement task.

Use UI Context in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add UI Context and connect your AI. About a minute.

Then ask your AI: use the UI Context skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.

No other account needed.

Add Ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

The instructions your AI receives, as published by embassy-of-the-free-mind/sourcelibrary-v2 in .claude/skills/ui-context/SKILL.md and read by Ahel’s review.

Read these files before proceeding with UI work:

Always use bookUrl(book) for internal links (slug-based). Hex IDs break client nav.
Never store /api/image?url= as book.thumbnail — crashes Next.js <Image> SSR
Use navigator.sendBeacon() for analytics tracking, never axios
Wrap useSearchParams() in Suspense boundary — triggers BAILOUT_TO_CLIENT_SIDE_RENDERING
DELETE blocked globally by src/proxy.ts safety middleware — use POST-based admin routes

After reading the memory files above, flag anything that contradicts what you observe in the codebase:

File paths or function names that no longer exist
Behavioral claims that don't match the current code
If you find contradictions, update the memory file immediately and tell the user what changed.

Advanced