@reidbuilds/slop 0.2.0

package/slop-index/patterns/013-emoji-debugging.md

@@ -0,0 +1,44 @@
+---
+id: 013
+name: emoji-debugging
+severity: medium
+languages: [javascript, typescript]
+tags: [debugging, logging, production, maintenance]
+added: 2026-05-20
+---
+
+# Pattern: Emoji Debugging
+
+## Description
+Using emoji characters and decorative symbols in debug output, console logs, or error messages. This creates unprofessional production logs, can cause encoding issues in different environments, and makes log parsing and searching more difficult for monitoring systems.
+
+## What It Looks Like
+```
+console.log('🔍 Finding "Sweat Starter Test 1" program...');
+console.log('✓ Found program:', program.id);
+console.error('❌ Program not found');
+console.log('🔥 Firebase Config Debug:');
+console.log('✅ Successfully populated program!');
+```
+
+## Why AI Does This
+AI models are trained on diverse code examples including tutorials, demos, and beginner-friendly examples that often use emoji to make output more visually appealing and easier to follow. The AI associates emoji with good user experience without understanding that production systems require clean, parseable log output.
+
+## Catch Signal
+- Emoji characters (🔍, ✓, ❌, 🔥, ✅) in console.log or error messages
+- Unicode symbols mixed with technical output
+- Decorative characters in debug strings
+- Progress indicators using visual symbols instead of text
+- Status messages with celebratory or attention-grabbing emoji
+
+## Fix Template
+```
+console.log('Finding "Sweat Starter Test 1" program...');
+console.log('Found program:', program.id);
+console.error('Program not found');
+console.log('Firebase Config Debug:');
+console.log('Successfully populated program!');
+```
+
+## Severity Rationale
+medium — Medium severity because it creates maintenance issues and unprofessional output but doesn't break core functionality.

package/slop-index/patterns/014-fake-async-simulation.md

@@ -0,0 +1,71 @@
+---
+id: 014
+name: fake-async-simulation
+severity: high
+languages: [javascript, typescript]
+tags: [async, testing, mocking, production]
+added: 2026-05-20
+---
+
+# Pattern: Fake Async Simulation
+
+## Description
+Creating fake asynchronous operations using setTimeout with hardcoded delays to simulate real async work like API calls or database operations. This creates the illusion of working functionality while providing no real implementation, and the arbitrary delays will cause performance issues and unpredictable behavior in production.
+
+## What It Looks Like
+```
+const handleSave = async () => {
+  setSaving(true);
+  // TODO: Implement API call
+  await new Promise(r => setTimeout(r, 1000));
+  setSaving(false);
+  alert('Saved successfully!');
+};
+
+const fetchData = async () => {
+  setLoading(true);
+  await new Promise(r => setTimeout(r, 500));
+  setData(mockData);
+  setLoading(false);
+};
+```
+
+## Why AI Does This
+AI models often see timeout-based delays in examples used for demonstrating loading states or simulating network latency in tutorials. The AI incorrectly applies this pattern as a placeholder for real async operations, not understanding that setTimeout should only be used for actual timing requirements, not as a substitute for meaningful async work.
+
+## Catch Signal
+- setTimeout wrapped in Promise constructor with resolve callback
+- Hardcoded delay values (500ms, 1000ms) in async functions
+- await new Promise(r => setTimeout(r, number)) patterns
+- TODO comments about API calls combined with fake delays
+- Loading states that resolve after arbitrary timeouts rather than real operations
+
+## Fix Template
+```
+const handleSave = async () => {
+  setSaving(true);
+  try {
+    const result = await saveUserProfile(profileData);
+    if (result.success) {
+      showSuccessMessage('Profile saved successfully!');
+    }
+  } catch (error) {
+    showErrorMessage('Failed to save profile');
+  } finally {
+    setSaving(false);
+  }
+};
+
+const fetchData = async () => {
+  setLoading(true);
+  try {
+    const response = await apiClient.getData();
+    setData(response.data);
+  } finally {
+    setLoading(false);
+  }
+};
+```
+
+## Severity Rationale
+high — High severity because it creates non-functional code that appears to work but provides no real value and can mislead developers about system behavior.

