ima-claude 2.20.0 → 2.26.0

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

@@ -3,90 +3,30 @@ 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
+# Quasar Framework - Utility-First + FP
 
-## Core Principles
+**Directive**: Utilities > custom CSS | Components > HTML | Theme system > inline styles
 
-**Primary Directive**: "Utilities > custom CSS | Components > HTML | Theme system > inline styles"
+## Rules
 
-### 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
+- Use utility classes for spacing, typography, colors, layout — no custom CSS for these
+- Use Quasar components (QBtn, QCard, QDialog, etc.) — don't reinvent them
+- Integrate with theme system via CSS custom properties and SCSS variables
+- Custom CSS only for theme-specific brand elements
 
----
-
-## Quick Decision Tree
+## 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
+├── Can Quasar utilities handle spacing/layout/text?
+│   ├── YES → Use utilities (q-pa-*, text-*, row/column)
+│   └── NO → Standard UI pattern?
+│       ├── YES → Use Quasar component (QBtn, QCard, QDialog)
+│       └── NO → Custom CSS with theme variables
+└── Does custom CSS exceed 20% of total styling? → Refactor to 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-Patterns & Fixes
 
 | Anti-Pattern | Fix |
 |--------------|-----|
@@ -99,126 +39,33 @@ Creating new component?
 | `<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
+## Utility-First Example
 
 ```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>
+  <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</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';
-
-/* 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;
+/* 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>
 ```
 
----
-
-## 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';
+## When Custom CSS Is Appropriate
 
-.page-header {
-  border-bottom: 2px solid rgba($color-brand-primary, 0.3);
-}
-</style>
-```
-
----
+1. Theme-specific brand colors: `rgba($color-brand-primary, 0.05)`
+2. Unique design elements: circular badges, custom shapes
+3. Custom font families: `font-family: $font-family-prayer`
+4. Dark mode theme overrides: `body.body--dark { ... }`
 
 ## Composable Integration
 
@@ -228,8 +75,6 @@ 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,
@@ -237,91 +82,45 @@ export function useThemeAwareStyles() {
     '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>` |
-
----
+| Need | Component |
+|------|-----------|
+| Button | `<q-btn>` |
+| Text input | `<q-input>` |
+| Dropdown | `<q-select>` |
+| Toggle | `<q-toggle>` |
+| Card | `<q-card>` |
+| Modal | `<q-dialog>` |
+| Tabs | `<q-tabs>` |
+| List | `<q-list>` + `<q-item>` |
 
 ## 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
+**Spacing (8px grid):** `q-pa-{xs|sm|md|lg|xl}` (4/8/16/24/48px), `q-mb-{size}`, `q-mt-none`
 
-### 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
+**Typography:** `text-h1`–`text-h6`, `text-body1`, `text-body2`, `text-caption`, `text-weight-bold`, `text-weight-medium`, `text-italic`, `text-uppercase`
 
-### Colors
-- `text-primary`, `text-secondary`, `text-accent` - Brand colors
-- `text-grey-7` - Muted text
-- `bg-grey-1` - Light background
+**Colors:** `text-primary`, `text-secondary`, `text-accent`, `text-grey-7`, `bg-grey-1`
 
-### Layout
-- `row`, `column` - Flex containers
-- `items-center`, `justify-between` - Alignment
-- `col`, `col-auto` - Flex items
+**Layout:** `row`, `column`, `items-center`, `justify-between`, `col`, `col-auto`
 
----
-
-## Success Metrics
+## Targets
 
-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)
+- Utility usage: 80%+ vs custom CSS
+- Quasar component usage: 90%+ vs raw HTML
 - Theme integration: 100% (no hardcoded colors)
-- Dark mode support: Automatic via theme system
-
----
-
-## Integration
+- Dark mode: automatic via theme system
 
-### Dependencies
-- Requires: `js-fp-vue` (Vue 3 FP patterns)
+## References
 
-### 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
-
----
+- **[references/utility-classes.md](references/utility-classes.md)** — Complete utility class reference
+- **[references/component-patterns.md](references/component-patterns.md)** — Component usage patterns
+- **[references/theme-integration.md](references/theme-integration.md)** — SCSS variables, dark mode
 
-**Framework Version**: Quasar v2 + Vue 3
-**Status**: Production-ready
+Requires: `js-fp-vue` | Framework: Quasar v2 + Vue 3
+Docs: https://quasar.dev | https://quasar.dev/style/spacing | https://quasar.dev/vue-components

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

@@ -7,7 +7,7 @@ description: "Team cheat sheet — scannable reference of the most common ima-cl
 
 ## 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.
+Display the entire cheat sheet below directly. Do not summarize, run tools, or perform memory bootstrap.
 
 ---
 
@@ -24,24 +24,20 @@ Memory bootstrap runs automatically at session start (Vestige search + intention
 
 ## 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 |
+| **1. Brainstorm** | Claude Web Project | Ideate, flush concept into 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.
+FP skills auto-activate by file type.
 
 | Context | Skill |
 |---------|-------|
@@ -67,7 +63,7 @@ Core rule: **Simple > Complex. No custom FP utilities. Native patterns.**
 | What | Command |
 |------|---------|
 | Project quality scorecard | `/ima-claude:scorecard` |
-| Full multi-agent review (Compound Engineering) | `/workflows:review` |
+| Full multi-agent review | `/workflows:review` |
 | Organize docs | `docs-organize` skill (Active/Archive/Transient tiers) |
 
 ---
@@ -78,8 +74,8 @@ Core rule: **Simple > Complex. No custom FP utilities. Native patterns.**
 |------|---------|
 | 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) |
+| Document solved problem | `/workflows:compound` |
+| Organize docs | `docs-organize` skill |
 
 ---
 
@@ -104,7 +100,7 @@ Core rule: **Simple > Complex. No custom FP utilities. Native patterns.**
 | 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..."
+Vestige stores automatically on "I prefer...", "Let's go with...", "From now on..."
 
 ---