Agent skill

help-system-architect

Design and generate the in-app help system: havainnepolku (visual guidance path) components, help mode (apua-tila), contextual help content, searchable help index, and FAQ/Q&A pairs. Use when (1) creating or updating help pages, (2) building the havainnepolku breadcrumb-path component, (3) implementing help mode overlay, (4) generating help search index, (5) adding contextual tips to pages, (6) brainstorming which guidance paths to create, (7) generating FAQ/Q&A pairs for any app, (8) populating the faq_items table, (9) building searchable help content with keywords. Triggers: "help system", "apua", "havainnepolku", "guidance path", "help mode", "apua-tila", "contextual help", "help content", "help search", "user guidance", "breadcrumb path", "ohje", "opaste", "FAQ", "Q&A", "kysymys", "vastaus", "usein kysytyt", "ukk", "faq items", "help page content".

Stars 0
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/Spectaculous-Code/raamattu-nyt/tree/main/.claude/skills/help-system-architect

SKILL.md

Help System Architect

Design and generate the in-app help system for Raamattu Nyt and IdeaMachina.

Authority

  • Consumes Docs/ai/core-user-model.json as the single source of truth for tasks and paths
  • NEVER redefines tasks or paths — only explains, guides, and contextualizes them
  • The core-ux-detective skill owns task/path definitions; this skill owns help presentation

Two Systems

1. Havainnepolku (Visual Guidance Path)

Interactive step-by-step navigation bar. See references/component-specs.md for specs.

Package: packages/help-guide/ with GuidancePath.tsx, HelpModeProvider.tsx, useHelpMode.ts, HelpTooltip.tsx, HelpSearchIndex.ts.

2. Database FAQ System (faq_items)

Database-driven Q&A pairs with search, per app. Already built:

Component Location
Table public.faq_itemssystem_id, question_fi/en, answer_fi/en, category, keywords[]
Hook src/hooks/useFaq.tsuseFaq() fetches by system_id + published
Display src/components/feedback/FaqSection.tsx — accordion, grouped by category, search bar
Admin /ohjaamo/faq — create/edit/delete, multi-language, publish toggle
Page /ohjeet (HelpPage.tsx) renders <FaqSection />

Categories: general, account, billing, features, troubleshooting, privacy, audio, ai

Workflow

Choose scope from user request:

Request Action
"Generate FAQ" / "Q&A pairs" → FAQ Generation workflow below
"Build help system" → Full system (havainnepolku + FAQ)
"Havainnepolku only" → GuidancePath component
"Help content" → Help pages for specific tasks
"Search index" → Keyword-to-task mapping

FAQ Generation Workflow

See references/faq-generator.md for the complete FAQ generation guide including:

  • Schema reference and insert patterns
  • Feature discovery workflow (scan routes, pages, tabs)
  • Category mapping templates
  • Starter Q&A sets for Raamattu Nyt (31 pairs) and IdeaMachina (13 pairs)
  • Keyword optimization for search

Quick steps:

  1. Discover — Scan app routes and pages to list features
  2. Categorize — Map features to FAQ categories
  3. Generate — Create Q&A pairs (2-4 per feature, fi + en)
  4. Keywords — Add 3-6 search keywords per pair (fi + en)
  5. Insert — SQL migration or direct execute_sql
  6. Verify — Count by system_id + category, target 30-60 per app

Havainnepolku Workflow

  1. Read Docs/ai/core-user-model.json (run core-ux-detective if missing)
  2. Generate GuidancePath data from user_paths
  3. Build components per references/component-specs.md

Help Content Generation

For each task/path, generate content in Finnish:

json
{
  "task_id": "create_reel",
  "title": "Reelsin luominen",
  "what": "Luo kaunis kuvajae Raamatun jakeesta.",
  "when": "Kun haluat jakaa jakeen someen kuvana.",
  "steps": ["Valitse jae", "Paina 'Luo reels'", "Valitse tyyli", "Julkaise"]
}

Rules

  • All user-facing text in Finnish (with English translations in _en fields)
  • Calm, supportive, non-technical tone
  • Short answers: 2-4 sentences max
  • Keywords: include both Finnish and English terms
  • FAQ search works via question, answer, and keywords[] fields
  • Help mode is non-blocking — user can always dismiss
  • Components in packages/help-guide/, FAQ data in faq_items table

Output Files

File Purpose
packages/help-guide/src/*.tsx Shared havainnepolku components
faq_items table Database-driven FAQ (via migration or MCP)
apps/.../components/help/HelpPage.tsx Help page (already exists at /ohjeet)

Expand your agent's capabilities with these related and highly-rated skills.

Spectaculous-Code/raamattu-nyt

docs-updater

Expert assistant for keeping documentation synchronized with code changes in the KR92 Bible Voice project. Use when updating API docs, maintaining architecture diagrams, syncing README, updating CLAUDE.MD, or generating documentation from code.

0 0
Explore
Spectaculous-Code/raamattu-nyt

ai-prompt-manager

Expert assistant for managing AI prompts, features, and configuration in the KR92 Bible Voice AI system. Use when creating AI prompts, configuring AI features, managing prompt versions, setting up AI bindings, or working with AI pricing and models.

0 0
Explore
Spectaculous-Code/raamattu-nyt

performance-auditor

Expert assistant for monitoring and optimizing performance in the KR92 Bible Voice project. Use when analyzing query performance, optimizing database indexes, reviewing React Query caching, monitoring AI call costs, or identifying N+1 queries.

0 0
Explore
Spectaculous-Code/raamattu-nyt

edge-function-generator

Expert assistant for creating and maintaining Supabase Edge Functions for the KR92 Bible Voice project. Use when creating Edge Functions, setting up CORS, integrating shared modules, adding JWT validation, or configuring environment variables.

0 0
Explore
Spectaculous-Code/raamattu-nyt

admin-panel-builder

Expert assistant for creating and maintaining admin panel pages in the KR92 Bible Voice project. Use when creating admin pages, building admin components, integrating with admin navigation, or adding admin features.

0 0
Explore
Spectaculous-Code/raamattu-nyt

lint-fixer

Expert assistant for analyzing and fixing linting and formatting issues in the KR92 Bible Voice project using Biome and TypeScript. Use when fixing lint errors, resolving TypeScript issues, applying code formatting, or reviewing code quality.

0 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results