Agent skill
idea-machina
Expert assistant for developing the IdeaMachina app - an ideas-to-project pipeline with brainstorming, evaluation, shaping, translation, and "Continue to..." actions that convert ideas into projects, goals, workflows, or prompts. Use when: (1) Adding features to the idea-machina app (apps/idea-machina/) (2) Working with pm_ideas, pm_idea_tags, pm_idea_ratings, pm_projects tables (3) Implementing brainstorm, translate, or AI-assisted idea shaping (4) Implementing "Continue to..." workflows (project, goal, workflow, prompt) (5) Extending the ideas data layer, types, or UI components (6) Working with the idea lifecycle state machine (intake → shaping → evaluation → project) (7) Questions about idea-machina architecture, patterns, or data flow Triggers: "idea-machina", "ideas app", "pm_ideas", "idea management", "continue to project", "idea tags", "idea ratings", "brainstorm idea", "idea shaping", "idea evaluation", "IMIdeaCard", "IdeasStatsBar"
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/idea-machina-spectaculous-code-raamattu-nyt-2
SKILL.md
IdeaMachina Development Guide
App Location
apps/idea-machina/
├── src/
│ ├── pages/
│ │ ├── Index.tsx # Prompts management (original)
│ │ ├── IdeasPage.tsx # Ideas list: stats bar, tabs, single-column cards
│ │ ├── IdeaDetailPage.tsx # Idea detail/edit view
│ │ └── ProjectsPage.tsx # Projects CRUD
│ ├── components/
│ │ ├── ideas/ # New Ohjaamo-style components
│ │ │ ├── config.ts # STATUS_CONFIG: icons, colors, rings per status
│ │ │ ├── IdeasStatsBar.tsx # Clickable stat cards (total + per-status)
│ │ │ ├── IMIdeaCard.tsx # Rich full-width card with inline actions
│ │ │ └── IMIdeasCardList.tsx # List wrapper with loading/empty states
│ │ ├── ui/
│ │ │ └── dropdown-menu.tsx # Radix dropdown-menu (local copy)
│ │ ├── IdeaForm.tsx # Create/edit form with benefit + bilingual fields
│ │ ├── TagSelector.tsx # Multi-select tags + TagChips display
│ │ ├── RatingStars.tsx # 1-5 star input
│ │ ├── LanguageFieldTabs.tsx # FI/EN tab switcher for bilingual fields
│ │ ├── ContinueDialog.tsx # "Continue to..." actions
│ │ ├── BrainstormDialog.tsx # AI brainstorm: develop/split/subideas
│ │ ├── AIPickupToggle.tsx # AI pickup toggle + priority
│ │ └── AppHeader.tsx # Navigation header
│ ├── lib/
│ │ ├── ideas.ts # Data layer: CRUD, brainstorm, translate, stats
│ │ └── aiContext.ts # AI phase history utilities (v2)
│ ├── types/
│ │ └── ideas.ts # TypeScript interfaces + helpers
│ └── App.tsx # Routes
Architecture Principles
- Monorepo: Shared UI from
packages/ui/src/, app-local components for IM-specific - DB schema: All tables in
ai_promptschema viasupabaseAiPromptclient - Data layer:
lib/ideas.tsfor all Supabase operations, React Query for caching - Bilingual: All text fields have
_fi/_envariants,localizedField()resolves - Soft delete:
deleted_atcolumn, never hard delete - AI features: Brainstorm (develop/split/subideas), translate (FI/EN), AI phase history
Key Patterns
Data Fetching (React Query)
const { data: ideas } = useQuery({
queryKey: ["ideas", filters],
queryFn: () => listIdeas(filters),
});
const statusMutation = useMutation({
mutationFn: ({ id, status }) => quickUpdateStatus(id, status),
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["ideas"] }),
});
Bilingual Fields
Every text field has three variants: base, _fi, _en.
// Resolve: prefer current lang, fallback to other, then base
const title = localizedField(i18n.language, idea.title_fi, idea.title_en, idea.title);
Form uses LanguageFieldTabs component for FI/EN tab input.
Status Flow
Statuses: new → nurturing → ready → converted | archived
Inline quick-change buttons on each card. quickUpdateStatus() for direct DB update.
"Continue to..." Actions
Ideas convert to: Project → pm_projects | Goal → pm_goals | Workflow → workflows | Prompt → prompts + prompt_versions
AI Phase History (ai_context JSONB)
Append-only phase log stored in idea.ai_context. Utility: lib/aiContext.ts.
import { normalizeAiContext, addPhase, getLatestPhase } from "../lib/aiContext";
// Types: AiPhase, IdeaAiContext, PromotedResource
// Phases: prepare, brainstorm, develop, split, subideas, translate
Stats (Client-Side)
const stats = computeIdeaStats(ideas); // { total, new, nurturing, ready, converted, archived }
State Machine
Full lifecycle: see Docs/idea-machina/IDEA-MACHINA-STATES.md
IDEA_INTAKE → IDEA_SHAPING (enrich/enhance/decompose)
→ IDEA_EVALUATION (business/tech/risk agents)
→ PROJECT_COMMIT → GOAL_DRAFT → GOAL_POLISH
→ ROADMAP_PLANNING → WORKFLOW_DESIGN
→ EXECUTION → RESULT_EVALUATION → DELIVERY
→ MONITORING → LEARNING ↺ feeds back
Currently implemented: Intake, partial Shaping (brainstorm), Continue-to-Project. Future: Evaluation agents, goal polishing, roadmap planning, execution/monitoring.
References
- Architecture Details — Component hierarchy, data flow, query keys
- DB Schema — Table structures, bilingual columns, RLS policies
- State machine:
Docs/idea-machina/IDEA-MACHINA-STATES.md
Common Tasks
Add New Field to Ideas
- Migration:
ALTER TABLE ai_prompt.pm_ideas ADD COLUMN ...(+_fi/_envariants) - Types: Update
PmIdeaandIdeaFormDataintypes/ideas.ts - Form: Add
LanguageFieldTabsinIdeaForm.tsx - Card: Display in
IMIdeaCard.tsx - Translate: Add to
TranslationResultandapplyTranslationinlib/ideas.ts
Add New "Continue to..." Action
- Types: Add payload interface in
types/ideas.ts - Data: Add function in
lib/ideas.ts - Dialog: Add option and form in
ContinueDialog.tsx - Handlers: Wire up in
IdeasPage.tsx
Add New Tab/Filter
- Tab: Add to
TabValuetype and<Tabs>inIdeasPage.tsx - Filter: Add client-side logic in
filteredIdeasuseMemo - Or add server-side filter param to
IdeaFilterstype andlistIdeas()
Implement Next State Machine Phase
- Reference
Docs/idea-machina/IDEA-MACHINA-STATES.mdfor transitions - Add status/state fields to DB if needed
- Create components for the new phase UI
- Add service functions in
lib/ideas.ts - Wire into page with mutations and dialogs
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?