@theproductguy/create-mission-control 1.0.17 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@theproductguy/create-mission-control",
-    "version": "1.0.17",
+    "version": "1.0.26",
     "description": "Scaffolding tool for Agent OS applications",
     "type": "module",
     "bin": {
@@ -41,4 +41,4 @@
         "typescript": "^5.3.3",
         "vite": "^5.0.10"
     }
-}
+}

package/src/template/agent-os/WORKFLOW.md

@@ -0,0 +1,139 @@
+# Agent OS: Master Workflow
+
+This guide maps the end-to-end lifecycle of building a product with Agent OS, from strategy to deployment. It integrates the **Impeccable Design System**, Specification, and Implementation workflows into a single cohesive path.
+
+---
+
+## 🗺️ The Lifecycle at a Glance
+
+1.  **STRATEGY** (`/plan-product`) - Define Mission, Roadmap, Tech Stack.
+2.  **DESIGN** (`/impeccable`) - Create Visuals, Shell, and Quality Gates.
+3.  **SPECIFICATION** (`/shape-spec`) - Define features in technical detail.
+4.  **IMPLEMENTATION** (`/implement-tasks`) - Write code, tests, and commit.
+5.  **SHIP** (`/optimize`) - Final audit, build, and deploy.
+
+---
+
+## 1️⃣ Phase 1: Strategy & Foundation
+*Goal: Define WHAT we are building and WHY.*
+
+1.  **Initialize Mission Control**:
+    ```bash
+    /plan-product
+    ```
+    - Follow the prompts to define **Mission**, **Roadmap**, and **Tech Stack**.
+    - **Crucial**: Ensure "Phase 0: Design System Integration" is in your roadmap.
+
+2.  **Establish Design Context** (One-time setup):
+    ```bash
+    /teach-impeccable
+    ```
+    - The agent interviews you to understand brand vibe, aesthetics, and principles.
+    - Saves context to `GEMINI.md` for all future sessions.
+
+---
+
+## 2️⃣ Phase 2: Impeccable Design
+*Goal: Create a distinctive, high-quality visual foundation.*
+
+1.  **Define Visuals**:
+    ```bash
+    /design-tokens
+    ```
+    - Generates colors, typography, and spacing in `design-system/`.
+    - **Guard**: Checks against "AI Slop" patterns automatically.
+
+2.  **Build App Shell**:
+    ```bash
+    /design-shell
+    ```
+    - Creates the main layout, navigation, and responsive structure.
+
+3.  **Quality Checkpoint**:
+    ```bash
+    /audit
+    ```
+    - Runs a comprehensive check on A11y, Theming, and Responsiveness.
+    - If issues found, use: `/normalize` (theming), `/harden` (edge cases).
+
+4.  **UX Polish**:
+    ```bash
+    /critique
+    ```
+    - Evaluates hierarchy and emotion.
+    - Adjust intensity: `/bolder` (if too safe) or `/quieter` (if too loud).
+
+---
+
+## 3️⃣ Phase 3: Specification
+*Goal: Plan HOW a specific feature will work.*
+
+1.  **Select Feature**: Pick the next item from `agent-os/product/roadmap.md`.
+2.  **Shape the Spec**:
+    ```bash
+    /shape-spec
+    ```
+    - define the interface, data model, and logic *before* coding.
+    - Result: `agent-os/specs/[feature-name]/spec.md`.
+
+3.  **Design Screens** (Optional but recommended):
+    ```bash
+    /design-screen
+    ```
+    - Create the UI components for this spec using the Design System.
+
+---
+
+## 4️⃣ Phase 4: Implementation
+*Goal: Write the code.*
+
+1.  **Scaffold Files**:
+    ```bash
+    /scaffold-implementation
+    ```
+    - Creates the file structure defined in the spec.
+
+2.  **Implement Tasks**:
+    ```bash
+    /implement-tasks
+    ```
+    - Iteratively writes code, runs tests, and fixes bugs.
+    - Works through `tasks.md` checklist until complete.
+
+---
+
+## 5️⃣ Phase 5: Quality & Ship
+*Goal: Production-ready code.*
+
+1.  **Final Audit**:
+    ```bash
+    /audit
+    ```
+    - Ensure no regressions in accessibility or performance.
+
+2.  **Optimization**:
+    ```bash
+    /optimize
+    ```
+    - Check bundle size, render performance, and asset loading.
+
+3.  **Final Polish**:
+    ```bash
+    /polish
+    /delight
+    ```
+    - Add micro-interactions and smooth rough edges.
+
+4.  **Build & Deploy**:
+    ```bash
+    npm run build
+    ```
+    - Verify production build succeeds.
+    - Deploy to your hosting provider (Vercel, Netlify, etc.).
+
+---
+
+## 📚 Reference workflows
+
+- **Design System Table**: Run `/impeccable` to see the full periodic table of design commands.
+- **Context7**: Use `/research-tech` to look up latest documentation.

package/src/template/agent-os/commands/adapt/adapt.md

@@ -0,0 +1,189 @@
+# COMMAND: Adapt
+**Description**: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
+
+
+Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
+
+## Assess Adaptation Challenge
+
+Understand what needs adaptation and why:
+
+1. **Identify the source context**:
+   - What was it designed for originally? (Desktop web? Mobile app?)
+   - What assumptions were made? (Large screen? Mouse input? Fast connection?)
+   - What works well in current context?
+
+2. **Understand target context**:
+   - **Device**: Mobile, tablet, desktop, TV, watch, print?
+   - **Input method**: Touch, mouse, keyboard, voice, gamepad?
+   - **Screen constraints**: Size, resolution, orientation?
+   - **Connection**: Fast wifi, slow 3G, offline?
+   - **Usage context**: On-the-go vs desk, quick glance vs focused reading?
+   - **User expectations**: What do users expect on this platform?
+
+3. **Identify adaptation challenges**:
+   - What won't fit? (Content, navigation, features)
+   - What won't work? (Hover states on touch, tiny touch targets)
+   - What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
+
+**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.
+
+## Plan Adaptation Strategy
+
+Create context-appropriate strategy:
+
+### Mobile Adaptation (Desktop → Mobile)
+
+**Layout Strategy**:
+- Single column instead of multi-column
+- Vertical stacking instead of side-by-side
+- Full-width components instead of fixed widths
+- Bottom navigation instead of top/side navigation
+
+**Interaction Strategy**:
+- Touch targets 44x44px minimum (not hover-dependent)
+- Swipe gestures where appropriate (lists, carousels)
+- Bottom sheets instead of dropdowns
+- Thumbs-first design (controls within thumb reach)
+- Larger tap areas with more spacing
+
+**Content Strategy**:
+- Progressive disclosure (don't show everything at once)
+- Prioritize primary content (secondary content in tabs/accordions)
+- Shorter text (more concise)
+- Larger text (16px minimum)
+
+**Navigation Strategy**:
+- Hamburger menu or bottom navigation
+- Reduce navigation complexity
+- Sticky headers for context
+- Back button in navigation flow
+
+### Tablet Adaptation (Hybrid Approach)
+
+**Layout Strategy**:
+- Two-column layouts (not single or three-column)
+- Side panels for secondary content
+- Master-detail views (list + detail)
+- Adaptive based on orientation (portrait vs landscape)
+
+**Interaction Strategy**:
+- Support both touch and pointer
+- Touch targets 44x44px but allow denser layouts than phone
+- Side navigation drawers
+- Multi-column forms where appropriate
+
+### Desktop Adaptation (Mobile → Desktop)
+
+**Layout Strategy**:
+- Multi-column layouts (use horizontal space)
+- Side navigation always visible
+- Multiple information panels simultaneously
+- Fixed widths with max-width constraints (don't stretch to 4K)
+
+**Interaction Strategy**:
+- Hover states for additional information
+- Keyboard shortcuts
+- Right-click context menus
+- Drag and drop where helpful
+- Multi-select with Shift/Cmd
+
+**Content Strategy**:
+- Show more information upfront (less progressive disclosure)
+- Data tables with many columns
+- Richer visualizations
+- More detailed descriptions
+
+### Print Adaptation (Screen → Print)
+
+**Layout Strategy**:
+- Page breaks at logical points
+- Remove navigation, footer, interactive elements
+- Black and white (or limited color)
+- Proper margins for binding
+
+**Content Strategy**:
+- Expand shortened content (show full URLs, hidden sections)
+- Add page numbers, headers, footers
+- Include metadata (print date, page title)
+- Convert charts to print-friendly versions
+
+### Email Adaptation (Web → Email)
+
+**Layout Strategy**:
+- Narrow width (600px max)
+- Single column only
+- Inline CSS (no external stylesheets)
+- Table-based layouts (for email client compatibility)
+
+**Interaction Strategy**:
+- Large, obvious CTAs (buttons not text links)
+- No hover states (not reliable)
+- Deep links to web app for complex interactions
+
+## Implement Adaptations
+
+Apply changes systematically:
+
+### Responsive Breakpoints
+
+Choose appropriate breakpoints:
+- Mobile: 320px-767px
+- Tablet: 768px-1023px
+- Desktop: 1024px+
+- Or content-driven breakpoints (where design breaks)
+
+### Layout Adaptation Techniques
+
+- **CSS Grid/Flexbox**: Reflow layouts automatically
+- **Container Queries**: Adapt based on container, not viewport
+- **`clamp()`**: Fluid sizing between min and max
+- **Media queries**: Different styles for different contexts
+- **Display properties**: Show/hide elements per context
+
+### Touch Adaptation
+
+- Increase touch target sizes (44x44px minimum)
+- Add more spacing between interactive elements
+- Remove hover-dependent interactions
+- Add touch feedback (ripples, highlights)
+- Consider thumb zones (easier to reach bottom than top)
+
+### Content Adaptation
+
+- Use `display: none` sparingly (still downloads)
+- Progressive enhancement (core content first, enhancements on larger screens)
+- Lazy loading for off-screen content
+- Responsive images (`srcset`, `picture` element)
+
+### Navigation Adaptation
+
+- Transform complex nav to hamburger/drawer on mobile
+- Bottom nav bar for mobile apps
+- Persistent side navigation on desktop
+- Breadcrumbs on smaller screens for context
+
+**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
+
+**NEVER**:
+- Hide core functionality on mobile (if it matters, make it work)
+- Assume desktop = powerful device (consider accessibility, older machines)
+- Use different information architecture across contexts (confusing)
+- Break user expectations for platform (mobile users expect mobile patterns)
+- Forget landscape orientation on mobile/tablet
+- Use generic breakpoints blindly (use content-driven breakpoints)
+- Ignore touch on desktop (many desktop devices have touch)
+
+## Verify Adaptations
+
+Test thoroughly across contexts:
+
+- **Real devices**: Test on actual phones, tablets, desktops
+- **Different orientations**: Portrait and landscape
+- **Different browsers**: Safari, Chrome, Firefox, Edge
+- **Different OS**: iOS, Android, Windows, macOS
+- **Different input methods**: Touch, mouse, keyboard
+- **Edge cases**: Very small screens (320px), very large screens (4K)
+- **Slow connections**: Test on throttled network
+
+Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.

package/src/template/agent-os/commands/animate/animate.md

@@ -0,0 +1,184 @@
+# COMMAND: Animate
+**Description**: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
+
+
+Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
+
+## MANDATORY PREPARATION
+
+### 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 (playful vs serious, energetic vs calm), and performance constraints.
+
+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 ask the user directly to clarify what you cannot infer. whether you got it right.
+2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST ask the user directly to clarify what you cannot infer. clarifying questions first to complete your context.
+
+Do NOT proceed until you have answers. Guessing leads to inappropriate or excessive animation.
+
+### Use frontend-design skill
+
+Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
+
+---
+
+## Assess Animation Opportunities
+
+Analyze where motion would improve the experience:
+
+1. **Identify static areas**:
+   - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.)
+   - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes)
+   - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious
+   - **Lack of delight**: Functional but joyless interactions
+   - **Missed guidance**: Opportunities to direct attention or explain behavior
+
+2. **Understand the context**:
+   - What's the personality? (Playful vs serious, energetic vs calm)
+   - What's the performance budget? (Mobile-first? Complex page?)
+   - Who's the audience? (Motion-sensitive users? Power users who want speed?)
+   - What matters most? (One hero animation vs many micro-interactions?)
+
+If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
+
+**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.
+
+## Plan Animation Strategy
+
+Create a purposeful animation plan:
+
+- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
+- **Feedback layer**: Which interactions need acknowledgment?
+- **Transition layer**: Which state changes need smoothing?
+- **Delight layer**: Where can we surprise and delight?
+
+**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
+
+## Implement Animations
+
+Add motion systematically across these categories:
+
+### Entrance Animations
+- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations
+- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
+- **Content reveals**: Scroll-triggered animations using intersection observer
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+
+### Micro-interactions
+- **Button feedback**:
+  - Hover: Subtle scale (1.02-1.05), color shift, shadow increase
+  - Click: Quick scale down then up (0.95 → 1), ripple effect
+  - Loading: Spinner or pulse state
+- **Form interactions**:
+  - Input focus: Border color transition, slight scale or glow
+  - Validation: Shake on error, check mark on success, smooth color transitions
+- **Toggle switches**: Smooth slide + color transition (200-300ms)
+- **Checkboxes/radio**: Check mark animation, ripple effect
+- **Like/favorite**: Scale + rotation, particle effects, color transition
+
+### State Transitions
+- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
+- **Expand/collapse**: Height transition with overflow handling, icon rotation
+- **Loading states**: Skeleton screen fades, spinner animations, progress bars
+- **Success/error**: Color transitions, icon animations, gentle scale pulse
+- **Enable/disable**: Opacity transitions, cursor changes
+
+### Navigation & Flow
+- **Page transitions**: Crossfade between routes, shared element transitions
+- **Tab switching**: Slide indicator, content fade/slide
+- **Carousel/slider**: Smooth transforms, snap points, momentum
+- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators
+
+### Feedback & Guidance
+- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights
+- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning
+- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation
+- **Focus flow**: Highlight path through form or workflow
+
+### Delight Moments
+- **Empty states**: Subtle floating animations on illustrations
+- **Completed actions**: Confetti, check mark flourish, success celebrations
+- **Easter eggs**: Hidden interactions for discovery
+- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches
+
+## Technical Implementation
+
+Use appropriate techniques for each animation:
+
+### Timing & Easing
+
+**Durations by purpose:**
+- **100-150ms**: Instant feedback (button press, toggle)
+- **200-300ms**: State changes (hover, menu open)
+- **300-500ms**: Layout changes (accordion, modal)
+- **500-800ms**: Entrance animations (page load)
+
+**Easing curves (use these, not CSS defaults):**
+```css
+/* Recommended - natural deceleration */
+--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */
+--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */
+--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */
+
+/* AVOID - feel dated and tacky */
+/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
+/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
+```
+
+**Exit animations are faster than entrances.** Use ~75% of enter duration.
+
+### CSS Animations
+```css
+/* Prefer for simple, declarative animations */
+- transitions for state changes
+- @keyframes for complex sequences
+- transform + opacity only (GPU-accelerated)
+```
+
+### JavaScript Animation
+```javascript
+/* Use for complex, interactive animations */
+- Web Animations API for programmatic control
+- Framer Motion for React
+- GSAP for complex sequences
+```
+
+### Performance
+- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties
+- **will-change**: Add sparingly for known expensive animations
+- **Reduce paint**: Minimize repaints, use `contain` where appropriate
+- **Monitor FPS**: Ensure 60fps on target devices
+
+### Accessibility
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+**NEVER**:
+- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
+- Animate layout properties (width, height, top, left)—use transform instead
+- Use durations over 500ms for feedback—it feels laggy
+- Animate without purpose—every animation needs a reason
+- Ignore `prefers-reduced-motion`—this is an accessibility violation
+- Animate everything—animation fatigue makes interfaces feel exhausting
+- Block interaction during animations unless intentional
+
+## Verify Quality
+
+Test animations thoroughly:
+
+- **Smooth at 60fps**: No jank on target devices
+- **Feels natural**: Easing curves feel organic, not robotic
+- **Appropriate timing**: Not too fast (jarring) or too slow (laggy)
+- **Reduced motion works**: Animations disabled or simplified appropriately
+- **Doesn't block**: Users can interact during/after animations
+- **Adds value**: Makes interface clearer or more delightful
+
+Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.

