ima-claude 2.9.0

package/plugins/ima-claude/skills/quasar-fp/references/theme-integration.md

@@ -0,0 +1,233 @@
+# Quasar Theme Integration - CSS Variables & SCSS Patterns
+
+**Purpose**: Guide for integrating custom themes with Quasar's utility system
+
+---
+
+## Theme System Architecture
+
+### Three-Layer System
+
+**Layer 1: Theme Definition** (`src/styles/theme.scss`)
+- Central source of truth for colors, typography, spacing
+- SCSS variables for build-time values
+- CSS custom properties for runtime theming (dark mode)
+
+**Layer 2: Quasar Integration** (`src/css/quasar.variables.scss`)
+- Maps theme to Quasar's color system
+- Overrides Quasar defaults with brand colors
+
+**Layer 3: Component Usage**
+- Quasar utilities use theme automatically (`text-primary`, `bg-secondary`)
+- Custom CSS uses theme variables for brand-specific styling
+
+---
+
+## CSS Custom Properties vs SCSS Variables
+
+### CSS Custom Properties (Runtime)
+
+**Use for:** Values that change at runtime (dark mode, user preferences)
+
+```scss
+:root {
+  --color-text-primary: #391c11;
+  --color-prayer-text: #f0dab8;
+}
+
+body.body--dark {
+  --color-text-primary: #f0dab8;
+}
+```
+
+```vue
+<style scoped>
+.prayer-text {
+  color: var(--color-prayer-text);  /* Auto-switches in dark mode */
+}
+</style>
+```
+
+### SCSS Variables (Build-Time)
+
+**Use for:** Static values that don't change at runtime
+
+```scss
+$color-brand-primary: #844628;
+$font-family-prayer: 'Crimson Text', serif;
+```
+
+```vue
+<style scoped lang="scss">
+@import '@/styles/theme.scss';
+
+.custom-element {
+  background-color: rgba($color-brand-primary, 0.05);
+  font-family: $font-family-prayer;
+}
+</style>
+```
+
+---
+
+## Quasar Color Integration
+
+### Mapping Custom Colors
+
+**In `quasar.variables.scss`:**
+```scss
+@import '@/styles/theme.scss';
+
+$primary: $color-brand-primary;
+$secondary: $color-brand-secondary;
+$accent: $color-brand-accent;
+
+// Now Quasar utilities use your brand colors!
+// class="text-primary" uses your custom color
+```
+
+---
+
+## Decision Tree
+
+```
+Need to style something?
+|-- Is it spacing, typography, or layout?
+|   --> Use Quasar utilities (q-pa-md, text-h5, row)
+|
+|-- Is it a color in Quasar's palette?
+|   --> Use Quasar color utilities (text-primary, bg-grey-1)
+|
+|-- Is it a custom brand color?
+|   --> Use SCSS variable: rgba($color-brand-primary, 0.05)
+|
+|-- Does it need to change in dark mode?
+|   --> Use CSS custom property: var(--color-prayer-text)
+|
+|-- Is it a unique design element?
+    --> Write minimal custom CSS with theme variables
+```
+
+---
+
+## Theme Mixin Patterns
+
+**Define in `theme.scss`:**
+```scss
+@mixin prayer-text-base {
+  font-family: $font-family-prayer;
+  color: var(--color-prayer-text);
+  line-height: $line-height-relaxed;
+}
+
+@mixin bg-elevated {
+  background-color: var(--color-surface-elevated);
+  border-radius: $radius-md;
+  box-shadow: $shadow-sm;
+}
+```
+
+**Use in components:**
+```vue
+<style scoped lang="scss">
+@import '@/styles/theme.scss';
+
+.prayer-content {
+  @include prayer-text-base;
+}
+</style>
+```
+
+---
+
+## Complete Example: Hybrid Approach
+
+```vue
+<template>
+  <q-card flat bordered class="prayer-card rounded-borders q-mb-lg">
+    <q-card-section>
+      <!-- Header: 100% utilities -->
+      <div class="row items-start q-mb-md">
+        <div class="prayer-number row items-center justify-center">1</div>
+        <div class="col">
+          <h2 class="text-h5 text-weight-bold text-primary q-mb-sm q-mt-none">
+            Prayer Title
+          </h2>
+        </div>
+      </div>
+
+      <!-- Content: utilities + custom mixin -->
+      <div class="prayer-content q-pa-md q-my-md rounded-borders">
+        <pre class="prayer-text">Prayer text</pre>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/theme.scss';
+
+/* Custom CSS ONLY for theme-specific brand elements */
+
+.prayer-card {
+  background-color: rgba($color-brand-primary, 0.05);
+  border-color: rgba($color-brand-primary, 0.2);
+}
+
+.prayer-number {
+  width: 48px;
+  height: 48px;
+  background-color: $color-brand-primary;
+  color: white;
+  border-radius: 50%;
+}
+
+.prayer-text {
+  @include prayer-text-base;
+}
+
+/* Dark mode */
+body.body--dark {
+  .prayer-card {
+    background-color: rgba($color-brand-primary, 0.15);
+  }
+}
+</style>
+```
+
+---
+
+## Common Mistakes & Solutions
+
+### Mistake 1: Hardcoded Colors
+
+Bad: `color: #844628;`
+Good: `class="text-primary"` or `color: $color-brand-primary;`
+
+### Mistake 2: Magic Number Spacing
+
+Bad: `padding: 17px;`
+Good: `class="q-pa-md"` (16px from 8px grid)
+
+### Mistake 3: Bypassing Dark Mode
+
+Bad: `background: #ffffff;`
+Good: `class="bg-grey-1"` or `background-color: var(--color-surface-bg);`
+
+---
+
+## CSS Architecture Summary
+
+**Ideal Component Structure:**
+- 80% utilities in template
+- 20% custom CSS in style block
+
+**What Goes Where:**
+- **Utilities**: spacing, typography, layout, standard colors
+- **SCSS Variables**: brand colors, custom fonts
+- **CSS Properties**: runtime theme values (dark mode)
+- **Mixins**: reusable patterns
+
+---
+
+**Reference**: https://quasar.dev/style/theme-builder

