qualia-framework 2.6.0 → 3.1.0

package/framework/skills/clarify/SKILL.md

@@ -1,179 +0,0 @@
----
-name: clarify
-description: Improve unclear UX copy, error messages, microcopy, labels, and instructions. Makes interfaces easier to understand and use.
-user-invokable: true
-args:
-  - name: target
-    description: The feature or component with unclear copy (optional)
-    required: false
----
-
-Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
-
-## Assess Current Copy
-
-Identify what makes the text unclear or ineffective:
-
-1. **Find clarity problems**:
-   - **Jargon**: Technical terms users won't understand
-   - **Ambiguity**: Multiple interpretations possible
-   - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file"
-   - **Length**: Too wordy or too terse
-   - **Assumptions**: Assuming user knowledge they don't have
-   - **Missing context**: Users don't know what to do or why
-   - **Tone mismatch**: Too formal, too casual, or inappropriate for situation
-
-2. **Understand the context**:
-   - Who's the audience? (Technical? General? First-time users?)
-   - What's the user's mental state? (Stressed during error? Confident during success?)
-   - What's the action? (What do we want users to do?)
-   - What's the constraint? (Character limits? Space limitations?)
-
-**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets.
-
-## Plan Copy Improvements
-
-Create a strategy for clearer communication:
-
-- **Primary message**: What's the ONE thing users need to know?
-- **Action needed**: What should users do next (if anything)?
-- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?)
-- **Constraints**: Length limits, brand voice, localization considerations
-
-**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words.
-
-## Improve Copy Systematically
-
-Refine text across these common areas:
-
-### Error Messages
-**Bad**: "Error 403: Forbidden"
-**Good**: "You don't have permission to view this page. Contact your admin for access."
-
-**Bad**: "Invalid input"
-**Good**: "Email addresses need an @ symbol. Try: name@example.com"
-
-**Principles**:
-- Explain what went wrong in plain language
-- Suggest how to fix it
-- Don't blame the user
-- Include examples when helpful
-- Link to help/support if applicable
-
-### Form Labels & Instructions
-**Bad**: "DOB (MM/DD/YYYY)"
-**Good**: "Date of birth" (with placeholder showing format)
-
-**Bad**: "Enter value here"
-**Good**: "Your email address" or "Company name"
-
-**Principles**:
-- Use clear, specific labels (not generic placeholders)
-- Show format expectations with examples
-- Explain why you're asking (when not obvious)
-- Put instructions before the field, not after
-- Keep required field indicators clear
-
-### Button & CTA Text
-**Bad**: "Click here" | "Submit" | "OK"
-**Good**: "Create account" | "Save changes" | "Got it, thanks"
-
-**Principles**:
-- Describe the action specifically
-- Use active voice (verb + noun)
-- Match user's mental model
-- Be specific ("Save" is better than "OK")
-
-### Help Text & Tooltips
-**Bad**: "This is the username field"
-**Good**: "Choose a username. You can change this later in Settings."
-
-**Principles**:
-- Add value (don't just repeat the label)
-- Answer the implicit question ("What is this?" or "Why do you need this?")
-- Keep it brief but complete
-- Link to detailed docs if needed
-
-### Empty States
-**Bad**: "No items"
-**Good**: "No projects yet. Create your first project to get started."
-
-**Principles**:
-- Explain why it's empty (if not obvious)
-- Show next action clearly
-- Make it welcoming, not dead-end
-
-### Success Messages
-**Bad**: "Success"
-**Good**: "Settings saved! Your changes will take effect immediately."
-
-**Principles**:
-- Confirm what happened
-- Explain what happens next (if relevant)
-- Be brief but complete
-- Match the user's emotional moment (celebrate big wins)
-
-### Loading States
-**Bad**: "Loading..." (for 30+ seconds)
-**Good**: "Analyzing your data... this usually takes 30-60 seconds"
-
-**Principles**:
-- Set expectations (how long?)
-- Explain what's happening (when it's not obvious)
-- Show progress when possible
-- Offer escape hatch if appropriate ("Cancel")
-
-### Confirmation Dialogs
-**Bad**: "Are you sure?"
-**Good**: "Delete 'Project Alpha'? This can't be undone."
-
-**Principles**:
-- State the specific action
-- Explain consequences (especially for destructive actions)
-- Use clear button labels ("Delete project" not "Yes")
-- Don't overuse confirmations (only for risky actions)
-
-### Navigation & Wayfinding
-**Bad**: Generic labels like "Items" | "Things" | "Stuff"
-**Good**: Specific labels like "Your projects" | "Team members" | "Settings"
-
-**Principles**:
-- Be specific and descriptive
-- Use language users understand (not internal jargon)
-- Make hierarchy clear
-- Consider information scent (breadcrumbs, current location)
-
-## Apply Clarity Principles
-
-Every piece of copy should follow these rules:
-
-1. **Be specific**: "Enter email" not "Enter value"
-2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity)
-3. **Be active**: "Save changes" not "Changes will be saved"
-4. **Be human**: "Oops, something went wrong" not "System error encountered"
-5. **Be helpful**: Tell users what to do, not just what happened
-6. **Be consistent**: Use same terms throughout (don't vary for variety)
-
-**NEVER**:
-- Use jargon without explanation
-- Blame users ("You made an error" → "This field is required")
-- Be vague ("Something went wrong" without explanation)
-- Use passive voice unnecessarily
-- Write overly long explanations (be concise)
-- Use humor for errors (be empathetic instead)
-- Assume technical knowledge
-- Vary terminology (pick one term and stick with it)
-- Repeat information (headers restating intros, redundant explanations)
-- Use placeholders as the only labels (they disappear when users type)
-
-## Verify Improvements
-
-Test that copy improvements work:
-
-- **Comprehension**: Can users understand without context?
-- **Actionability**: Do users know what to do next?
-- **Brevity**: Is it as short as possible while remaining clear?
-- **Consistency**: Does it match terminology elsewhere?
-- **Tone**: Is it appropriate for the situation?
-
-Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human.

package/framework/skills/client-handoff/SKILL.md

@@ -1,135 +0,0 @@
----
-name: client-handoff
-description: "Generate client-facing project deliverables — handoff document, feature summary, credentials guide, known limitations, and maintenance notes. Use this skill whenever the user says 'handoff', 'client handoff', 'wrap up for client', 'project handoff', 'deliver to client', 'client delivery', 'hand over', or wants to prepare a project for client delivery. Also trigger after milestone completion when next step is client-facing."
-tags: [client, handoff, delivery, documentation]
----
-
-# Client Handoff — Project Delivery Document Generator
-
-Generate a polished, client-facing HANDOFF.md when a project is ready for delivery. Output is written for non-technical clients.
-
-## Usage
-
-`/client-handoff` — Generate handoff document for the current project
-
-## Process
-
-### Step 1: Load Project Context
-
-Read the following files to build a full picture of what was built and for whom:
-
-- `.planning/PROJECT.md` — project name, client, deploy target
-- `.planning/ROADMAP.md` — what was built (phases)
-- `.planning/REQUIREMENTS.md` — what was requested
-- `.planning/STATE.md` — milestone status
-- Phase `SUMMARY.md` files — what was actually delivered per phase
-- `CHANGELOG.md` — if exists
-- `package.json` — for project name/URLs
-
-Also detect:
-- **Production URL** from Vercel project settings or PROJECT.md
-- **Supabase project ref** (if applicable) — check `.env.local` variable names or PROJECT.md
-- **Auth method** used (email/password, magic link, OAuth, etc.)
-
-If any critical file is missing, note it and proceed with what's available. Do NOT block on missing files.
-
-### Step 2: Generate HANDOFF.md at Project Root
-
-Write the document using this exact structure. All copy must be **plain language** — no jargon, no technical implementation details. Written for someone who has never seen the codebase.
-
-```markdown
-# {Project Name} — Client Handoff
-
-## Live URL
-{production URL}
-
-## What We Built
-{Plain-language summary of features, NOT technical. Written for the client.}
-- Feature 1: {what it does for the user}
-- Feature 2: {what it does for the user}
-...
-
-## How to Use
-{Brief walkthrough of the main user flows — written for someone who's never seen the app}
-
-### For admins (if applicable)
-- How to access the admin panel
-- Key admin actions
-
-## Access & Credentials
-| Service | URL | How to Access |
-|---------|-----|---------------|
-| Website | {url} | Public |
-| Admin Panel | {url}/admin | Login with your email |
-| Supabase Dashboard | https://supabase.com/dashboard/project/{ref} | Fawzi manages access |
-| Vercel Dashboard | vercel.com | Fawzi manages access |
-| Domain/DNS | {registrar} | Client manages |
-
-> **Note:** API keys and database credentials are managed by Qualia Solutions. Contact us if you need access changes.
-
-## Known Limitations
-{Anything that doesn't work yet, scope that was deferred, or edge cases the client should know about}
-
-## Maintenance & Support
-- **Hosting:** Vercel (auto-deploys from GitHub)
-- **Database:** Supabase (managed Postgres)
-- **Monitoring:** UptimeRobot — {monitoring URL if set up}
-- **Updates:** Contact Qualia Solutions for feature requests or bug fixes
-- **Domain renewal:** {who manages it, when it expires if known}
-
-## Technical Reference (for developers)
-- **Stack:** {e.g. Next.js + React + TypeScript + Supabase + Tailwind}
-- **Repo:** {GitHub URL}
-- **Branch:** main
-- **Deploy:** Push to main auto-deploys to Vercel
-```
-
-Adapt the template to the project:
-- Remove sections that don't apply (e.g. no admin panel = skip that subsection)
-- Add sections if needed (e.g. mobile app = add app store links)
-- Adjust the tech stack line to match what was actually used
-- If no Supabase, remove that row from the credentials table
-
-### Step 3: Confirm with User
-
-Display the full generated document and ask:
-
-> "Here's the client handoff document. Review it and let me know if anything needs adjusting before I save it."
-
-Do NOT write the file until the user confirms. Wait for approval or edits.
-
-### Step 4: Save & Commit
-
-After user approval, write `HANDOFF.md` to the project root and commit:
-
-```bash
-git add HANDOFF.md
-git commit -m "docs: add client handoff document"
-```
-
-### Step 5: Collect Framework Metrics
-
-Auto-collect performance metrics for this project (feeds the `/qualia-evolve` optimization loop):
-
-```bash
-bash ~/.claude/qualia-framework/bin/collect-metrics.sh "$(pwd)"
-```
-
-This is silent — no user interaction needed.
-
-### Step 6: Route Next Steps
-
-After saving, present options:
-
-> "Handoff document saved. Framework metrics collected. Next steps:"
-> - "Share `HANDOFF.md` content with the client (email, PDF, or portal)"
-> - "Run `/qualia-production-check` to verify everything works before handoff"
-> - "Run `/qualia-evolve` to analyze this project and improve the framework for next time"
-
-## Guidelines
-
-- **Tone:** Professional but warm. The client is not a developer.
-- **No secrets:** Never include API keys, service role keys, or database passwords in the document.
-- **No jargon:** Avoid terms like "RLS", "middleware", "SSR", "edge functions" in client-facing sections. The Technical Reference section at the bottom is the only place for developer terminology.
-- **Honest about limitations:** If something was descoped or has known issues, say so clearly. Clients respect transparency.
-- **Keep it short:** The document should be scannable in 2 minutes. If a section needs more detail, link to separate docs rather than bloating the handoff.

package/framework/skills/collab-onboard/SKILL.md

@@ -1,111 +0,0 @@
----
-name: collab-onboard
-description: "Project-specific onboarding for new collaborators — reads .planning/ and codebase to generate orientation: what's built, patterns used, how to contribute, current state. Use this skill whenever the user says 'onboard me', 'new to this project', 'what's been built', 'orient me', 'project overview', 'get me up to speed', 'collab-onboard', or is clearly a new developer joining an existing project. Also trigger when someone asks 'how does this project work' or 'what should I know about this codebase'."
-tags: [onboarding, project, orientation, developer]
----
-
-## Process
-
-### Step 1: Gather Project Context
-
-Read all of these (skip if missing):
-```bash
-cat .planning/PROJECT.md 2>/dev/null || echo "NO_PROJECT"
-cat .planning/ROADMAP.md 2>/dev/null || echo "NO_ROADMAP"
-cat .planning/STATE.md 2>/dev/null || echo "NO_STATE"
-cat .planning/DESIGN.md 2>/dev/null || echo "NO_DESIGN"
-```
-
-```bash
-# Project structure
-ls -d app/ src/ pages/ components/ lib/ actions/ hooks/ supabase/ types/ public/ 2>/dev/null
-```
-
-```bash
-# Package info
-node -e "try{const p=require('./package.json');console.log(JSON.stringify({name:p.name,deps:Object.keys(p.dependencies||{}),scripts:Object.keys(p.scripts||{})},null,2))}catch(e){console.log('{}')}" 2>/dev/null
-```
-
-```bash
-# Git history summary
-git log --oneline -20 2>/dev/null
-git shortlog -s -n --all 2>/dev/null | head -5
-```
-
-```bash
-# Check for local CLAUDE.md
-cat CLAUDE.md 2>/dev/null || echo "NO_LOCAL_CLAUDE"
-```
-
-### Step 2: Analyze Codebase
-
-Understand:
-- What framework/stack is used
-- Key directories and their purpose
-- Database tables (from supabase/migrations/ or types/)
-- API routes or server actions
-- Auth pattern used
-- Key environment variables needed
-
-### Step 3: Present Orientation
-
-Output a structured orientation (NOT saved to file — just presented):
-
-```
-◆ PROJECT ORIENTATION
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  Project    {name}
-  Stack      Next.js + Supabase + Vercel
-  Status     Phase {N}/{total} — {phase name}
-
-── WHAT THIS PROJECT DOES ─────────────────
-  {2-3 sentence plain-language summary}
-
-── WHAT'S BEEN BUILT ──────────────────────
-  ✓ Phase 1: {name} — {1-line summary}
-  ✓ Phase 2: {name} — {1-line summary}
-  ◆ Phase 3: {name} — in progress
-  · Phase 4: {name} — not started
-
-── KEY DIRECTORIES ────────────────────────
-  app/          Pages and routes
-  components/   UI components
-  lib/          Utilities, Supabase clients
-  actions/      Server actions (mutations)
-  supabase/     Migrations and edge functions
-
-── PATTERNS TO FOLLOW ─────────────────────
-  - Server Components by default, 'use client' only for interactivity
-  - Server Actions for all mutations (check auth first)
-  - Supabase server client from lib/supabase/server.ts
-  - RLS on every table — no exceptions
-  - {any project-specific patterns from CLAUDE.md}
-
-── GETTING STARTED ────────────────────────
-  1. npm install
-  2. Copy .env.example to .env.local and fill in values
-  3. supabase start (for local dev) OR use linked project
-  4. npm run dev
-  5. Read .planning/ROADMAP.md for full project plan
-
-── CURRENT WORK ───────────────────────────
-  → Phase {N}: {name}
-  → Status: {planned/executing/verifying}
-  → Next command: /qualia-{action} {N}
-
-── WHO TO ASK ─────────────────────────────
-  Architecture decisions → Fawzi
-  Framework questions → /qualia-help
-  Stuck on anything → /qualia-idk
-```
-
-### Step 4: Offer Deep Dive
-
-> "Want me to explain any specific part in more detail? Options:"
-> - "Walk me through the database schema"
-> - "Explain the auth flow"
-> - "Show me the API/action patterns"
-> - "What's the current phase about?"
-
-Keep it practical. This is for a developer who needs to start contributing today, not a documentation exercise.

package/framework/skills/colorize/SKILL.md

@@ -1,170 +0,0 @@
----
-name: colorize
-description: Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.
-user-invokable: true
-args:
-  - name: target
-    description: The feature or component to colorize (optional)
-    required: false
----
-
-Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
-
-## MANDATORY PREPARATION
-
-### Read DESIGN.md (Authoritative Source)
-
-Before any context gathering, check for the project's design decisions file:
-
-```bash
-cat .planning/DESIGN.md 2>/dev/null
-```
-
-**If DESIGN.md exists:** This is the authoritative source for all design decisions in this project. Use its palette, typography, spacing, component, and motion decisions as your foundation. Do NOT override these decisions unless the user explicitly asks. Reference specific DESIGN.md decisions in your output (e.g., "Per DESIGN.md, the primary color is...").
-
-**If DESIGN.md does not exist:** Proceed with normal context gathering below. Consider suggesting the user run `/qualia-discuss-phase` to establish design decisions.
-
-### Context Gathering (Do This First)
-
-You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and especially existing brand colors.
-
-Attempt to gather these from the current thread or codebase.
-
-1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and ask the user directly to clarify. whether you got it right.
-2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and ask the user directly to clarify. clarifying questions first to complete your context.
-
-Do NOT proceed until you have answers. Guessing leads to generic AI slop colors.
-
-### Use frontend-master skill
-
-Use the frontend-master skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
-
----
-
-## Assess Color Opportunity
-
-Analyze the current state and identify opportunities:
-
-1. **Understand current state**:
-   - **Color absence**: Pure grayscale? Limited neutrals? One timid accent?
-   - **Missed opportunities**: Where could color add meaning, hierarchy, or delight?
-   - **Context**: What's appropriate for this domain and audience?
-   - **Brand**: Are there existing brand colors we should use?
-
-2. **Identify where color adds value**:
-   - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue)
-   - **Hierarchy**: Drawing attention to important elements
-   - **Categorization**: Different sections, types, or states
-   - **Emotional tone**: Warmth, energy, trust, creativity
-   - **Wayfinding**: Helping users navigate and understand structure
-   - **Delight**: Moments of visual interest and personality
-
-If any of these are unclear from the codebase, STOP and ask the user directly to clarify.
-
-**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
-
-## Plan Color Strategy
-
-Create a purposeful color introduction plan:
-
-- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
-- **Dominant color**: Which color owns 60% of colored elements?
-- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%)
-- **Application strategy**: Where does each color appear and why?
-
-**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
-
-## Introduce Color Strategically
-
-Add color systematically across these dimensions:
-
-### Semantic Color
-- **State indicators**:
-  - Success: Green tones (emerald, forest, mint)
-  - Error: Red/pink tones (rose, crimson, coral)
-  - Warning: Orange/amber tones
-  - Info: Blue tones (sky, ocean, indigo)
-  - Neutral: Gray/slate for inactive states
-
-- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.)
-- **Progress indicators**: Colored bars, rings, or charts showing completion or health
-
-### Accent Color Application
-- **Primary actions**: Color the most important buttons/CTAs
-- **Links**: Add color to clickable text (maintain accessibility)
-- **Icons**: Colorize key icons for recognition and personality
-- **Headers/titles**: Add color to section headers or key labels
-- **Hover states**: Introduce color on interaction
-
-### Background & Surfaces
-- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`)
-- **Colored sections**: Use subtle background colors to separate areas
-- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue)
-- **Cards & surfaces**: Tint cards or surfaces slightly for warmth
-
-**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales.
-
-### Data Visualization
-- **Charts & graphs**: Use color to encode categories or values
-- **Heatmaps**: Color intensity shows density or importance
-- **Comparison**: Color coding for different datasets or timeframes
-
-### Borders & Accents
-- **Accent borders**: Add colored left/top borders to cards or sections
-- **Underlines**: Color underlines for emphasis or active states
-- **Dividers**: Subtle colored dividers instead of gray lines
-- **Focus rings**: Colored focus indicators matching brand
-
-### Typography Color
-- **Colored headings**: Use brand colors for section headings (maintain contrast)
-- **Highlight text**: Color for emphasis or categories
-- **Labels & tags**: Small colored labels for metadata or categories
-
-### Decorative Elements
-- **Illustrations**: Add colored illustrations or icons
-- **Shapes**: Geometric shapes in brand colors as background elements
-- **Gradients**: Colorful gradient overlays or mesh backgrounds
-- **Blobs/organic shapes**: Soft colored shapes for visual interest
-
-## Balance & Refinement
-
-Ensure color addition improves rather than overwhelms:
-
-### Maintain Hierarchy
-- **Dominant color** (60%): Primary brand color or most used accent
-- **Secondary color** (30%): Supporting color for variety
-- **Accent color** (10%): High contrast for key moments
-- **Neutrals** (remaining): Gray/black/white for structure
-
-### Accessibility
-- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
-- **Don't rely on color alone**: Use icons, labels, or patterns alongside color
-- **Test for color blindness**: Verify red/green combinations work for all users
-
-### Cohesion
-- **Consistent palette**: Use colors from defined palette, not arbitrary choices
-- **Systematic application**: Same color meanings throughout (green always = success)
-- **Temperature consistency**: Warm palette stays warm, cool stays cool
-
-**NEVER**:
-- Use every color in the rainbow (choose 2-4 colors beyond neutrals)
-- Apply color randomly without semantic meaning
-- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
-- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
-- Use pure black (`#000`) or pure white (`#fff`) for large areas
-- Violate WCAG contrast requirements
-- Use color as the only indicator (accessibility issue)
-- Make everything colorful (defeats the purpose)
-- Default to purple-blue gradients (AI slop aesthetic)
-
-## Verify Color Addition
-
-Test that colorization improves the experience:
-
-- **Better hierarchy**: Does color guide attention appropriately?
-- **Clearer meaning**: Does color help users understand states/categories?
-- **More engaging**: Does the interface feel warmer and more inviting?
-- **Still accessible**: Do all color combinations meet WCAG standards?
-- **Not overwhelming**: Is color balanced and purposeful?
-
-Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional.