locus-product-planning 1.0.0 → 1.2.0

package/skills/04-developer-specializations/data-ai/ml-engineer/SKILL.md

@@ -0,0 +1,349 @@
+---
+name: ml-engineer
+description: Machine learning systems, MLOps, model training and serving, feature stores, and productionizing ML models
+metadata:
+  version: "1.0.0"
+  tier: developer-specialization
+  category: data-ai
+  council: code-review-council
+---
+
+# ML Engineer
+
+You embody the perspective of an ML Engineer with expertise in building production machine learning systems, from training pipelines to model serving infrastructure.
+
+## When to Apply
+
+Invoke this skill when:
+- Designing ML training pipelines
+- Building model serving infrastructure
+- Implementing feature stores
+- Setting up experiment tracking
+- Automating model retraining
+- Monitoring model performance
+- MLOps and CI/CD for ML
+
+## Core Competencies
+
+### 1. ML Pipelines
+- Training pipelines
+- Feature engineering
+- Hyperparameter tuning
+- Distributed training
+
+### 2. Model Serving
+- Real-time inference
+- Batch prediction
+- Model versioning
+- A/B testing
+
+### 3. MLOps
+- Experiment tracking
+- Model registry
+- CI/CD for ML
+- Model monitoring
+
+### 4. Infrastructure
+- GPU compute management
+- Feature stores
+- Vector databases
+- Model optimization
+
+## ML System Architecture
+
+### Training Pipeline
+```
+┌─────────────┐     ┌─────────────┐     ┌─────────────┐
+│   Raw Data  │────▶│  Features   │────▶│  Training   │
+│   Sources   │     │  Pipeline   │     │   Job       │
+└─────────────┘     └──────┬──────┘     └──────┬──────┘
+                           │                   │
+                    ┌──────▼──────┐     ┌──────▼──────┐
+                    │   Feature   │     │   Model     │
+                    │   Store     │     │  Registry   │
+                    └─────────────┘     └──────┬──────┘
+                                               │
+                                        ┌──────▼──────┐
+                                        │   Serving   │
+                                        │   Endpoint  │
+                                        └─────────────┘
+```
+
+### Training Pipeline (Kubeflow)
+```python
+from kfp import dsl
+from kfp.dsl import component, pipeline
+
+@component
+def preprocess_data(data_path: str) -> str:
+    """Preprocess raw data."""
+    import pandas as pd
+    
+    df = pd.read_parquet(data_path)
+    # Preprocessing logic
+    processed_path = "/tmp/processed.parquet"
+    df.to_parquet(processed_path)
+    return processed_path
+
+@component
+def train_model(data_path: str, model_path: str) -> str:
+    """Train ML model."""
+    import pandas as pd
+    from sklearn.ensemble import RandomForestClassifier
+    import joblib
+    
+    df = pd.read_parquet(data_path)
+    X, y = df.drop('target', axis=1), df['target']
+    
+    model = RandomForestClassifier()
+    model.fit(X, y)
+    
+    joblib.dump(model, model_path)
+    return model_path
+
+@component
+def evaluate_model(model_path: str, test_data: str) -> float:
+    """Evaluate model performance."""
+    import joblib
+    import pandas as pd
+    from sklearn.metrics import accuracy_score
+    
+    model = joblib.load(model_path)
+    df = pd.read_parquet(test_data)
+    
+    X, y = df.drop('target', axis=1), df['target']
+    predictions = model.predict(X)
+    
+    return accuracy_score(y, predictions)
+
+@pipeline(name='training-pipeline')
+def ml_pipeline(data_path: str):
+    preprocess_task = preprocess_data(data_path=data_path)
+    train_task = train_model(
+        data_path=preprocess_task.output,
+        model_path='/models/model.joblib'
+    )
+    evaluate_model(
+        model_path=train_task.output,
+        test_data=preprocess_task.output
+    )
+```
+
+## Experiment Tracking
+
+### MLflow Example
+```python
+import mlflow
+from mlflow.tracking import MlflowClient
+
+mlflow.set_tracking_uri("http://mlflow:5000")
+mlflow.set_experiment("customer-churn")
+
+with mlflow.start_run(run_name="rf-baseline"):
+    # Log parameters
+    mlflow.log_param("n_estimators", 100)
+    mlflow.log_param("max_depth", 10)
+    
+    # Train model
+    model = RandomForestClassifier(n_estimators=100, max_depth=10)
+    model.fit(X_train, y_train)
+    
+    # Log metrics
+    predictions = model.predict(X_test)
+    accuracy = accuracy_score(y_test, predictions)
+    mlflow.log_metric("accuracy", accuracy)
+    mlflow.log_metric("f1_score", f1_score(y_test, predictions))
+    
+    # Log model
+    mlflow.sklearn.log_model(model, "model")
+    
+    # Register model
+    mlflow.register_model(
+        f"runs:/{mlflow.active_run().info.run_id}/model",
+        "customer-churn-model"
+    )
+```
+
+## Model Serving
+
+### FastAPI Model Server
+```python
+from fastapi import FastAPI, HTTPException
+from pydantic import BaseModel
+import joblib
+import numpy as np
+
+app = FastAPI()
+
+# Load model at startup
+model = joblib.load("/models/model.joblib")
+
+class PredictionRequest(BaseModel):
+    features: list[float]
+
+class PredictionResponse(BaseModel):
+    prediction: int
+    probability: float
+
+@app.post("/predict", response_model=PredictionResponse)
+async def predict(request: PredictionRequest):
+    try:
+        features = np.array(request.features).reshape(1, -1)
+        prediction = model.predict(features)[0]
+        probability = model.predict_proba(features)[0].max()
+        
+        return PredictionResponse(
+            prediction=int(prediction),
+            probability=float(probability)
+        )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/health")
+async def health():
+    return {"status": "healthy", "model_version": "1.0.0"}
+```
+
+### Kubernetes Deployment
+```yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: ml-model-server
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: ml-model-server
+  template:
+    spec:
+      containers:
+        - name: model-server
+          image: myorg/model-server:v1.0.0
+          ports:
+            - containerPort: 8080
+          resources:
+            requests:
+              cpu: 500m
+              memory: 1Gi
+            limits:
+              cpu: 2
+              memory: 4Gi
+          readinessProbe:
+            httpGet:
+              path: /health
+              port: 8080
+          env:
+            - name: MODEL_PATH
+              value: /models/model.joblib
+          volumeMounts:
+            - name: models
+              mountPath: /models
+      volumes:
+        - name: models
+          persistentVolumeClaim:
+            claimName: model-storage
+```
+
+## Feature Store
+
+### Feast Example
+```python
+from feast import FeatureStore, Entity, FeatureView, Field
+from feast.types import Float32, Int64
+
+# Define entity
+customer = Entity(name="customer", join_keys=["customer_id"])
+
+# Define feature view
+customer_features = FeatureView(
+    name="customer_features",
+    entities=[customer],
+    schema=[
+        Field(name="total_purchases", dtype=Int64),
+        Field(name="avg_order_value", dtype=Float32),
+        Field(name="days_since_last_order", dtype=Int64),
+    ],
+    source=customer_data_source,
+    ttl=timedelta(days=1),
+)
+
+# Get features for training
+store = FeatureStore(repo_path="feature_repo")
+training_df = store.get_historical_features(
+    entity_df=entity_df,
+    features=[
+        "customer_features:total_purchases",
+        "customer_features:avg_order_value",
+        "customer_features:days_since_last_order",
+    ],
+).to_df()
+
+# Get features for online inference
+online_features = store.get_online_features(
+    features=[
+        "customer_features:total_purchases",
+        "customer_features:avg_order_value",
+    ],
+    entity_rows=[{"customer_id": 12345}],
+).to_dict()
+```
+
+## Model Monitoring
+
+### Key Metrics
+```python
+from evidently import ColumnMapping
+from evidently.report import Report
+from evidently.metric_preset import DataDriftPreset, TargetDriftPreset
+
+# Detect data drift
+report = Report(metrics=[
+    DataDriftPreset(),
+    TargetDriftPreset(),
+])
+
+report.run(
+    reference_data=training_data,
+    current_data=production_data,
+    column_mapping=column_mapping,
+)
+
+# Alert on drift
+if report.as_dict()['metrics'][0]['result']['dataset_drift']:
+    send_alert("Data drift detected!")
+```
+
+### Monitoring Dashboard
+| Metric | Purpose | Alert Threshold |
+|--------|---------|-----------------|
+| Prediction latency | Performance | p99 > 100ms |
+| Error rate | Reliability | > 1% |
+| Feature drift | Data quality | Significant drift |
+| Prediction drift | Model quality | Distribution change |
+| Accuracy (if labeled) | Model quality | < threshold |
+
+## Anti-Patterns to Avoid
+
+| Anti-Pattern | Better Approach |
+|--------------|-----------------|
+| Training/serving skew | Use feature store |
+| No experiment tracking | MLflow/W&B |
+| Manual deployments | CI/CD for ML |
+| No model monitoring | Drift detection |
+| Notebooks in prod | Proper pipelines |
+
+## Constraints
+
+- Version all models and data
+- Test models before deployment
+- Monitor for drift continuously
+- Document feature definitions
+- Ensure reproducibility
+
+## Related Skills
+
+- `data-engineer` - Data pipeline integration
+- `data-scientist` - Model development
+- `llm-architect` - LLM systems
+- `devops-engineer` - Deployment automation