package/plugins/ima-claude/skills/quasar-fp/references/utility-classes.md

@@ -0,0 +1,237 @@
+# Quasar Utility Classes - Complete Reference
+
+**Purpose**: Comprehensive reference for all Quasar utility classes (Bootstrap-style)
+
+---
+
+## Spacing System (8px Grid)
+
+### Size Scale
+- `xs` = 4px (0.25rem)
+- `sm` = 8px (0.5rem)
+- `md` = 16px (1rem)
+- `lg` = 24px (1.5rem)
+- `xl` = 48px (3rem)
+
+### Padding Classes
+
+**All Sides:**
+- `q-pa-none` - 0
+- `q-pa-xs` - 4px
+- `q-pa-sm` - 8px
+- `q-pa-md` - 16px
+- `q-pa-lg` - 24px
+- `q-pa-xl` - 48px
+
+**Top:** `q-pt-{size}`
+**Right:** `q-pr-{size}`
+**Bottom:** `q-pb-{size}`
+**Left:** `q-pl-{size}`
+**Horizontal (L+R):** `q-px-{size}`
+**Vertical (T+B):** `q-py-{size}`
+
+### Margin Classes
+
+Same pattern as padding, but with `m` instead of `p`:
+- `q-ma-{size}` - All sides
+- `q-mt-{size}` - Top
+- `q-mr-{size}` - Right
+- `q-mb-{size}` - Bottom
+- `q-ml-{size}` - Left
+- `q-mx-{size}` - Horizontal
+- `q-my-{size}` - Vertical
+
+### Margin Auto
+- `q-mx-auto` - Center horizontally
+- `q-ml-auto` - Push to right
+- `q-mr-auto` - Push to left
+
+---
+
+## Typography Classes
+
+### Headings
+- `text-h1` - 6rem (96px), weight 300
+- `text-h2` - 3.75rem (60px), weight 300
+- `text-h3` - 3rem (48px), weight 400
+- `text-h4` - 2.125rem (34px), weight 400
+- `text-h5` - 1.5rem (24px), weight 400
+- `text-h6` - 1.25rem (20px), weight 500
+
+### Body Text
+- `text-body1` - 1rem (16px), weight 400
+- `text-body2` - 0.875rem (14px), weight 400
+- `text-subtitle1` - 1rem (16px), weight 500
+- `text-subtitle2` - 0.875rem (14px), weight 500
+- `text-caption` - 0.75rem (12px), weight 400
+- `text-overline` - 0.75rem (12px), weight 400, uppercase
+
+### Font Weight
+- `text-weight-thin` - 100
+- `text-weight-light` - 300
+- `text-weight-regular` - 400
+- `text-weight-medium` - 500
+- `text-weight-bold` - 700
+- `text-weight-bolder` - 900
+
+### Text Style
+- `text-italic`
+- `text-no-wrap`
+- `text-strike`
+- `text-uppercase`
+- `text-lowercase`
+- `text-capitalize`
+
+### Text Alignment
+- `text-left`
+- `text-center`
+- `text-right`
+- `text-justify`
+
+---
+
+## Color Classes
+
+### Brand Colors (Theme-Aware)
+- `text-primary` / `bg-primary`
+- `text-secondary` / `bg-secondary`
+- `text-accent` / `bg-accent`
+
+### Semantic Colors
+- `text-positive` / `bg-positive` - Success (green)
+- `text-negative` / `bg-negative` - Error (red)
+- `text-warning` / `bg-warning` - Warning (yellow/orange)
+- `text-info` / `bg-info` - Info (blue)
+
+### Grayscale
+- `text-grey-1` / `bg-grey-1` - Lightest
+- `text-grey-5` / `bg-grey-5` - Medium
+- `text-grey-9` / `bg-grey-9` - Darkest
+
+### Special Colors
+- `text-white` / `bg-white`
+- `text-black` / `bg-black`
+- `text-transparent` / `bg-transparent`
+
+---
+
+## Flexbox Classes
+
+### Containers
+- `row` - flex row (display: flex)
+- `column` - flex column (display: flex; flex-direction: column)
+- `row inline` - inline flex row
+- `reverse` - reverse order (combine with row/column)
+
+### Alignment (align-items)
+- `items-start` - flex-start
+- `items-center` - center
+- `items-end` - flex-end
+- `items-stretch` - stretch
+- `items-baseline` - baseline
+
+### Justification (justify-content)
+- `justify-start` - flex-start
+- `justify-center` - center
+- `justify-end` - flex-end
+- `justify-between` - space-between
+- `justify-around` - space-around
+- `justify-evenly` - space-evenly
+
+### Self Alignment
+- `self-start`, `self-center`, `self-end`, `self-stretch`, `self-baseline`
+
+### Flex Items
+- `col` - flex: 1 (equal width)
+- `col-auto` - flex: 0 0 auto (content width)
+- `col-grow` - flex-grow: 1
+- `col-shrink` - flex-shrink: 1
+
+### Flex Wrap
+- `wrap` - flex-wrap: wrap
+- `no-wrap` - flex-wrap: nowrap
+- `reverse-wrap` - flex-wrap: wrap-reverse
+
+---
+
+## Display Classes
+
+- `block` - display: block
+- `inline` - display: inline
+- `inline-block` - display: inline-block
+- `hidden` - display: none
+
+---
+
+## Border & Radius Classes
+
+- `rounded-borders` - border-radius: 4px
+- `no-border` - border: 0
+- `no-border-radius` - border-radius: 0
+
+---
+
+## Shadow Classes
+
+- `shadow-1` through `shadow-5` - Increasing elevation
+- `no-shadow` - box-shadow: none
+
+---
+
+## Position Classes
+
+- `relative-position` - position: relative
+- `absolute` - position: absolute
+- `fixed` - position: fixed
+- `absolute-top`, `absolute-right`, `absolute-bottom`, `absolute-left`
+- `absolute-center` - Center absolutely
+- `absolute-full` - Fill parent
+
+---
+
+## Width/Height Classes
+
+- `fit` / `full-width` - width: 100%
+- `full-height` - height: 100%
+
+---
+
+## Responsive Classes
+
+### Breakpoint Visibility
+- `lt-sm` - Hide when < 600px
+- `lt-md` - Hide when < 1024px
+- `gt-xs` - Hide when > 599px
+- `gt-sm` - Hide when > 1023px
+
+---
+
+## Common Utility Combinations
+
+### Centered Header
+```vue
+<div class="text-center q-py-lg q-mb-lg">
+  <h1 class="text-h3 text-weight-bold text-primary q-mb-sm q-mt-none">Title</h1>
+  <p class="text-h6 text-italic text-accent q-mb-none">Subtitle</p>
+</div>
+```
+
+### Flex Container
+```vue
+<div class="row items-center justify-between q-mb-md">
+  <div class="col-auto">Left</div>
+  <div class="col-auto">Right</div>
+</div>
+```
+
+### Toggle with Description
+```vue
+<div class="q-pa-md q-mb-md rounded-borders">
+  <q-toggle v-model="value" label="Option" class="text-weight-medium q-mb-sm" />
+  <p class="text-caption text-grey-7 q-pl-sm q-mb-none">Description</p>
+</div>
+```
+
+---
+
+**Reference**: https://quasar.dev/style/spacing

