@theproductguy/create-mission-control 1.0.17 → 1.0.26

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

@@ -0,0 +1,351 @@
+# COMMAND: Harden
+**Description**: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.
+
+
+Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs.
+
+## Assess Hardening Needs
+
+Identify weaknesses and edge cases:
+
+1. **Test with extreme inputs**:
+   - Very long text (names, descriptions, titles)
+   - Very short text (empty, single character)
+   - Special characters (emoji, RTL text, accents)
+   - Large numbers (millions, billions)
+   - Many items (1000+ list items, 50+ options)
+   - No data (empty states)
+
+2. **Test error scenarios**:
+   - Network failures (offline, slow, timeout)
+   - API errors (400, 401, 403, 404, 500)
+   - Validation errors
+   - Permission errors
+   - Rate limiting
+   - Concurrent operations
+
+3. **Test internationalization**:
+   - Long translations (German is often 30% longer than English)
+   - RTL languages (Arabic, Hebrew)
+   - Character sets (Chinese, Japanese, Korean, emoji)
+   - Date/time formats
+   - Number formats (1,000 vs 1.000)
+   - Currency symbols
+
+**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality.
+
+## Hardening Dimensions
+
+Systematically improve resilience:
+
+### Text Overflow & Wrapping
+
+**Long text handling**:
+```css
+/* Single line with ellipsis */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Multi-line with clamp */
+.line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Allow wrapping */
+.wrap {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+```
+
+**Flex/Grid overflow**:
+```css
+/* Prevent flex items from overflowing */
+.flex-item {
+  min-width: 0; /* Allow shrinking below content size */
+  overflow: hidden;
+}
+
+/* Prevent grid items from overflowing */
+.grid-item {
+  min-width: 0;
+  min-height: 0;
+}
+```
+
+**Responsive text sizing**:
+- Use `clamp()` for fluid typography
+- Set minimum readable sizes (14px on mobile)
+- Test text scaling (zoom to 200%)
+- Ensure containers expand with text
+
+### Internationalization (i18n)
+
+**Text expansion**:
+- Add 30-40% space budget for translations
+- Use flexbox/grid that adapts to content
+- Test with longest language (usually German)
+- Avoid fixed widths on text containers
+
+```jsx
+// ❌ Bad: Assumes short English text
+<button className="w-24">Submit</button>
+
+// ✅ Good: Adapts to content
+<button className="px-4 py-2">Submit</button>
+```
+
+**RTL (Right-to-Left) support**:
+```css
+/* Use logical properties */
+margin-inline-start: 1rem; /* Not margin-left */
+padding-inline: 1rem; /* Not padding-left/right */
+border-inline-end: 1px solid; /* Not border-right */
+
+/* Or use dir attribute */
+[dir="rtl"] .arrow { transform: scaleX(-1); }
+```
+
+**Character set support**:
+- Use UTF-8 encoding everywhere
+- Test with Chinese/Japanese/Korean (CJK) characters
+- Test with emoji (they can be 2-4 bytes)
+- Handle different scripts (Latin, Cyrillic, Arabic, etc.)
+
+**Date/Time formatting**:
+```javascript
+// ✅ Use Intl API for proper formatting
+new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024
+new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024
+
+new Intl.NumberFormat('en-US', { 
+  style: 'currency', 
+  currency: 'USD' 
+}).format(1234.56); // $1,234.56
+```
+
+**Pluralization**:
+```javascript
+// ❌ Bad: Assumes English pluralization
+`${count} item${count !== 1 ? 's' : ''}`
+
+// ✅ Good: Use proper i18n library
+t('items', { count }) // Handles complex plural rules
+```
+
+### Error Handling
+
+**Network errors**:
+- Show clear error messages
+- Provide retry button
+- Explain what happened
+- Offer offline mode (if applicable)
+- Handle timeout scenarios
+
+```jsx
+// Error states with recovery
+{error && (
+  <ErrorMessage>
+    <p>Failed to load data. {error.message}</p>
+    <button onClick={retry}>Try again</button>
+  </ErrorMessage>
+)}
+```
+
+**Form validation errors**:
+- Inline errors near fields
+- Clear, specific messages
+- Suggest corrections
+- Don't block submission unnecessarily
+- Preserve user input on error
+
+**API errors**:
+- Handle each status code appropriately
+  - 400: Show validation errors
+  - 401: Redirect to login
+  - 403: Show permission error
+  - 404: Show not found state
+  - 429: Show rate limit message
+  - 500: Show generic error, offer support
+
+**Graceful degradation**:
+- Core functionality works without JavaScript
+- Images have alt text
+- Progressive enhancement
+- Fallbacks for unsupported features
+
+### Edge Cases & Boundary Conditions
+
+**Empty states**:
+- No items in list
+- No search results
+- No notifications
+- No data to display
+- Provide clear next action
+
+**Loading states**:
+- Initial load
+- Pagination load
+- Refresh
+- Show what's loading ("Loading your projects...")
+- Time estimates for long operations
+
+**Large datasets**:
+- Pagination or virtual scrolling
+- Search/filter capabilities
+- Performance optimization
+- Don't load all 10,000 items at once
+
+**Concurrent operations**:
+- Prevent double-submission (disable button while loading)
+- Handle race conditions
+- Optimistic updates with rollback
+- Conflict resolution
+
+**Permission states**:
+- No permission to view
+- No permission to edit
+- Read-only mode
+- Clear explanation of why
+
+**Browser compatibility**:
+- Polyfills for modern features
+- Fallbacks for unsupported CSS
+- Feature detection (not browser detection)
+- Test in target browsers
+
+### Input Validation & Sanitization
+
+**Client-side validation**:
+- Required fields
+- Format validation (email, phone, URL)
+- Length limits
+- Pattern matching
+- Custom validation rules
+
+**Server-side validation** (always):
+- Never trust client-side only
+- Validate and sanitize all inputs
+- Protect against injection attacks
+- Rate limiting
+
+**Constraint handling**:
+```html
+<!-- Set clear constraints -->
+<input 
+  type="text"
+  maxlength="100"
+  pattern="[A-Za-z0-9]+"
+  required
+  aria-describedby="username-hint"
+/>
+<small id="username-hint">
+  Letters and numbers only, up to 100 characters
+</small>
+```
+
+### Accessibility Resilience
+
+**Keyboard navigation**:
+- All functionality accessible via keyboard
+- Logical tab order
+- Focus management in modals
+- Skip links for long content
+
+**Screen reader support**:
+- Proper ARIA labels
+- Announce dynamic changes (live regions)
+- Descriptive alt text
+- Semantic HTML
+
+**Motion sensitivity**:
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+**High contrast mode**:
+- Test in Windows high contrast mode
+- Don't rely only on color
+- Provide alternative visual cues
+
+### Performance Resilience
+
+**Slow connections**:
+- Progressive image loading
+- Skeleton screens
+- Optimistic UI updates
+- Offline support (service workers)
+
+**Memory leaks**:
+- Clean up event listeners
+- Cancel subscriptions
+- Clear timers/intervals
+- Abort pending requests on unmount
+
+**Throttling & Debouncing**:
+```javascript
+// Debounce search input
+const debouncedSearch = debounce(handleSearch, 300);
+
+// Throttle scroll handler
+const throttledScroll = throttle(handleScroll, 100);
+```
+
+## Testing Strategies
+
+**Manual testing**:
+- Test with extreme data (very long, very short, empty)
+- Test in different languages
+- Test offline
+- Test slow connection (throttle to 3G)
+- Test with screen reader
+- Test keyboard-only navigation
+- Test on old browsers
+
+**Automated testing**:
+- Unit tests for edge cases
+- Integration tests for error scenarios
+- E2E tests for critical paths
+- Visual regression tests
+- Accessibility tests (axe, WAVE)
+
+**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined.
+
+**NEVER**:
+- Assume perfect input (validate everything)
+- Ignore internationalization (design for global)
+- Leave error messages generic ("Error occurred")
+- Forget offline scenarios
+- Trust client-side validation alone
+- Use fixed widths for text
+- Assume English-length text
+- Block entire interface when one component errors
+
+## Verify Hardening
+
+Test thoroughly with edge cases:
+
+- **Long text**: Try names with 100+ characters
+- **Emoji**: Use emoji in all text fields
+- **RTL**: Test with Arabic or Hebrew
+- **CJK**: Test with Chinese/Japanese/Korean
+- **Network issues**: Disable internet, throttle connection
+- **Large datasets**: Test with 1000+ items
+- **Concurrent actions**: Click submit 10 times rapidly
+- **Errors**: Force API errors, test all error states
+- **Empty**: Remove all data, test empty states
+
+Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component.

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

@@ -0,0 +1,163 @@
+# Impeccable Command Workflow
+
+This guide shows how Impeccable commands work together to transform your designs.
+
+## The Periodic Table
+
+```
+╔═══════════════════════════════════════════════════════════════════════════════════════╗
+║  DIAGNOSTIC          QUALITY                ADAPTATION           ENHANCEMENT          ║
+║  ┌────┐ ┌────┐      ┌────┐ ┌────┐ ┌────┐ ┌────┐   ┌────┐ ┌────┐ ┌────┐   ┌────┐ ┌────┐ ┌────┐  ║
+║  │ Au │ │ Cr │      │ No │ │ Po │ │ Op │ │ Ha │   │ Cl │ │ Si │ │ Ad │   │ An │ │ Co │ │ De │  ║
+║  │audit│ │crit│      │norm│ │poli│ │opti│ │hard│   │clar│ │simp│ │adap│   │anim│ │colo│ │deli│  ║
+║  └────┘ └────┘      └────┘ └────┘ └────┘ └────┘   └────┘ └────┘ └────┘   └────┘ └────┘ └────┘  ║
+║                                                                                         ║
+║  INTENSITY           SYSTEM                                                            ║
+║  ┌────┐ ┌────┐      ┌────┐ ┌────┐ ┌────┐                                               ║
+║  │ Qu │ │ Bo │      │ Ti │ │ Ex │ │ On │                                               ║
+║  │quie│ │bold│      │teac│ │extr│ │onbo│                                               ║
+║  └────┘ └────┘      └────┘ └────┘ └────┘                                               ║
+╚═══════════════════════════════════════════════════════════════════════════════════════╝
+```
+
+---
+
+## Command Categories
+
+### 🔧 SYSTEM — Run Once
+
+| Command | When | Purpose |
+|---------|------|---------|
+| `/teach-impeccable` | **Before Phase 2** | One-time setup for project design context |
+| `/extract` | After 2-3 features built | Extract reusable components into design system |
+| `/onboard` | When designing first-time UX | Design onboarding flows and empty states |
+
+### 🔍 DIAGNOSTIC — Run at Checkpoints
+
+| Command | When | Purpose |
+|---------|------|---------|
+| `/audit` | After tokens, shell, before export | Technical quality check (a11y, perf, theming) |
+| `/critique` | After shell, after each section | UX evaluation (hierarchy, emotion, architecture) |
+
+### ✅ QUALITY — Run After Diagnostics
+
+| Command | Fixes issues from | Purpose |
+|---------|-------------------|---------|
+| `/normalize` | `/audit` (theming) | Design system consistency |
+| `/harden` | `/audit` (resilience) | Error handling, i18n, edge cases |
+| `/optimize` | `/audit` (performance) | Speed, animations, bundle size |
+| `/polish` | `/critique` (details) | Alignment, spacing, refinements |
+
+### 🔄 ADAPTATION — Run During Refinement
+
+| Command | When | Purpose |
+|---------|------|---------|
+| `/clarify` | Copy is confusing | Improve labels, errors, microcopy |
+| `/simplify` | Design feels cluttered | Strip to essence |
+| `/adapt` | Before export | Ensure multi-device compatibility |
+
+### 🎚️ INTENSITY — Run for Calibration
+
+| Command | When | Purpose |
+|---------|------|---------|
+| `/bolder` | `/critique` says "too safe" | Amplify generic designs |
+| `/quieter` | `/critique` says "too loud" | Tone down aggressive designs |
+
+⚠️ These are **mutually exclusive**. Never run both.
+
+### ✨ ENHANCEMENT — Run Before Shipping
+
+| Command | When | Purpose |
+|---------|------|---------|
+| `/animate` | After polish | Add purposeful motion |
+| `/colorize` | Design is monochromatic | Add strategic color |
+| `/delight` | Before export | Add moments of joy |
+
+---
+
+## The Complete Flow
+
+### Phase 2: Design System
+
+```
+                    ┌─────────────────────┐
+                    │  /teach-impeccable  │ ← One-time setup
+                    └──────────┬──────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │   /design-tokens    │
+                    │   ← Auto-audit      │
+                    └──────────┬──────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │   /design-shell     │
+                    │   ← Auto-audit      │
+                    └──────────┬──────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │      /audit         │ ← Full manual check
+                    └──────────┬──────────┘
+                               │
+              ┌────────────────┼────────────────┐
+              │                │                │
+     ┌────────▼───────┐ ┌──────▼──────┐ ┌───────▼───────┐
+     │  /normalize    │ │  /harden    │ │  /optimize    │
+     │  (if theming)  │ │ (if edge)   │ │ (if perf)     │
+     └────────┬───────┘ └──────┬──────┘ └───────┬───────┘
+              │                │                │
+              └────────────────┼────────────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │     /critique       │ ← UX evaluation
+                    └──────────┬──────────┘
+                               │
+              ┌────────────────┼────────────────┐
+              │                │                │
+     ┌────────▼───────┐ ┌──────▼──────┐ ┌───────▼───────┐
+     │   /bolder      │ │  /quieter   │ │  /simplify    │
+     │   (if safe)    │ │ (if loud)   │ │ (if complex)  │
+     └────────┬───────┘ └──────┬──────┘ └───────┬───────┘
+              │                │                │
+              └────────────────┼────────────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │      /adapt         │ ← Responsive check
+                    └──────────┬──────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │      /polish        │ ← Final details
+                    └──────────┬──────────┘
+                               │
+              ┌────────────────┼────────────────┐
+              │                │                │
+     ┌────────▼───────┐ ┌──────▼──────┐ ┌───────▼───────┐
+     │   /animate     │ │  /colorize  │ │   /delight    │
+     └────────┬───────┘ └──────┬──────┘ └───────┬───────┘
+              │                │                │
+              └────────────────┼────────────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │   /export-product   │ ← Pre-export audit check
+                    └─────────────────────┘
+```
+
+### Phase 4: Per Feature
+
+```
+/shape-spec → Design screens → /clarify → /simplify → /audit → /polish → /implement-tasks
+```
+
+---
+
+## Quick Reference
+
+| Situation | Run |
+|-----------|-----|
+| Starting design phase | `/teach-impeccable` |
+| Design looks generic/AI-generated | `/audit` → `/bolder` |
+| Design is overwhelming | `/critique` → `/quieter` |
+| Accessibility issues | `/audit` → `/harden` |
+| Inconsistent tokens | `/audit` → `/normalize` |
+| Slow performance | `/audit` → `/optimize` |
+| Ready to ship | `/polish` → `/animate` → `/delight` |
+| Before export | `/audit` check required |

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

@@ -0,0 +1,61 @@
+# COMMAND: Normalize
+**Description**: Normalize design to match your design system and ensure consistency
+
+
+Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.
+
+## Plan
+
+Before making changes, deeply understand the context:
+
+1. **Discover the design system**: Search for design system documentation, UI guidelines, component libraries, or style guides (grep for "design system", "ui guide", "style guide", etc.). Study it thoroughly until you understand:
+   - Core design principles and aesthetic direction
+   - Target audience and personas
+   - Component patterns and conventions
+   - Design tokens (colors, typography, spacing)
+   
+   **CRITICAL**: If something isn't clear, ask. Don't guess at design system principles.
+
+2. **Analyze the current feature**: Assess what works and what doesn't:
+   - Where does it deviate from design system patterns?
+   - Which inconsistencies are cosmetic vs. functional?
+   - What's the root cause—missing tokens, one-off implementations, or conceptual misalignment?
+
+3. **Create a normalization plan**: Define specific changes that will align the feature with the design system:
+   - Which components can be replaced with design system equivalents?
+   - Which styles need to use design tokens instead of hard-coded values?
+   - How can UX patterns match established user flows?
+   
+   **IMPORTANT**: Great design is effective design. Prioritize UX consistency and usability over visual polish alone. Think through the best possible experience for your use case and personas first.
+
+## Execute
+
+Systematically address all inconsistencies across these dimensions:
+
+- **Typography**: Use design system fonts, sizes, weights, and line heights. Replace hard-coded values with typographic tokens or classes.
+- **Color & Theme**: Apply design system color tokens. Remove one-off color choices that break the palette.
+- **Spacing & Layout**: Use spacing tokens (margins, padding, gaps). Align with grid systems and layout patterns used elsewhere.
+- **Components**: Replace custom implementations with design system components. Ensure props and variants match established patterns.
+- **Motion & Interaction**: Match animation timing, easing, and interaction patterns to other features.
+- **Responsive Behavior**: Ensure breakpoints and responsive patterns align with design system standards.
+- **Accessibility**: Verify contrast ratios, focus states, ARIA labels match design system requirements.
+- **Progressive Disclosure**: Match information hierarchy and complexity management to established patterns.
+
+**NEVER**:
+- Create new one-off components when design system equivalents exist
+- Hard-code values that should use design tokens
+- Introduce new patterns that diverge from the design system
+- Compromise accessibility for visual consistency
+
+This is not an exhaustive list—apply judgment to identify all areas needing normalization.
+
+## Clean Up
+
+After normalization, ensure code quality:
+
+- **Consolidate reusable components**: If you created new components that should be shared, move them to the design system or shared UI component path.
+- **Remove orphaned code**: Delete unused implementations, styles, or files made obsolete by normalization.
+- **Verify quality**: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions.
+- **Ensure DRYness**: Look for duplication introduced during refactoring and consolidate.
+
+Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness.