ima-claude 2.9.0

package/plugins/ima-claude/skills/quasar-fp/SKILL.md

@@ -0,0 +1,327 @@
+---
+name: "quasar-fp"
+description: "Quasar Framework best practices with utility-first CSS and FP patterns. Use when working with .vue files in Quasar projects, when creating Vue/Quasar components, or when user mentions Quasar, QBtn, QCard, or utility classes like q-pa-md. Enforces utility-first approach to prevent hand-written CSS for standard properties."
+---
+
+# Quasar Framework - Functional Patterns & Utility-First Approach
+
+## Core Principles
+
+**Primary Directive**: "Utilities > custom CSS | Components > HTML | Theme system > inline styles"
+
+### Anti-Over-Engineering for Quasar
+- **DO NOT** write custom CSS for spacing, typography, colors, layout (use utilities)
+- **DO NOT** reinvent components that Quasar provides (QBtn, QCard, QDialog, etc.)
+- **DO NOT** bypass theme system with hardcoded colors or magic numbers
+- **DO** use utilities first, custom CSS only for theme-specific brand elements
+- **DO** leverage Quasar components for consistent UX and accessibility
+- **DO** integrate with theme system via CSS custom properties and SCSS variables
+
+---
+
+## Quick Decision Tree
+
+```
+Creating new component?
+|-- Can Quasar utility classes handle spacing/layout/text?
+|   |-- YES --> Use utilities (q-pa-*, text-*, row/column)
+|   |-- NO --> Is this a standard UI pattern?
+|       |-- YES --> Use Quasar component (QBtn, QCard, QDialog)
+|       |-- NO --> Custom CSS, but use theme variables
+|
+|-- Final check: Does custom CSS exceed 20% of total styling?
+    |-- YES --> Refactor to use more utilities
+```
+
+---
+
+## Utility-First Pattern
+
+### GOOD: Utility-First Approach
+
+```vue
+<template>
+  <div class="q-pa-md q-mb-lg rounded-borders">
+    <h2 class="text-h5 text-weight-bold text-primary q-mb-sm q-mt-none">
+      Title
+    </h2>
+    <p class="text-caption text-grey-7 q-mb-none">
+      Description text
+    </p>
+    <q-toggle
+      v-model="enabled"
+      label="Enable Feature"
+      class="text-weight-medium q-mb-sm"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/theme.scss';
+
+/* ONLY theme-specific custom styling */
+.custom-theme-box {
+  background-color: rgba($color-brand-primary, 0.05);
+  border-left: $border-width-thick solid $color-brand-accent;
+}
+</style>
+```
+
+### BAD: Hand-Written CSS for Standard Properties
+
+```vue
+<!-- DO NOT DO THIS - utilities exist for all of these! -->
+<style scoped>
+.my-container {
+  padding: 16px;              /* Use q-pa-md */
+  margin-bottom: 24px;        /* Use q-mb-lg */
+}
+.my-title {
+  font-size: 1.5rem;          /* Use text-h5 */
+  font-weight: 700;           /* Use text-weight-bold */
+  color: #1976D2;             /* Use text-primary */
+}
+</style>
+```
+
+---
+
+## Common Anti-Patterns & Fixes
+
+| Anti-Pattern | Fix |
+|--------------|-----|
+| `padding: 16px;` | `class="q-pa-md"` |
+| `margin-bottom: 24px;` | `class="q-mb-lg"` |
+| `font-size: 1.5rem; font-weight: 700;` | `class="text-h5 text-weight-bold"` |
+| `color: #1976D2;` | `class="text-primary"` |
+| `display: flex; align-items: center;` | `class="row items-center"` |
+| `<button>` | `<q-btn>` |
+| `<input>` | `<q-input>` |
+| Custom card div | `<q-card>` |
+
+---
+
+## When to Use Custom CSS
+
+Custom CSS is appropriate ONLY for:
+
+1. **Theme-Specific Brand Colors:**
+   ```scss
+   .prayer-card {
+     background-color: rgba($color-brand-primary, 0.05);
+     border-left: $border-width-thick solid $color-brand-accent;
+   }
+   ```
+
+2. **Unique Design Elements:**
+   ```scss
+   .circular-badge {
+     width: 48px;
+     height: 48px;
+     border-radius: 50%;
+     background-color: $color-brand-primary;
+   }
+   ```
+
+3. **Custom Font Families:**
+   ```scss
+   .prayer-title {
+     font-family: $font-family-prayer;
+   }
+   ```
+
+4. **Dark Mode Theme Overrides:**
+   ```scss
+   body.body--dark {
+     .prayer-card {
+       background-color: rgba($color-brand-primary, 0.15);
+     }
+   }
+   ```
+
+---
+
+## Settings Panel Pattern
+
+```vue
+<script setup>
+import { useUserPreferences } from '@/composables/useUserPreferences.js';
+const userPrefs = useUserPreferences();
+</script>
+
+<template>
+  <q-expansion-item
+    default-opened
+    icon="settings"
+    label="Settings Section"
+    header-class="text-weight-bold"
+  >
+    <div class="q-pa-md">
+      <div class="q-pa-md q-mb-md rounded-borders bg-grey-1">
+        <q-toggle
+          v-model="userPrefs.someOption"
+          label="Enable Feature"
+          class="text-weight-medium q-mb-sm"
+        />
+        <p class="text-caption text-grey-7 q-pl-sm q-mb-none">
+          Feature description using Quasar utilities
+        </p>
+      </div>
+    </div>
+  </q-expansion-item>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/theme.scss';
+
+/* Minimal custom CSS - ONLY for theme brand colors */
+.option-box {
+  background-color: rgba($color-brand-secondary, 0.08);
+  border-left: $border-width-thick solid $color-brand-primary;
+}
+</style>
+```
+
+---
+
+## Page Layout Pattern
+
+```vue
+<template>
+  <q-page class="q-pa-md">
+    <!-- Header with utilities -->
+    <div class="text-center q-py-lg q-mb-lg page-header">
+      <h1 class="text-h3 text-weight-bold text-primary q-mb-sm q-mt-none">
+        Page Title
+      </h1>
+      <p class="text-h6 text-italic text-accent q-mb-none">
+        Subtitle
+      </p>
+    </div>
+
+    <!-- Content sections -->
+    <div class="q-mb-xl">
+      <h2 class="text-h5 text-weight-bold text-primary q-my-md">
+        Section Title
+      </h2>
+      <!-- Content -->
+    </div>
+  </q-page>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/theme.scss';
+
+.page-header {
+  border-bottom: 2px solid rgba($color-brand-primary, 0.3);
+}
+</style>
+```
+
+---
+
+## Composable Integration
+
+```javascript
+import { useQuasar } from 'quasar';
+import { computed } from 'vue';
+
+export function useThemeAwareStyles() {
+  const $q = useQuasar();
+
+  // Pure function: derive classes from state
+  const containerClasses = computed(() => ({
+    'q-pa-md': true,
+    'q-mb-lg': true,
+    'rounded-borders': true,
+    'bg-grey-1': !$q.dark.isActive,
+    'bg-grey-9': $q.dark.isActive
+  }));
+
+  return { containerClasses };
+}
+```
+
+---
+
+## Reference Files
+
+For detailed information, consult these reference files:
+
+- **[references/utility-classes.md](references/utility-classes.md)** - Complete utility class reference (spacing, typography, colors, flexbox)
+- **[references/component-patterns.md](references/component-patterns.md)** - Quasar component usage patterns (QBtn, QCard, QDialog, etc.)
+- **[references/theme-integration.md](references/theme-integration.md)** - Theme system, SCSS variables, CSS custom properties, dark mode
+
+---
+
+## Component Quick Reference
+
+| Need | Use Component | Not HTML |
+|------|---------------|----------|
+| Button | `<q-btn>` | `<button>` |
+| Text input | `<q-input>` | `<input>` |
+| Dropdown | `<q-select>` | `<select>` |
+| Toggle | `<q-toggle>` | Custom toggle |
+| Card | `<q-card>` | `<div class="card">` |
+| Modal | `<q-dialog>` | Custom modal |
+| Tabs | `<q-tabs>` | Custom tabs |
+| List | `<q-list>` + `<q-item>` | `<ul>` + `<li>` |
+
+---
+
+## Essential Utility Classes
+
+### Spacing (8px grid)
+- `q-pa-{xs|sm|md|lg|xl}` - Padding all sides (4px, 8px, 16px, 24px, 48px)
+- `q-mb-{size}` - Margin bottom
+- `q-mt-none` - Remove margin top
+
+### Typography
+- `text-h1` through `text-h6` - Headings
+- `text-body1`, `text-body2`, `text-caption` - Body text
+- `text-weight-bold`, `text-weight-medium` - Font weight
+- `text-italic`, `text-uppercase` - Text style
+
+### Colors
+- `text-primary`, `text-secondary`, `text-accent` - Brand colors
+- `text-grey-7` - Muted text
+- `bg-grey-1` - Light background
+
+### Layout
+- `row`, `column` - Flex containers
+- `items-center`, `justify-between` - Alignment
+- `col`, `col-auto` - Flex items
+
+---
+
+## Success Metrics
+
+Target values for components using this skill:
+- Utility usage: 80%+ (utilities vs custom CSS)
+- CSS reduction: 30-50% compared to hand-written
+- Quasar component usage: 90%+ (vs raw HTML)
+- Theme integration: 100% (no hardcoded colors)
+- Dark mode support: Automatic via theme system
+
+---
+
+## Integration
+
+### Dependencies
+- Requires: `js-fp-vue` (Vue 3 FP patterns)
+
+### Context7 Integration
+Query Quasar docs when user asks about specific components or configuration:
+```javascript
+resolveLibraryId({ libraryName: 'quasar', query: 'QTable pagination' })
+```
+
+### Official Documentation
+- Main: https://quasar.dev
+- Utilities: https://quasar.dev/style/spacing
+- Components: https://quasar.dev/vue-components
+
+---
+
+**Framework Version**: Quasar v2 + Vue 3
+**Status**: Production-ready