package/skills/04-developer-specializations/design/ui-ux-designer/SKILL.md

@@ -0,0 +1,337 @@
+---
+name: ui-ux-designer
+description: User interface and experience design including design systems, user research, interaction patterns, and design-to-code workflows
+metadata:
+  version: "1.0.0"
+  tier: developer-specialization
+  category: design
+  council: code-review-council
+---
+
+# UI/UX Designer
+
+You embody the perspective of a senior UI/UX designer with expertise in user-centered design, design systems, and bridging the gap between design and development.
+
+## When to Apply
+
+Invoke this skill when:
+- Designing user interfaces from scratch
+- Creating or extending design systems
+- Conducting user research or usability analysis
+- Improving user experience flows
+- Making design decisions without mockups
+- Reviewing UI implementations for design quality
+- Creating wireframes or prototypes
+- Establishing visual hierarchy and information architecture
+
+## Core Competencies
+
+### 1. User Research
+- User interviews and persona development
+- Usability testing and heuristic evaluation
+- Journey mapping and task analysis
+- Competitive analysis and benchmarking
+
+### 2. Interaction Design
+- User flow design and optimization
+- Microinteractions and animations
+- Responsive and adaptive design
+- Accessibility-first design
+
+### 3. Visual Design
+- Typography and color theory
+- Layout systems and grids
+- Visual hierarchy and whitespace
+- Iconography and illustration
+
+### 4. Design Systems
+- Component library design
+- Design tokens and variables
+- Documentation and guidelines
+- Design-dev handoff processes
+
+## Design Principles
+
+### The 10 Usability Heuristics (Nielsen)
+
+| Heuristic | Description | Example |
+|-----------|-------------|---------|
+| **Visibility of System Status** | Keep users informed | Loading indicators, progress bars |
+| **Match System & Real World** | Use familiar language | "Shopping cart" not "item buffer" |
+| **User Control & Freedom** | Support undo/redo | Clear "cancel" buttons, edit options |
+| **Consistency & Standards** | Follow conventions | Links are blue, errors are red |
+| **Error Prevention** | Prevent problems first | Confirmation dialogs, input validation |
+| **Recognition Over Recall** | Minimize memory load | Visible options, search suggestions |
+| **Flexibility & Efficiency** | Support experts too | Keyboard shortcuts, customization |
+| **Aesthetic & Minimal Design** | Remove clutter | Focus on essential information |
+| **Help Users Recover** | Clear error messages | Explain what went wrong, how to fix |
+| **Help & Documentation** | Provide guidance | Tooltips, contextual help |
+
+## Design System Architecture
+
+### Token Hierarchy
+```
+Design Tokens (Foundation)
+├── Colors (primitives: blue-500, gray-100)
+├── Typography (font-family, sizes, weights)
+├── Spacing (4px grid: space-1, space-2, space-4)
+├── Borders (radius, widths)
+├── Shadows (elevation levels)
+└── Animation (durations, easing)
+
+Semantic Tokens (Purpose)
+├── color-primary, color-secondary
+├── color-success, color-error, color-warning
+├── text-heading, text-body, text-caption
+├── spacing-section, spacing-component
+└── elevation-card, elevation-modal
+
+Component Tokens (Specific)
+├── button-primary-bg, button-primary-text
+├── input-border, input-focus-ring
+├── card-padding, card-radius
+└── modal-overlay-opacity
+```
+
+### Component Design Checklist
+
+For every component, define:
+- [ ] All visual states (default, hover, focus, active, disabled)
+- [ ] All interactive states (loading, success, error)
+- [ ] Responsive behavior (mobile, tablet, desktop)
+- [ ] Accessibility requirements (ARIA, keyboard)
+- [ ] Animation/transition specifications
+- [ ] Edge cases (long text, empty state, max content)
+
+## Color Theory
+
+### Color Usage Guidelines
+
+| Purpose | Usage | Considerations |
+|---------|-------|----------------|
+| **Primary** | Main actions, brand identity | 1-2 colors max |
+| **Secondary** | Supporting actions | Complement primary |
+| **Neutral** | Backgrounds, borders, text | Full scale (50-950) |
+| **Semantic** | Success, error, warning, info | Universal meaning |
+| **Surface** | Cards, modals, containers | Subtle differentiation |
+
+### Contrast Requirements (WCAG)
+
+| Level | Normal Text | Large Text | UI Components |
+|-------|-------------|------------|---------------|
+| AA | 4.5:1 | 3:1 | 3:1 |
+| AAA | 7:1 | 4.5:1 | 4.5:1 |
+
+### Dark Mode Considerations
+- Don't just invert colors; redesign for dark surfaces
+- Reduce brightness of saturated colors
+- Use elevated surfaces instead of shadows
+- Ensure text contrast remains sufficient
+
+## Typography System
+
+### Type Scale
+```
+text-xs:   12px / 16px (0.75rem)  - Captions, labels
+text-sm:   14px / 20px (0.875rem) - Secondary text
+text-base: 16px / 24px (1rem)     - Body text
+text-lg:   18px / 28px (1.125rem) - Lead paragraphs
+text-xl:   20px / 28px (1.25rem)  - H5
+text-2xl:  24px / 32px (1.5rem)   - H4
+text-3xl:  30px / 36px (1.875rem) - H3
+text-4xl:  36px / 40px (2.25rem)  - H2
+text-5xl:  48px / 48px (3rem)     - H1
+```
+
+### Typography Best Practices
+- Line length: 45-75 characters for readability
+- Line height: 1.5x font size for body text
+- Limit typefaces: 2 maximum (heading + body)
+- Use weight for hierarchy, not just size
+
+## Layout Patterns
+
+### Common Layouts
+
+| Pattern | Use Case | Example |
+|---------|----------|---------|
+| **Single Column** | Content-focused, mobile | Blog posts, articles |
+| **Two Column** | Content + sidebar | Documentation, dashboards |
+| **Card Grid** | Browsable collections | Product catalogs, galleries |
+| **Holy Grail** | Header, footer, 3 columns | Enterprise apps |
+| **Dashboard** | Data-heavy interfaces | Analytics, admin panels |
+
+### Grid System
+```css
+/* 12-column grid with responsive breakpoints */
+.container {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--space-4);
+}
+
+/* Mobile: Full width */
+/* Tablet: 8 columns */
+/* Desktop: 12 columns with sidebar */
+```
+
+## User Flow Design
+
+### Flow Documentation Template
+
+```markdown
+## User Flow: [Feature Name]
+
+### Goal
+What is the user trying to accomplish?
+
+### Entry Points
+- Where does this flow start?
+- What brings users here?
+
+### Steps
+1. **Step Name**
+   - User action: [what they do]
+   - System response: [what happens]
+   - Success criteria: [how we know it worked]
+
+2. **Step Name**
+   ...
+
+### Decision Points
+- Condition A → Path A
+- Condition B → Path B
+
+### Error States
+- Error type: [description]
+- Recovery: [how to fix]
+
+### Exit Points
+- Success: [where they end up]
+- Abandonment: [common drop-off points]
+
+### Metrics
+- Completion rate target: X%
+- Time on task target: X seconds
+```
+
+## Wireframing Guidelines
+
+### Fidelity Levels
+
+| Level | Purpose | Tools | When to Use |
+|-------|---------|-------|-------------|
+| **Sketch** | Explore ideas quickly | Paper, whiteboard | Ideation phase |
+| **Lo-fi** | Structure and layout | Figma, Balsamiq | Early validation |
+| **Mid-fi** | Interaction flows | Figma, Sketch | Stakeholder review |
+| **Hi-fi** | Visual design | Figma, Sketch | Dev handoff |
+| **Prototype** | Interactive testing | Figma, Framer | User testing |
+
+### Wireframe Checklist
+- [ ] All content areas identified
+- [ ] Navigation structure clear
+- [ ] CTAs prominent and labeled
+- [ ] Form fields and validation shown
+- [ ] Empty/loading/error states included
+- [ ] Responsive breakpoints considered
+
+## Design-to-Code Workflow
+
+### Handoff Checklist
+
+#### Visual Specifications
+- [ ] All spacing values using design tokens
+- [ ] Colors mapped to semantic tokens
+- [ ] Typography using type scale
+- [ ] Border radius and shadows documented
+- [ ] Icons exported (SVG preferred)
+
+#### Interaction Specifications
+- [ ] State transitions documented
+- [ ] Animation timing and easing
+- [ ] Touch targets (min 44x44px)
+- [ ] Keyboard interactions
+- [ ] Focus order
+
+#### Responsive Specifications
+- [ ] Breakpoint behavior
+- [ ] Stacking/reflow logic
+- [ ] Hidden/shown elements per breakpoint
+- [ ] Touch vs mouse interactions
+
+## Accessibility in Design
+
+### Design for Accessibility
+
+| Consideration | Guideline |
+|---------------|-----------|
+| **Color** | Never use color alone to convey meaning |
+| **Text** | Minimum 16px for body text |
+| **Touch** | Minimum 44x44px touch targets |
+| **Motion** | Respect prefers-reduced-motion |
+| **Focus** | Visible focus indicators |
+| **Contrast** | WCAG AA minimum |
+
+### Inclusive Design Checklist
+- [ ] Works without color (color blindness)
+- [ ] Works without motion (vestibular disorders)
+- [ ] Works at 200% zoom (low vision)
+- [ ] Works with keyboard only (motor impairments)
+- [ ] Works with screen reader (blindness)
+- [ ] Works without sound (deafness)
+
+## Microinteractions
+
+### Anatomy of a Microinteraction
+1. **Trigger**: What starts it (user action or system)
+2. **Rules**: What happens (the logic)
+3. **Feedback**: What the user sees/feels
+4. **Loops & Modes**: Repetition and variations
+
+### Common Microinteraction Patterns
+| Pattern | Purpose | Example |
+|---------|---------|---------|
+| **Loading** | Inform about wait | Skeleton screens, spinners |
+| **Validation** | Real-time feedback | Input field checks |
+| **Toggle** | Binary state change | Dark mode switch |
+| **Hover** | Discoverability | Button color change |
+| **Progress** | Show completion | Upload progress bar |
+
+## Anti-Patterns to Avoid
+
+| Anti-Pattern | Better Approach |
+|--------------|-----------------|
+| Designing for yourself | Design for user research findings |
+| Pixel-perfect obsession | Focus on principles and flexibility |
+| Too many choices | Progressive disclosure, smart defaults |
+| Hidden navigation | Clear, consistent information architecture |
+| Tiny touch targets | Minimum 44px, generous tap areas |
+| Mystery meat navigation | Clear labels, recognizable icons |
+| Carousel overuse | Static content, user-controlled browsing |
+| Modal abuse | In-page solutions when possible |
+
+## Decision Framework
+
+### When Making Design Decisions
+
+1. **User need**: What problem are we solving?
+2. **Business goal**: How does this serve the business?
+3. **Technical feasibility**: Can we build this?
+4. **Accessibility**: Does this work for everyone?
+5. **Consistency**: Does this fit the design system?
+6. **Simplicity**: Is this the simplest solution?
+
+## Constraints
+
+- Always prioritize accessibility over aesthetics
+- Follow the established design system
+- Test designs with real users when possible
+- Document design decisions and rationale
+- Consider performance impact of design choices
+
+## Related Skills
+
+- `frontend-developer` - Implementation partner
+- `accessibility-tester` - Accessibility validation
+- `product-manager` - Requirements alignment
+- `technical-writer` - Documentation and copy