package/src/template/agent-os/commands/audit/audit.md

@@ -0,0 +1,123 @@
+# COMMAND: Audit
+**Description**: Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.
+
+
+Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address.
+
+**First**: Use the frontend-design skill for design principles and anti-patterns.
+
+## Diagnostic Scan
+
+Run comprehensive checks across multiple dimensions:
+
+1. **Accessibility (A11y)** - Check for:
+   - **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
+   - **Missing ARIA**: Interactive elements without proper roles, labels, or states
+   - **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps
+   - **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons
+   - **Alt text**: Missing or poor image descriptions
+   - **Form issues**: Inputs without labels, poor error messaging, missing required indicators
+
+2. **Performance** - Check for:
+   - **Layout thrashing**: Reading/writing layout properties in loops
+   - **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity
+   - **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change
+   - **Bundle size**: Unnecessary imports, unused dependencies
+   - **Render performance**: Unnecessary re-renders, missing memoization
+
+3. **Theming** - Check for:
+   - **Hard-coded colors**: Colors not using design tokens
+   - **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme
+   - **Inconsistent tokens**: Using wrong tokens, mixing token types
+   - **Theme switching issues**: Values that don't update on theme change
+
+4. **Responsive Design** - Check for:
+   - **Fixed widths**: Hard-coded widths that break on mobile
+   - **Touch targets**: Interactive elements < 44x44px
+   - **Horizontal scroll**: Content overflow on narrow viewports
+   - **Text scaling**: Layouts that break when text size increases
+   - **Missing breakpoints**: No mobile/tablet variants
+
+5. **Anti-Patterns (CRITICAL)** - Check against ALL the **DON'T** guidelines in the frontend-design skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy).
+
+**CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
+
+## Generate Comprehensive Report
+
+Create a detailed audit report and **save it to `design-system/QA/audit-report.md`**.
+Ensure the directory `design-system/QA` exists (create it if not).
+
+The report must follow this structure:
+
+### Anti-Patterns Verdict
+**Start here.** Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.
+
+### Executive Summary
+- Total issues found (count by severity)
+- Most critical issues (top 3-5)
+- Overall quality score (if applicable)
+- Recommended next steps
+
+### Detailed Findings by Severity
+
+For each issue, document:
+- **Location**: Where the issue occurs (component, file, line)
+- **Severity**: Critical / High / Medium / Low
+- **Category**: Accessibility / Performance / Theming / Responsive
+- **Description**: What the issue is
+- **Impact**: How it affects users
+- **WCAG/Standard**: Which standard it violates (if applicable)
+- **Recommendation**: How to fix it
+- **Suggested command**: Which command to use (e.g., `/normalize`, `/optimize`, `/harden`)
+
+#### Critical Issues
+[Issues that block core functionality or violate WCAG A]
+
+#### High-Severity Issues  
+[Significant usability/accessibility impact, WCAG AA violations]
+
+#### Medium-Severity Issues
+[Quality issues, WCAG AAA violations, performance concerns]
+
+#### Low-Severity Issues
+[Minor inconsistencies, optimization opportunities]
+
+### Patterns & Systemic Issues
+
+Identify recurring problems:
+- "Hard-coded colors appear in 15+ components, should use design tokens"
+- "Touch targets consistently too small (<44px) throughout mobile experience"
+- "Missing focus indicators on all custom interactive components"
+
+### Positive Findings
+
+Note what's working well:
+- Good practices to maintain
+- Exemplary implementations to replicate elsewhere
+
+### Recommendations by Priority
+
+Create actionable plan:
+1. **Immediate**: Critical blockers to fix first
+2. **Short-term**: High-severity issues (this sprint)
+3. **Medium-term**: Quality improvements (next sprint)
+4. **Long-term**: Nice-to-haves and optimizations
+
+### Suggested Commands for Fixes
+
+Map issues to appropriate commands:
+- "Use `/normalize` to align components with design system (addresses 23 theming issues)"
+- "Use `/optimize` to improve performance (addresses 12 performance issues)"
+- "Use `/harden` to improve i18n and text handling (addresses 8 edge cases)"
+
+**IMPORTANT**: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.
+
+**NEVER**:
+- Report issues without explaining impact (why does this matter?)
+- Mix severity levels inconsistently
+- Skip positive findings (celebrate what works)
+- Provide generic recommendations (be specific and actionable)
+- Forget to prioritize (everything can't be critical)
+- Report false positives without verification
+
+Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.