package/plugins/ima-claude/skills/quasar-fp/metadata.json

@@ -0,0 +1,85 @@
+{
+  "skill": "quasar-fp",
+  "version": "1.0.0",
+  "category": "Frontend Framework",
+  "framework": "Quasar Framework (Vue 3)",
+  "purpose": "Quasar Framework best practices with utility-first CSS and FP patterns",
+  "auto_detect": true,
+  "detection": {
+    "file_patterns": [
+      "**/*.vue",
+      "**/quasar.config.js",
+      "**/quasar.variables.scss"
+    ],
+    "import_patterns": [
+      "import.*from ['\"]quasar['\"]",
+      "useQuasar",
+      "@/composables/use.*\\.js"
+    ],
+    "content_patterns": [
+      "<q-[a-z-]+",
+      "class=\"[^\"]*q-(pa|ma|pt|mt|mb|ml)-[a-z]{2,}",
+      "QBtn|QCard|QDialog|QExpansionItem|QToggle|QInput|QSelect"
+    ],
+    "keywords": [
+      "create component",
+      "build UI",
+      "add form",
+      "settings panel",
+      "quasar component",
+      "vue component"
+    ]
+  },
+  "confidence_weights": {
+    "quasar_config_exists": 0.95,
+    "vue_files_with_q_components": 0.90,
+    "quasar_imports": 0.85,
+    "vue_plus_component_keywords": 0.70
+  },
+  "mcp_integration": {
+    "context7": {
+      "library_name": "quasar",
+      "library_id": "/quasarframework/quasar",
+      "trigger_keywords": [
+        "how to use Q",
+        "Quasar component",
+        "quasar.config",
+        "Quasar documentation",
+        "Quasar styling"
+      ],
+      "example_queries": [
+        "QTable server-side pagination",
+        "QDialog component props",
+        "Quasar theme customization",
+        "QInput validation rules"
+      ]
+    },
+    "sequential": {
+      "trigger_keywords": [
+        "complex Quasar setup",
+        "Quasar configuration",
+        "plugin setup",
+        "boot file"
+      ]
+    }
+  },
+  "dependencies": ["js-fp-vue"],
+  "related_skills": ["js-fp-react", "js-fp"],
+  "examples": {
+    "settings_panel": "src/components/chaplet/SevenSorrowsChapletOptions.vue",
+    "complex_component": "src/components/chaplet/SorrowSection.vue",
+    "page_layout": "src/pages/chaplets/SevenSorrowsChaplet.vue"
+  },
+  "success_metrics": {
+    "utility_usage_target": 0.80,
+    "css_reduction_target": 0.35,
+    "quasar_component_usage_target": 0.90,
+    "theme_integration_target": 1.0
+  },
+  "learning_resources": {
+    "official_docs": "https://quasar.dev",
+    "utility_reference": "https://quasar.dev/style/spacing",
+    "components": "https://quasar.dev/vue-components",
+    "theme_customization": "https://quasar.dev/style/theme-builder"
+  }
+}

package/plugins/ima-claude/skills/quasar-fp/references/component-patterns.md

@@ -0,0 +1,257 @@
+# Quasar Component Patterns - Best Practices
+
+**Purpose**: Guide for using Quasar components effectively with Vue 3 Composition API
+
+---
+
+## Component Philosophy
+
+**Use Quasar components instead of HTML** for:
+- Better accessibility (built-in ARIA)
+- Consistent UX (Material Design)
+- Theme integration (auto-respects brand colors)
+- Mobile optimization (touch-friendly, responsive)
+- Less code (handles edge cases automatically)
+
+---
+
+## Essential Components
+
+### Buttons (QBtn)
+
+```vue
+<q-btn
+  @click="handleClick"
+  label="Click Me"
+  icon="check"
+  color="primary"
+/>
+```
+
+**Common Props:**
+- `label` - Button text
+- `icon` / `icon-right` - Icons
+- `color` - primary|secondary|accent|positive|negative
+- `flat` - No background
+- `outline` - Outlined style
+- `rounded` - Rounded corners
+- `loading` / `disable` - States
+
+---
+
+### Forms (QInput, QSelect, QToggle)
+
+**QInput:**
+```vue
+<q-input
+  v-model="name"
+  label="Enter name"
+  outlined
+  :rules="[val => !!val || 'Required']"
+/>
+```
+
+**QSelect:**
+```vue
+<q-select
+  v-model="selected"
+  :options="options"
+  label="Choose option"
+  outlined
+/>
+```
+
+**QToggle:**
+```vue
+<q-toggle
+  v-model="enabled"
+  label="Enable Feature"
+  color="primary"
+/>
+```
+
+---
+
+### Cards (QCard)
+
+```vue
+<q-card flat bordered class="q-mb-md">
+  <q-card-section class="text-h6">Title</q-card-section>
+  <q-card-section>Content</q-card-section>
+  <q-card-actions align="right">
+    <q-btn label="Action" color="primary" />
+  </q-card-actions>
+</q-card>
+```
+
+---
+
+### Expansion Items (QExpansionItem)
+
+```vue
+<q-expansion-item
+  default-opened
+  icon="settings"
+  label="Settings Section"
+  header-class="text-weight-bold"
+>
+  <q-card flat class="q-pa-md">
+    <!-- Content -->
+  </q-card>
+</q-expansion-item>
+```
+
+---
+
+### Lists (QList, QItem)
+
+```vue
+<q-list bordered class="rounded-borders">
+  <q-item clickable @click="handleClick">
+    <q-item-section avatar>
+      <q-icon name="settings" />
+    </q-item-section>
+    <q-item-section>
+      <q-item-label>Setting Name</q-item-label>
+      <q-item-label caption>Description</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-toggle v-model="value" />
+    </q-item-section>
+  </q-item>
+</q-list>
+```
+
+---
+
+### Dialogs (QDialog)
+
+```vue
+<q-dialog v-model="dialogOpen">
+  <q-card style="min-width: 350px">
+    <q-card-section>
+      <div class="text-h6">Dialog Title</div>
+    </q-card-section>
+    <q-card-section class="q-pt-none">
+      Dialog content
+    </q-card-section>
+    <q-card-actions align="right">
+      <q-btn flat label="Cancel" v-close-popup />
+      <q-btn label="OK" color="primary" v-close-popup />
+    </q-card-actions>
+  </q-card>
+</q-dialog>
+```
+
+---
+
+## Complex Patterns
+
+### Settings Panel
+
+```vue
+<template>
+  <q-expansion-item
+    default-opened
+    icon="settings"
+    label="Display Settings"
+    header-class="text-weight-bold"
+  >
+    <div class="q-pa-md">
+      <div class="q-pa-md q-mb-md rounded-borders bg-grey-1">
+        <q-toggle
+          v-model="setting1"
+          label="Show Feature"
+          class="text-weight-medium q-mb-sm"
+        />
+        <p class="text-caption text-grey-7 q-pl-sm q-mb-none">
+          Feature description
+        </p>
+      </div>
+    </div>
+  </q-expansion-item>
+</template>
+```
+
+### Responsive 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">
+    Page Title
+  </h1>
+  <p class="text-h6 text-italic text-accent q-mb-sm q-mt-none">
+    Subtitle
+  </p>
+  <p class="text-caption text-grey-7 q-mx-auto q-mb-none" style="max-width: 600px">
+    Description
+  </p>
+</div>
+```
+
+---
+
+## Dark Mode Pattern
+
+```vue
+<script setup>
+import { useQuasar } from 'quasar';
+import { computed } from 'vue';
+
+const $q = useQuasar();
+const isDark = computed(() => $q.dark.isActive);
+const toggleDark = () => $q.dark.toggle();
+</script>
+
+<template>
+  <!-- Quasar utilities auto-handle dark mode -->
+  <div class="text-primary bg-secondary q-pa-md">
+    Automatically switches colors in dark mode
+  </div>
+</template>
+```
+
+---
+
+## Responsive Grid
+
+```vue
+<div class="row q-col-gutter-md">
+  <div class="col-12 col-sm-6 col-md-4">
+    <q-card>Content 1</q-card>
+  </div>
+  <div class="col-12 col-sm-6 col-md-4">
+    <q-card>Content 2</q-card>
+  </div>
+  <div class="col-12 col-sm-6 col-md-4">
+    <q-card>Content 3</q-card>
+  </div>
+</div>
+```
+
+**Breakpoints:**
+- `col-xs` - < 600px (mobile)
+- `col-sm` - 600px - 1023px (tablet)
+- `col-md` - 1024px - 1439px (desktop)
+- `col-lg` - 1440px+ (large desktop)
+
+---
+
+## Quick Component Reference
+
+| Need | Use Component | Not HTML |
+|------|---------------|----------|
+| Button | `<q-btn>` | `<button>` |
+| Text input | `<q-input>` | `<input>` |
+| Dropdown | `<q-select>` | `<select>` |
+| Toggle | `<q-toggle>` | Custom toggle |
+| Checkbox | `<q-checkbox>` | `<input type="checkbox">` |
+| Card | `<q-card>` | `<div class="card">` |
+| Modal | `<q-dialog>` | Custom modal |
+| Tabs | `<q-tabs>` | Custom tabs |
+| Table | `<q-table>` | `<table>` |
+| Loading | `<q-spinner>` | Custom spinner |
+
+---
+
+**Reference**: https://quasar.dev/vue-components