package/plugins/ima-claude/skills/quickstart/SKILL.md

@@ -0,0 +1,129 @@
+---
+name: "quickstart"
+description: "Team cheat sheet — scannable reference of the most common ima-claude workflows, commands, and MCP tools. What to type, not why. Use when: quickstart, cheat sheet, what can I do, getting started, how do I use, help me get started."
+---
+
+# ima-claude Quickstart
+
+## Instructions
+
+**Display the entire cheat sheet below directly to the user.** Output it as-is in your response. Do not summarize, do not run any tools, do not perform memory bootstrap. Just print the cheat sheet.
+
+---
+
+## Starting a Session
+
+| What | Command |
+|------|---------|
+| Resume previous work | `/ima-claude:resume-session` |
+| Save before ending | `/ima-claude:save-session` |
+
+Memory bootstrap runs automatically at session start (Vestige search + intention check).
+
+---
+
+## IMA Workflow
+
+Habit-driven, not tool-enforced. Six steps:
+
+| Step | Where | Command / Action |
+|------|-------|-----------------|
+| **1. Brainstorm** | Claude Web Project | Ideate, flush out concept into a plan |
+| **2. Plan** | Claude Code — Plan Mode | `/plan` or ask Claude to enter Plan Mode |
+| **3. Implement** | Claude Code | "Break this into tasks" (triggers `task-master`) |
+| **4. Test** | Claude Code + manual | Unit tests + human testing |
+| **5. Review** | Fresh Claude Code terminal | `/ima-claude:scorecard` + targeted reviews |
+| **6. Document** | Confluence / Jira / MCP memory | Update Qdrant, Serena, Vestige, Markdowns |
+
+Review findings may cycle back to any earlier step.
+
+---
+
+## Writing Code
+
+FP skills auto-activate by file type — just start coding.
+
+| Context | Skill |
+|---------|-------|
+| JavaScript/TypeScript | `js-fp` |
+| React | `js-fp-react` |
+| Vue/Quasar | `js-fp-vue`, `quasar-fp` |
+| WordPress JS | `js-fp-wordpress`, `jquery` |
+| PHP | `php-fp` |
+| WordPress PHP | `php-fp-wordpress` |
+| Ruby | `ruby-fp` |
+| Ruby on Rails | `rails` |
+| Discourse plugins | `discourse` |
+| Discourse frontend (Ember) | `ember-discourse` |
+| Bootstrap/CSS | `ima-bootstrap` |
+| E2E tests | `playwright` |
+
+Core rule: **Simple > Complex. No custom FP utilities. Native patterns.**
+
+---
+
+## Reviewing Code
+
+| What | Command |
+|------|---------|
+| Project quality scorecard | `/ima-claude:scorecard` |
+| Full multi-agent review (Compound Engineering) | `/workflows:review` |
+| Organize docs | `docs-organize` skill (Active/Archive/Transient tiers) |
+
+---
+
+## Documenting Solutions
+
+| What | Command |
+|------|---------|
+| Update cross-session knowledge | Vestige (`smart_ingest`) |
+| Store large docs / plans | Qdrant (`mcp-qdrant`) |
+| Document a solved problem (Compound Engineering) | `/workflows:compound` |
+| Organize docs | `docs-organize` skill (Active/Archive/Transient tiers) |
+
+---
+
+## Searching & Research
+
+| Need | Tool |
+|------|------|
+| Current info (2025/2026, "latest") | Tavily (`mcp-tavily`) |
+| Library/framework API docs | Context7 (`mcp-context7`) |
+| Code symbols, references, rename | Serena (`mcp-serena`) |
+| Past solutions, large docs | Qdrant (`mcp-qdrant`) |
+| Cross-session knowledge | Vestige (`mcp-vestige`) |
+| Complex reasoning, debugging | Sequential Thinking (`mcp-sequential`) |
+
+---
+
+## Memory — Where to Store What
+
+| What | Where |
+|------|-------|
+| Preferences, decisions, patterns | **Vestige** (auto-stored, spaced repetition) |
+| PRDs, plans, large docs | **Qdrant** (semantic search, local RAG) |
+| Session state (current task, WIP) | **Serena** (`/ima-claude:save-session`) |
+
+Vestige stores automatically when you say "I prefer...", "Let's go with...", "From now on..."
+
+---
+
+## Project Setup
+
+| What | Where |
+|------|-------|
+| Project skills & philosophy | `CLAUDE.md` in project root |
+| Review agent config | `compound-engineering.local.md` in project root |
+| Team Jira sync | `jira-checkpoint` skill (before/during/after work) |
+
+---
+
+## Fun Stuff
+
+| What | Command |
+|------|---------|
+| Warhammer 40K themed responses | "Enable 40k mode" |
+| Medieval crusader themed | "Enable templars" |
+| Back to normal | "Disable personality" |
+
+Personalities are tone overlays — expertise stays the same.