package/slop-index/patterns/015-credential-fallbacks.md

@@ -0,0 +1,51 @@
+---
+id: 015
+name: credential-fallbacks
+severity: high
+languages: [javascript, typescript]
+tags: [security, configuration, credentials, environment]
+added: 2026-05-20
+---
+
+# Pattern: Credential Fallbacks
+
+## Description
+Providing real API keys, tokens, or other credentials as hardcoded fallback values in environment variable lookups. While intended as defaults when environment variables are missing, this embeds production credentials directly in source code, creating security risks and making it impossible to rotate keys without code changes.
+
+## What It Looks Like
+```
+const config = {
+  apiKey: process.env.FIREBASE_API_KEY || 'AIzaSyB0uWItoUyaozcnjntgG9kck6GJx84GQNY',
+  stripeKey: process.env.STRIPE_KEY || 'pk_test_51SrKL12EWDoWzTlbooO1c6Y3k1oMpjc2JAk266LPVK6TGgRPthyf4eeGjhFh6lDGeZEz3YxDxDUhQ4wBcnemfU1v00BKalQrEu',
+  databaseUrl: process.env.DB_URL || 'hardcore-synergy.firebaseapp.com'
+};
+```
+
+## Why AI Does This
+AI models see environment variable patterns with fallback values in many code examples and tutorials, where hardcoded values are used for convenience in demonstrations. The AI doesn't understand the security implications of embedding real credentials and treats them as helpful defaults that ensure the code always has working values.
+
+## Catch Signal
+- Real API keys or tokens in || fallback expressions
+- Environment variable lookups with credential strings as defaults
+- Firebase config objects with hardcoded API keys
+- Stripe keys, database URLs, or service endpoints as fallback values
+- process.env.VAR || 'real-credential-string' patterns
+
+## Fix Template
+```
+const config = {
+  apiKey: process.env.FIREBASE_API_KEY || (() => { throw new Error('FIREBASE_API_KEY environment variable is required') })(),
+  stripeKey: process.env.STRIPE_KEY || (() => { throw new Error('STRIPE_KEY environment variable is required') })(),
+  databaseUrl: process.env.DB_URL || 'localhost:5432'
+};
+
+// Or use a configuration validation library
+const config = {
+  apiKey: requireEnv('FIREBASE_API_KEY'),
+  stripeKey: requireEnv('STRIPE_KEY'),
+  databaseUrl: process.env.DB_URL || 'localhost:5432'
+};
+```
+
+## Severity Rationale
+high — High severity because it exposes real credentials in source code, creating immediate security vulnerabilities.

package/slop-index/patterns/016-mock-data-pollution.md

@@ -0,0 +1,75 @@
+---
+id: 016
+name: mock-data-pollution
+severity: medium
+languages: [javascript, typescript]
+tags: [testing, data, hardcoding, maintenance]
+added: 2026-05-20
+---
+
+# Pattern: Mock Data Pollution
+
+## Description
+Embedding large amounts of detailed mock data directly in component files or business logic, often with realistic-looking but fake personal information. This clutters the codebase, makes components harder to understand, and creates maintenance overhead when the mock data inevitably becomes outdated or needs to change.
+
+## What It Looks Like
+```
+const mockIntakes: PendingIntake[] = [
+  {
+    id: '1',
+    clientName: 'Emma Wilson',
+    email: 'emma@example.com',
+    tier: 'body-blueprint',
+    submittedAt: new Date(Date.now() - 2 * 60 * 60 * 1000),
+    primaryGoal: 'lose-fat',
+    age: 28,
+    weight: 145,
+    height: '5\'6"',
+    activityLevel: 'moderate'
+  },
+  // ... 15 more detailed mock objects
+];
+
+const mockTemplateData: Record<string, {
+  title: string;
+  description: string;
+  category: string;
+  focusAreas: string[];
+  // ... many more fields
+}> = {
+  // Large object with detailed fake data
+};
+```
+
+## Why AI Does This
+AI models are trained on examples where mock data is used for demonstrations and prototyping. The AI generates realistic and comprehensive mock data to make the interface look complete and functional, not realizing that production components should either use real data sources or minimal placeholder data for structure testing.
+
+## Catch Signal
+- Large arrays of mock objects with detailed fake personal information
+- Mock data constants defined directly in component files
+- Realistic fake emails, names, and personal details in hardcoded data
+- Complex mock objects with many fields that mirror production data structures
+- Mock data that includes computed dates or timestamps
+
+## Fix Template
+```
+// Move to separate test data file
+// __tests__/mockData.ts
+export const mockIntakes = [
+  {
+    id: '1',
+    clientName: 'Test User 1',
+    email: 'test1@example.com',
+    tier: 'body-blueprint'
+  }
+];
+
+// In component, use data service
+const { data: intakes, loading } = useIntakes();
+
+// Or minimal inline placeholder
+const placeholderIntake = { id: '', clientName: 'Loading...', email: '' };
+```
+
+## Severity Rationale
+medium — Medium severity because it creates maintenance burden and code clutter but doesn't affect core functionality or security.

package/slop-index/proposed/017-emoji-progress-logging.md

@@ -0,0 +1,44 @@
+---
+id: 017
+name: emoji-progress-logging
+severity: low
+languages: [typescript, javascript]
+tags: [logging, debugging, production, console]
+added: 2026-05-20
+---
+
+# Pattern: Emoji Progress Logging
+
+## Description
+Using emoji characters and visual progress indicators in console logging statements throughout production code. While these make development debugging more visually appealing, they create unprofessional log output in production environments and can cause encoding issues in log aggregation systems.
+
+## What It Looks Like
+```
+console.log('🔍 Finding "Sweat Starter Test 1" program...');
+console.log('✓ Found program:', targetProgram.id);
+console.error('❌ Program not found');
+console.log('🔥 Firebase Config Debug:');
+console.log('✅ Successfully populated program!');
+```
+
+## Why AI Does This
+AI models are trained on tutorial code and beginner examples that often use emoji for visual appeal and clarity. They apply this pattern to make logs more readable during development without considering the professional context or production log requirements.
+
+## Catch Signal
+- Console logging with emoji characters (🔍, ✓, ❌, 🔥, ✅)
+- Progress indicators using visual symbols in logs
+- Mix of informational and error logging with decorative characters
+- Logging patterns that prioritize visual appeal over log parsing
+- Console statements with status symbols instead of proper log levels
+
+## Fix Template
+```
+logger.debug('Finding Sweat Starter Test 1 program');
+logger.info('Found program', { programId: targetProgram.id });
+logger.error('Program not found', { programName: 'Sweat Starter Test 1' });
+logger.debug('Firebase configuration loaded');
+logger.info('Successfully populated program', { totalWorkouts, totalWeeks });
+```
+
+## Severity Rationale
+low — Low severity because it's primarily a cosmetic issue that doesn't break functionality but creates unprofessional production logs.

package/slop-index/proposed/018-test-credentials-in-fallbacks.md

@@ -0,0 +1,54 @@
+---
+id: 018
+name: test-credentials-in-fallbacks
+severity: high
+languages: [typescript, javascript]
+tags: [security, credentials, configuration, environment]
+added: 2026-05-20
+---
+
+# Pattern: Test Credentials In Fallbacks
+
+## Description
+Using real test environment API keys, tokens, or credentials as hardcoded fallback values in configuration. This creates security risks by embedding actual credentials in source code and makes it impossible to rotate keys without code changes. Even test credentials should be managed through environment variables.
+
+## What It Looks Like
+```
+const stripeKey = process.env.STRIPE_KEY || 'pk_test_51SrKL12EWDoWzTlbooO1c6Y3k1oMpjc2JAk266LPVK6TGgRPthyf4eeGjhFh6lDGeZEz3YxDxDUhQ4wBcnemfU1v00BKalQrEu';
+const firebaseConfig = {
+  apiKey: process.env.FIREBASE_KEY || 'AIzaSyB0uWItoUyaozcnjntgG9kck6GJx84GQNY',
+  projectId: process.env.PROJECT_ID || 'hardcore-synergy'
+};
+```
+
+## Why AI Does This
+AI models see environment variable patterns with fallbacks in training data and generate realistic-looking credentials to make code appear functional. They don't understand that even test credentials should be externalized or that hardcoded fallbacks defeat the purpose of environment-based configuration.
+
+## Catch Signal
+- Real-looking API keys or tokens as fallback values
+- Test environment credentials (pk_test_, sk_test_) hardcoded in source
+- Firebase, Stripe, or other service credentials as literal strings
+- Environment variable patterns with credential fallbacks
+- Configuration objects mixing env vars with hardcoded keys
+
+## Fix Template
+```
+const stripeKey = process.env.STRIPE_KEY;
+if (!stripeKey) {
+  throw new Error('STRIPE_KEY environment variable is required');
+}
+
+const firebaseConfig = {
+  apiKey: requireEnv('FIREBASE_API_KEY'),
+  projectId: requireEnv('FIREBASE_PROJECT_ID')
+};
+
+function requireEnv(key: string): string {
+  const value = process.env[key];
+  if (!value) throw new Error(`${key} environment variable is required`);
+  return value;
+}
+```
+
+## Severity Rationale
+high — High severity because it exposes real credentials in source code, creating security vulnerabilities and deployment risks.

package/slop-index/proposed/019-fake-loading-simulation.md

@@ -0,0 +1,75 @@
+---
+id: 019
+name: fake-loading-simulation
+severity: medium
+languages: [typescript, javascript]
+tags: [async, ui, mocking, delays]
+added: 2026-05-20
+---
+
+# Pattern: Fake Loading Simulation
+
+## Description
+Creating artificial loading states and delays using setTimeout to simulate async operations that don't actually exist. This creates a false impression of working functionality and will break user expectations when real async operations are implemented, as the timing and behavior will change dramatically.
+
+## What It Looks Like
+```
+const [loading, setLoading] = useState(false);
+
+const handleSave = async () => {
+  setLoading(true);
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  // TODO: Implement actual save logic
+  setLoading(false);
+  alert('Settings saved!');
+};
+
+const fetchData = async () => {
+  setLoading(true);
+  await new Promise(r => setTimeout(r, 500));
+  setData(mockData);
+  setLoading(false);
+};
+```
+
+## Why AI Does This
+AI models understand that real async operations take time and create loading states, but when generating stub code, they simulate this timing with setTimeout to make the UI behavior appear realistic. They don't realize this creates misleading UX expectations and technical debt.
+
+## Catch Signal
+- setTimeout used to simulate async operation delays
+- Loading states paired with artificial delays
+- Promise.resolve with setTimeout for fake async behavior
+- Consistent delay timing (500ms, 1000ms) across different operations
+- Mock data returned after simulated loading periods
+
+## Fix Template
+```
+const [loading, setLoading] = useState(false);
+
+const handleSave = async () => {
+  setLoading(true);
+  try {
+    await api.saveSettings(settings);
+    showSuccessMessage('Settings saved!');
+  } catch (error) {
+    showErrorMessage('Failed to save settings');
+  } finally {
+    setLoading(false);
+  }
+};
+
+const fetchData = async () => {
+  setLoading(true);
+  try {
+    const data = await api.getData();
+    setData(data);
+  } catch (error) {
+    setError('Failed to load data');
+  } finally {
+    setLoading(false);
+  }
+};
+```
+
+## Severity Rationale
+medium — Medium severity because it creates misleading UX expectations and technical debt that will require significant refactoring when real async operations are implemented.

package/slop-index/proposed/020-configuration-debugging-left-in.md

@@ -0,0 +1,53 @@
+---
+id: 020
+name: configuration-debugging-left-in
+severity: medium
+languages: [typescript, javascript]
+tags: [debugging, configuration, logging, security]
+added: 2026-05-20
+---
+
+# Pattern: Configuration Debugging Left In
+
+## Description
+Leaving detailed configuration debugging statements in production code that log sensitive configuration details, API endpoints, or system internals. These debug statements expose implementation details and potentially sensitive information while cluttering production logs with development-time diagnostic information.
+
+## What It Looks Like
+```
+console.log('🔑 Loading Stripe with key:', STRIPE_KEY.substring(0, 20) + '...');
+console.log('🔑 Key length:', STRIPE_KEY.length);
+console.log('🔑 Full key (for debugging):', STRIPE_KEY);
+console.log('🔥 Firebase Config Debug:');
+console.log('  - API Key:', config.apiKey ? '✓ Set' : '✗ MISSING');
+console.log('  - Project ID:', config.projectId);
+```
+
+## Why AI Does This
+AI models generate debugging code to help developers verify configuration is loaded correctly, but they don't distinguish between development debugging and production code. They create comprehensive logging to demonstrate that the configuration system is working properly.
+
+## Catch Signal
+- Console logging of API keys or credentials (even partially)
+- Configuration validation logging with service details
+- Debug statements showing internal system state
+- Logging that exposes service names, endpoints, or keys
+- Development-style diagnostic logging in production files
+
+## Fix Template
+```
+// Use proper logging levels and avoid exposing sensitive data
+logger.debug('Stripe client initialized');
+logger.debug('Firebase services initialized', { 
+  services: ['auth', 'firestore', 'storage'] 
+});
+
+// For development, use environment-specific debug logging
+if (process.env.NODE_ENV === 'development') {
+  logger.debug('Configuration loaded', {
+    hasStripeKey: !!process.env.STRIPE_KEY,
+    hasFirebaseConfig: !!process.env.FIREBASE_API_KEY
+  });
+}
+```
+
+## Severity Rationale
+medium — Medium severity because it can expose sensitive configuration details and creates security risks while polluting production logs.

package/slop-index/proposed/021-emoji-production-logging.md

@@ -0,0 +1,42 @@
+---
+id: 021
+name: emoji-production-logging
+severity: medium
+languages: [javascript, typescript]
+tags: [logging, production, debugging, ui-pollution]
+added: 2026-05-20
+---
+
+# Pattern: Emoji Production Logging
+
+## Description
+AI generates console logging statements that include emoji characters and casual language intended for development debugging but left in production code. These logs create visual noise in production environments and suggest unprofessional development practices.
+
+## What It Looks Like
+```
+console.log('🔍 Finding "Sweat Starter Test 1" program...');
+console.log('✓ Found program:', targetProgram.id);
+console.error('❌ Program not found');
+console.log('✅ Successfully populated program!');
+```
+
+## Why AI Does This
+AI models are trained on diverse code examples including tutorial code and development scripts where emoji logging is used to make output more readable during learning. The AI doesn't distinguish between development utility scripts and production code, carrying over this casual logging style inappropriately.
+
+## Catch Signal
+- console.log statements with emoji characters
+- Success/error messages with ✓, ❌, ✅ symbols
+- Progress indicators with 🔍, 🔑, 🔥 emojis
+- Multiple themed console statements in sequence
+- Casual language combined with emoji in logging
+
+## Fix Template
+```
+logger.debug('Finding target program:', programName);
+logger.info('Found program', { programId: targetProgram.id });
+logger.error('Program not found', { programName });
+logger.info('Successfully populated program', { programId, workoutCount });
+```
+
+## Severity Rationale
+medium — Medium severity because it creates log pollution and unprofessional output but doesn't break functionality.

package/slop-index/proposed/022-fake-delay-simulation.md

@@ -0,0 +1,70 @@
+---
+id: 022
+name: fake-delay-simulation
+severity: high
+languages: [javascript, typescript]
+tags: [async, mocking, testing, production-risk]
+added: 2026-05-20
+---
+
+# Pattern: Fake Delay Simulation
+
+## Description
+AI creates artificial delays using setTimeout in Promise wrappers to simulate async operations like API calls or database queries. This creates the illusion of working functionality during development but will fail when real async operations are needed.
+
+## What It Looks Like
+```
+const fetchData = async () => {
+  setLoading(true);
+  await new Promise(r => setTimeout(r, 500));
+  setData(mockData);
+  setLoading(false);
+};
+
+const handleSave = async () => {
+  setSaving(true);
+  await new Promise(r => setTimeout(r, 1000));
+  setSaving(false);
+  alert('Settings saved!');
+};
+```
+
+## Why AI Does This
+AI models generate fake delays to simulate the user experience of async operations while building UI components. This allows the generated code to demonstrate loading states and async patterns without requiring real backend integration, but creates non-functional stubs that appear to work.
+
+## Catch Signal
+- await new Promise(r => setTimeout(r, number))
+- Async functions with only setTimeout delays
+- Loading states around artificial delays
+- Success messages after fake delays
+- Mock data returned after setTimeout
+
+## Fix Template
+```
+const fetchData = async () => {
+  setLoading(true);
+  try {
+    const response = await apiClient.get('/data');
+    setData(response.data);
+  } catch (error) {
+    setError('Failed to fetch data');
+  } finally {
+    setLoading(false);
+  }
+};
+
+const handleSave = async (settings: Settings) => {
+  setSaving(true);
+  try {
+    await apiClient.put('/settings', settings);
+    showSuccessToast('Settings saved!');
+  } catch (error) {
+    showErrorToast('Failed to save settings');
+  } finally {
+    setSaving(false);
+  }
+};
+```
+
+## Severity Rationale
+high — High severity because it creates completely non-functional code that appears to work during development.

package/slop-index/proposed/023-credential-hardcoding-with-fallbacks.md

@@ -0,0 +1,57 @@
+---
+id: 023
+name: credential-hardcoding-with-fallbacks
+severity: high
+languages: [javascript, typescript]
+tags: [security, credentials, configuration, environment]
+added: 2026-05-20
+---
+
+# Pattern: Credential Hardcoding With Fallbacks
+
+## Description
+AI hardcodes real API keys, tokens, or service credentials directly in source code as fallback values when environment variables aren't available. While using environment variables is good practice, the hardcoded fallbacks expose real credentials and create security vulnerabilities.
+
+## What It Looks Like
+```
+const stripeKey = process.env.STRIPE_KEY || 'pk_test_51SrKL12EWDoWzTlbooO1c6Y3k1oMpjc2JAk266LPVK6TGgRPthyf4eeGjhFh6lDGeZEz3YxDxDUhQ4wBcnemfU1v00BKalQrEu';
+
+const firebaseConfig = {
+  apiKey: process.env.FIREBASE_API_KEY || 'AIzaSyB0uWItoUyaozcnjntgG9kck6GJx84GQNY',
+  authDomain: process.env.FIREBASE_AUTH_DOMAIN || 'hardcore-synergy.firebaseapp.com'
+};
+```
+
+## Why AI Does This
+AI models attempt to create working code examples by providing fallback values for environment variables, but they generate realistic-looking credentials that may be real test keys from training data. The AI prioritizes making code that "just works" over security best practices.
+
+## Catch Signal
+- API keys with realistic formats as fallback values
+- Environment variable patterns with || followed by credentials
+- Real-looking service IDs and tokens in fallbacks
+- Firebase/Stripe/AWS credentials embedded in code
+- Process.env usage with hardcoded alternatives
+
+## Fix Template
+```
+const stripeKey = process.env.STRIPE_KEY;
+if (!stripeKey) {
+  throw new Error('STRIPE_KEY environment variable is required');
+}
+
+const firebaseConfig = {
+  apiKey: requireEnvVar('FIREBASE_API_KEY'),
+  authDomain: requireEnvVar('FIREBASE_AUTH_DOMAIN')
+};
+
+function requireEnvVar(name: string): string {
+  const value = process.env[name];
+  if (!value) {
+    throw new Error(`${name} environment variable is required`);
+  }
+  return value;
+}
+```
+
+## Severity Rationale
+high — High severity because it exposes real credentials in source code creating immediate security risks.