mindforge-cc 10.0.2 → 10.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.mindforge/config.json +73 -2
- package/.mindforge/engine/autonomous/cross-iteration-bridge.md +96 -0
- package/.mindforge/engine/cost-tracking/budget-enforcer.md +68 -0
- package/.mindforge/engine/cost-tracking/router.md +58 -0
- package/.mindforge/engine/cost-tracking/token-ledger.md +77 -0
- package/.mindforge/engine/council/council-protocol.md +96 -0
- package/.mindforge/engine/council/council-templates.md +85 -0
- package/.mindforge/engine/council/synthesis-engine.md +71 -0
- package/.mindforge/engine/cross-model-eval.md +74 -0
- package/.mindforge/engine/instincts/capture-engine.md +63 -0
- package/.mindforge/engine/instincts/instinct-schema.md +76 -0
- package/.mindforge/engine/instincts/promotion-engine.md +77 -0
- package/.mindforge/engine/proactive/signal-detector.md +60 -0
- package/.mindforge/engine/proactive/suggestion-engine.md +100 -0
- package/.mindforge/engine/skills/composition.md +83 -0
- package/.mindforge/engine/skills/loader.md +16 -0
- package/.mindforge/personas/agent-architect.md +57 -0
- package/.mindforge/personas/agent-evaluator.md +162 -0
- package/.mindforge/personas/agent-memory-designer.md +157 -0
- package/.mindforge/personas/agent-ops-engineer.md +120 -0
- package/.mindforge/personas/agent-orchestrator.md +112 -0
- package/.mindforge/personas/ai-economist.md +57 -0
- package/.mindforge/personas/ai-safety-engineer.md +57 -0
- package/.mindforge/personas/analytics-engineer.md +57 -0
- package/.mindforge/personas/anti-pattern-hunter.md +61 -0
- package/.mindforge/personas/api-gateway-designer.md +132 -0
- package/.mindforge/personas/auth-engineer.md +112 -0
- package/.mindforge/personas/build-engineer.md +57 -0
- package/.mindforge/personas/business-analyst.md +56 -0
- package/.mindforge/personas/cache-architect.md +100 -0
- package/.mindforge/personas/causal-scientist.md +57 -0
- package/.mindforge/personas/cdn-architect.md +118 -0
- package/.mindforge/personas/change-agent.md +104 -0
- package/.mindforge/personas/code-narrator.md +52 -0
- package/.mindforge/personas/codegen-specialist.md +68 -0
- package/.mindforge/personas/communication-architect.md +102 -0
- package/.mindforge/personas/compliance-engineer.md +96 -0
- package/.mindforge/personas/consensus-engineer.md +116 -0
- package/.mindforge/personas/contract-tester.md +60 -192
- package/.mindforge/personas/cost-optimizer.md +71 -0
- package/.mindforge/personas/council-architect.md +66 -0
- package/.mindforge/personas/council-critic.md +67 -0
- package/.mindforge/personas/council-pragmatist.md +71 -0
- package/.mindforge/personas/council-skeptic.md +73 -0
- package/.mindforge/personas/data-architect.md +108 -0
- package/.mindforge/personas/data-mesh-architect.md +57 -0
- package/.mindforge/personas/data-pipeline-architect.md +120 -0
- package/.mindforge/personas/de-sloppifier.md +60 -0
- package/.mindforge/personas/debt-manager.md +66 -0
- package/.mindforge/personas/decision-architect.md +82 -51
- package/.mindforge/personas/deployment-captain.md +74 -0
- package/.mindforge/personas/design-system-lead.md +112 -0
- package/.mindforge/personas/dmux-orchestrator.md +75 -0
- package/.mindforge/personas/doc-auditor.md +84 -0
- package/.mindforge/personas/dx-engineer.md +96 -0
- package/.mindforge/personas/ecommerce-engineer.md +57 -0
- package/.mindforge/personas/edge-engineer.md +94 -0
- package/.mindforge/personas/edtech-architect.md +106 -0
- package/.mindforge/personas/embedding-architect.md +57 -0
- package/.mindforge/personas/environment-engineer.md +57 -0
- package/.mindforge/personas/eval-judge.md +55 -0
- package/.mindforge/personas/event-architect.md +102 -0
- package/.mindforge/personas/experiment-designer.md +138 -0
- package/.mindforge/personas/feature-store-engineer.md +57 -0
- package/.mindforge/personas/finops-analyst.md +66 -0
- package/.mindforge/personas/fintech-architect.md +57 -0
- package/.mindforge/personas/flutter-engineer.md +104 -0
- package/.mindforge/personas/gaming-engineer.md +57 -0
- package/.mindforge/personas/graphql-designer.md +73 -0
- package/.mindforge/personas/healthcare-engineer.md +57 -0
- package/.mindforge/personas/hiring-strategist.md +105 -0
- package/.mindforge/personas/hitl-architect.md +165 -0
- package/.mindforge/personas/i18n-architect.md +69 -0
- package/.mindforge/personas/instinct-curator.md +83 -0
- package/.mindforge/personas/iot-architect.md +105 -0
- package/.mindforge/personas/knowledge-curator.md +139 -0
- package/.mindforge/personas/knowledge-engineer.md +57 -0
- package/.mindforge/personas/lakehouse-architect.md +57 -0
- package/.mindforge/personas/llm-orchestrator.md +57 -0
- package/.mindforge/personas/logistics-architect.md +106 -0
- package/.mindforge/personas/market-analyst.md +53 -0
- package/.mindforge/personas/marketplace-engineer.md +105 -0
- package/.mindforge/personas/mcp-designer.md +54 -0
- package/.mindforge/personas/meeting-designer.md +104 -0
- package/.mindforge/personas/mentorship-lead.md +106 -0
- package/.mindforge/personas/migration-architect.md +57 -0
- package/.mindforge/personas/ml-ops-engineer.md +101 -0
- package/.mindforge/personas/mobile-architect.md +105 -0
- package/.mindforge/personas/mobile-security-engineer.md +106 -0
- package/.mindforge/personas/multi-model-bridge.md +86 -0
- package/.mindforge/personas/multi-tenancy-architect.md +71 -0
- package/.mindforge/personas/multimodal-engineer.md +57 -0
- package/.mindforge/personas/offline-specialist.md +105 -0
- package/.mindforge/personas/onboarding-navigator.md +63 -0
- package/.mindforge/personas/payments-engineer.md +135 -0
- package/.mindforge/personas/pipeline-engineer.md +115 -0
- package/.mindforge/personas/platform-engineer.md +97 -0
- package/.mindforge/personas/platform-lead.md +57 -0
- package/.mindforge/personas/privacy-engineer.md +57 -0
- package/.mindforge/personas/product-owner.md +56 -0
- package/.mindforge/personas/productivity-analyst.md +57 -0
- package/.mindforge/personas/prompt-architect.md +101 -0
- package/.mindforge/personas/proofreader.md +53 -0
- package/.mindforge/personas/pwa-architect.md +105 -0
- package/.mindforge/personas/quality-scorer.md +63 -0
- package/.mindforge/personas/react-native-engineer.md +106 -0
- package/.mindforge/personas/resilience-engineer.md +69 -0
- package/.mindforge/personas/rfc-architect.md +64 -0
- package/.mindforge/personas/saga-orchestrator.md +80 -0
- package/.mindforge/personas/secrets-engineer.md +57 -0
- package/.mindforge/personas/skill-smith.md +79 -0
- package/.mindforge/personas/sre-lead.md +107 -0
- package/.mindforge/personas/stream-engineer.md +57 -0
- package/.mindforge/personas/streaming-engineer.md +64 -0
- package/.mindforge/personas/swarm-templates.json +695 -38
- package/.mindforge/personas/system-designer.md +57 -0
- package/.mindforge/personas/team-coach.md +120 -0
- package/.mindforge/personas/tech-lead-coach.md +103 -0
- package/.mindforge/personas/technical-writer-lead.md +111 -0
- package/.mindforge/personas/threat-modeler.md +82 -0
- package/.mindforge/personas/vibe-checker.md +75 -0
- package/.mindforge/personas/worktree-manager.md +56 -0
- package/.mindforge/personas/zero-trust-engineer.md +113 -0
- package/.mindforge/skills/a11y-testing/SKILL.md +143 -0
- package/.mindforge/skills/agent-evaluation-framework/SKILL.md +227 -0
- package/.mindforge/skills/agent-introspection-debugging/SKILL.md +88 -0
- package/.mindforge/skills/agent-loops/SKILL.md +84 -0
- package/.mindforge/skills/agent-memory-design/SKILL.md +199 -0
- package/.mindforge/skills/agent-orchestration-patterns/SKILL.md +129 -0
- package/.mindforge/skills/agent-tool-selection/SKILL.md +204 -0
- package/.mindforge/skills/ai-agent-deployment/SKILL.md +176 -0
- package/.mindforge/skills/ai-cost-management/SKILL.md +57 -0
- package/.mindforge/skills/ai-safety-alignment/SKILL.md +53 -0
- package/.mindforge/skills/analytics-instrumentation/SKILL.md +172 -0
- package/.mindforge/skills/api-gateway-patterns/SKILL.md +177 -0
- package/.mindforge/skills/api-marketplace/SKILL.md +56 -0
- package/.mindforge/skills/api-versioning/SKILL.md +100 -0
- package/.mindforge/skills/app-store-deployment/SKILL.md +44 -0
- package/.mindforge/skills/architecture-tradeoff-analysis/SKILL.md +97 -0
- package/.mindforge/skills/audit-logging/SKILL.md +140 -0
- package/.mindforge/skills/auth-patterns/SKILL.md +148 -0
- package/.mindforge/skills/autonomous-agent-harness/SKILL.md +218 -0
- package/.mindforge/skills/autonomous-agents/SKILL.md +59 -0
- package/.mindforge/skills/autonomous-loops/SKILL.md +105 -0
- package/.mindforge/skills/build-system-optimization/SKILL.md +54 -0
- package/.mindforge/skills/build-vs-buy/SKILL.md +80 -0
- package/.mindforge/skills/bundle-optimization/SKILL.md +174 -0
- package/.mindforge/skills/business-analyst/SKILL.md +82 -0
- package/.mindforge/skills/caching-strategies/SKILL.md +132 -0
- package/.mindforge/skills/capacity-planning/SKILL.md +96 -0
- package/.mindforge/skills/causal-inference/SKILL.md +42 -0
- package/.mindforge/skills/cdn-optimization/SKILL.md +212 -0
- package/.mindforge/skills/change-management/SKILL.md +106 -0
- package/.mindforge/skills/chaos-engineering/SKILL.md +99 -0
- package/.mindforge/skills/ci-cd-pipeline/SKILL.md +118 -0
- package/.mindforge/skills/cli-design/SKILL.md +118 -0
- package/.mindforge/skills/code-generation-patterns/SKILL.md +92 -0
- package/.mindforge/skills/code-review-methodology/SKILL.md +180 -0
- package/.mindforge/skills/code-tour/SKILL.md +145 -0
- package/.mindforge/skills/codebase-onboarding/SKILL.md +95 -0
- package/.mindforge/skills/compliance-as-code/SKILL.md +195 -0
- package/.mindforge/skills/conflict-resolution/SKILL.md +87 -0
- package/.mindforge/skills/connection-pooling/SKILL.md +151 -0
- package/.mindforge/skills/container-security/SKILL.md +151 -0
- package/.mindforge/skills/context-engineering/SKILL.md +114 -0
- package/.mindforge/skills/continuous-learning/SKILL.md +84 -0
- package/.mindforge/skills/contract-testing/SKILL.md +85 -0
- package/.mindforge/skills/cost-aware-routing/SKILL.md +83 -0
- package/.mindforge/skills/cost-estimation/SKILL.md +82 -0
- package/.mindforge/skills/council/SKILL.md +68 -0
- package/.mindforge/skills/cqrs-event-sourcing/SKILL.md +95 -0
- package/.mindforge/skills/cross-platform-testing/SKILL.md +43 -0
- package/.mindforge/skills/data-governance/SKILL.md +42 -0
- package/.mindforge/skills/data-lakehouse/SKILL.md +42 -0
- package/.mindforge/skills/data-mesh/SKILL.md +42 -0
- package/.mindforge/skills/data-modeling/SKILL.md +107 -0
- package/.mindforge/skills/data-pipeline-design/SKILL.md +171 -0
- package/.mindforge/skills/data-privacy-engineering/SKILL.md +42 -0
- package/.mindforge/skills/database-performance/SKILL.md +174 -0
- package/.mindforge/skills/database-sharding-advanced/SKILL.md +206 -0
- package/.mindforge/skills/de-sloppify/SKILL.md +120 -0
- package/.mindforge/skills/defense-in-depth/SKILL.md +84 -0
- package/.mindforge/skills/delegation-patterns/SKILL.md +123 -0
- package/.mindforge/skills/dependency-management/SKILL.md +94 -0
- package/.mindforge/skills/deployment-workflow/SKILL.md +135 -0
- package/.mindforge/skills/design-system/SKILL.md +113 -0
- package/.mindforge/skills/developer-onboarding/SKILL.md +99 -0
- package/.mindforge/skills/developer-productivity-metrics/SKILL.md +59 -0
- package/.mindforge/skills/distributed-consensus/SKILL.md +141 -0
- package/.mindforge/skills/dmux-workflows/SKILL.md +141 -0
- package/.mindforge/skills/dns-architecture/SKILL.md +167 -0
- package/.mindforge/skills/doc-health-audit/SKILL.md +102 -0
- package/.mindforge/skills/ecommerce-architecture/SKILL.md +41 -0
- package/.mindforge/skills/edge-computing/SKILL.md +91 -0
- package/.mindforge/skills/edtech-platform/SKILL.md +41 -0
- package/.mindforge/skills/email-deliverability/SKILL.md +177 -0
- package/.mindforge/skills/embedding-systems/SKILL.md +55 -0
- package/.mindforge/skills/environment-management/SKILL.md +54 -0
- package/.mindforge/skills/error-handling-architecture/SKILL.md +118 -0
- package/.mindforge/skills/estimation-techniques/SKILL.md +113 -0
- package/.mindforge/skills/eval-harness/SKILL.md +180 -0
- package/.mindforge/skills/event-driven-architecture/SKILL.md +162 -0
- package/.mindforge/skills/experiment-design/SKILL.md +139 -0
- package/.mindforge/skills/experiment-platform/SKILL.md +43 -0
- package/.mindforge/skills/feature-engineering/SKILL.md +42 -0
- package/.mindforge/skills/feature-flag-management/SKILL.md +183 -0
- package/.mindforge/skills/fine-tuning-workflow/SKILL.md +189 -0
- package/.mindforge/skills/fintech-patterns/SKILL.md +41 -0
- package/.mindforge/skills/flutter-architecture/SKILL.md +42 -0
- package/.mindforge/skills/gaming-backend/SKILL.md +41 -0
- package/.mindforge/skills/git-workflow-design/SKILL.md +129 -0
- package/.mindforge/skills/graceful-degradation/SKILL.md +95 -0
- package/.mindforge/skills/graphql-patterns/SKILL.md +243 -0
- package/.mindforge/skills/guardrails-and-safety/SKILL.md +137 -0
- package/.mindforge/skills/healthcare-systems/SKILL.md +40 -0
- package/.mindforge/skills/hiring-engineering/SKILL.md +119 -0
- package/.mindforge/skills/human-in-the-loop-design/SKILL.md +234 -0
- package/.mindforge/skills/i18n-architecture/SKILL.md +147 -0
- package/.mindforge/skills/idempotency-patterns/SKILL.md +84 -0
- package/.mindforge/skills/incident-communication/SKILL.md +96 -0
- package/.mindforge/skills/incident-management/SKILL.md +97 -0
- package/.mindforge/skills/infrastructure-as-code/SKILL.md +98 -0
- package/.mindforge/skills/instinct-clustering/SKILL.md +190 -0
- package/.mindforge/skills/internal-developer-platform/SKILL.md +51 -0
- package/.mindforge/skills/iot-platform/SKILL.md +41 -0
- package/.mindforge/skills/k8s-deployment/SKILL.md +358 -0
- package/.mindforge/skills/knowledge-graphs/SKILL.md +56 -0
- package/.mindforge/skills/knowledge-sharing-systems/SKILL.md +112 -0
- package/.mindforge/skills/llm-cost-optimization/SKILL.md +198 -0
- package/.mindforge/skills/llm-orchestration/SKILL.md +56 -0
- package/.mindforge/skills/load-testing/SKILL.md +84 -0
- package/.mindforge/skills/logistics-optimization/SKILL.md +40 -0
- package/.mindforge/skills/market-researcher/SKILL.md +99 -0
- package/.mindforge/skills/marketplace-trust/SKILL.md +40 -0
- package/.mindforge/skills/mcp-server-patterns/SKILL.md +264 -0
- package/.mindforge/skills/media-streaming/SKILL.md +41 -0
- package/.mindforge/skills/meeting-architecture/SKILL.md +146 -0
- package/.mindforge/skills/mentoring-patterns/SKILL.md +77 -0
- package/.mindforge/skills/microservices-patterns/SKILL.md +83 -0
- package/.mindforge/skills/migration-platform/SKILL.md +61 -0
- package/.mindforge/skills/migration-strategies/SKILL.md +129 -0
- package/.mindforge/skills/ml-feature-store/SKILL.md +56 -0
- package/.mindforge/skills/ml-monitoring/SKILL.md +42 -0
- package/.mindforge/skills/mobile-performance/SKILL.md +44 -0
- package/.mindforge/skills/mobile-security/SKILL.md +45 -0
- package/.mindforge/skills/model-evaluation/SKILL.md +53 -0
- package/.mindforge/skills/monorepo-management/SKILL.md +100 -0
- package/.mindforge/skills/multi-llm-consult/SKILL.md +75 -0
- package/.mindforge/skills/multi-tenancy-patterns/SKILL.md +145 -0
- package/.mindforge/skills/multi-turn-conversation-design/SKILL.md +206 -0
- package/.mindforge/skills/multimodal-ai/SKILL.md +51 -0
- package/.mindforge/skills/mutation-testing/SKILL.md +97 -0
- package/.mindforge/skills/notification-system-design/SKILL.md +168 -0
- package/.mindforge/skills/observability-stack/SKILL.md +136 -0
- package/.mindforge/skills/offline-first-design/SKILL.md +43 -0
- package/.mindforge/skills/on-call-design/SKILL.md +111 -0
- package/.mindforge/skills/pagination-patterns/SKILL.md +230 -0
- package/.mindforge/skills/payment-integration/SKILL.md +176 -0
- package/.mindforge/skills/performance-reviews/SKILL.md +140 -0
- package/.mindforge/skills/platform-observability/SKILL.md +58 -0
- package/.mindforge/skills/platform-reliability/SKILL.md +52 -0
- package/.mindforge/skills/post-incident-learning/SKILL.md +96 -0
- package/.mindforge/skills/product-manager/SKILL.md +104 -0
- package/.mindforge/skills/progressive-web-app/SKILL.md +44 -0
- package/.mindforge/skills/prompt-engineering/SKILL.md +94 -0
- package/.mindforge/skills/proofreader/SKILL.md +158 -0
- package/.mindforge/skills/push-notification-architecture/SKILL.md +45 -0
- package/.mindforge/skills/python-performance/SKILL.md +183 -0
- package/.mindforge/skills/quality-audit/SKILL.md +171 -0
- package/.mindforge/skills/queue-design/SKILL.md +85 -0
- package/.mindforge/skills/rag-architecture/SKILL.md +176 -0
- package/.mindforge/skills/rate-limiting-design/SKILL.md +94 -0
- package/.mindforge/skills/react-native-patterns/SKILL.md +42 -0
- package/.mindforge/skills/react-performance/SKILL.md +229 -0
- package/.mindforge/skills/real-time-analytics/SKILL.md +42 -0
- package/.mindforge/skills/real-time-sync/SKILL.md +83 -0
- package/.mindforge/skills/responsive-native/SKILL.md +44 -0
- package/.mindforge/skills/responsive-patterns/SKILL.md +141 -0
- package/.mindforge/skills/rfc-pipeline/SKILL.md +114 -0
- package/.mindforge/skills/saas-multi-tenant/SKILL.md +41 -0
- package/.mindforge/skills/santa-method/SKILL.md +134 -0
- package/.mindforge/skills/search-implementation/SKILL.md +98 -0
- package/.mindforge/skills/secrets-platform/SKILL.md +56 -0
- package/.mindforge/skills/secrets-rotation/SKILL.md +173 -0
- package/.mindforge/skills/self-serve-infrastructure/SKILL.md +51 -0
- package/.mindforge/skills/serverless-patterns/SKILL.md +119 -0
- package/.mindforge/skills/skill-creator-meta/SKILL.md +146 -0
- package/.mindforge/skills/sprint-retrospective-facilitation/SKILL.md +112 -0
- package/.mindforge/skills/stakeholder-communication/SKILL.md +85 -0
- package/.mindforge/skills/state-management/SKILL.md +104 -0
- package/.mindforge/skills/stream-processing/SKILL.md +43 -0
- package/.mindforge/skills/streaming-architecture/SKILL.md +81 -0
- package/.mindforge/skills/supply-chain-security/SKILL.md +145 -0
- package/.mindforge/skills/synthetic-data-generation/SKILL.md +52 -0
- package/.mindforge/skills/system-design/SKILL.md +88 -0
- package/.mindforge/skills/team-topology-design/SKILL.md +107 -0
- package/.mindforge/skills/technical-debt-management/SKILL.md +86 -0
- package/.mindforge/skills/technical-interview-design/SKILL.md +98 -0
- package/.mindforge/skills/technical-leadership/SKILL.md +75 -0
- package/.mindforge/skills/technical-writing/SKILL.md +237 -0
- package/.mindforge/skills/technology-radar/SKILL.md +88 -0
- package/.mindforge/skills/testing-anti-patterns/SKILL.md +288 -0
- package/.mindforge/skills/threat-modeling/SKILL.md +109 -0
- package/.mindforge/skills/tool-design/SKILL.md +138 -0
- package/.mindforge/skills/typescript-advanced/SKILL.md +198 -0
- package/.mindforge/skills/using-git-worktrees/SKILL.md +139 -0
- package/.mindforge/skills/verification-loop/SKILL.md +97 -0
- package/.mindforge/skills/vibe-security/SKILL.md +165 -0
- package/.mindforge/skills/visual-regression-testing/SKILL.md +97 -0
- package/.mindforge/skills/websocket-patterns/SKILL.md +203 -0
- package/.mindforge/skills/writing-plans/SKILL.md +170 -0
- package/.mindforge/skills/writing-skills/SKILL.md +216 -0
- package/.mindforge/skills/zero-trust-architecture/SKILL.md +166 -0
- package/CHANGELOG.md +195 -0
- package/MINDFORGE.md +4 -4
- package/README.md +2 -2
- package/RELEASENOTES.md +66 -0
- package/bin/installer-core.js +1 -1
- package/bin/wizard/theme.js +2 -2
- package/docs/commands-reference.md +18 -1
- package/package.json +2 -2
- package/.mindforge/personas/data-privacy-engineer.md +0 -187
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: react-performance
|
|
3
|
+
version: 1.0.0
|
|
4
|
+
min_mindforge_version: 10.0.6
|
|
5
|
+
status: stable
|
|
6
|
+
triggers: react performance, React.memo, useMemo pattern, useCallback pattern, react code splitting, react lazy loading, virtualization, bundle analysis, react profiler, render optimization, unnecessary re-render, react bundle size
|
|
7
|
+
compose: performance
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# Skill — React Performance
|
|
11
|
+
|
|
12
|
+
## When this skill activates
|
|
13
|
+
Any task involving React application performance: reducing unnecessary re-renders,
|
|
14
|
+
optimizing bundle size, implementing code splitting, virtualizing long lists,
|
|
15
|
+
profiling component render times, or improving Core Web Vitals in React apps.
|
|
16
|
+
|
|
17
|
+
## Mandatory actions when this skill is active
|
|
18
|
+
|
|
19
|
+
### Before writing any code
|
|
20
|
+
1. **Identify the performance problem with measurement.** Do not guess.
|
|
21
|
+
- Use React DevTools Profiler to record interactions and identify slow renders.
|
|
22
|
+
- Use the browser Performance tab to measure paint times and long tasks.
|
|
23
|
+
- Use `webpack-bundle-analyzer` or `@next/bundle-analyzer` to identify large chunks.
|
|
24
|
+
2. Determine the category of problem:
|
|
25
|
+
- Unnecessary re-renders (component renders without visual change)
|
|
26
|
+
- Large bundle size (initial JS payload too big)
|
|
27
|
+
- Long lists without virtualization (DOM thrashing)
|
|
28
|
+
- Expensive computations on every render
|
|
29
|
+
- Layout thrashing (forced synchronous reflows)
|
|
30
|
+
3. Set a measurable target before optimizing:
|
|
31
|
+
- LCP target (e.g., < 2.5s)
|
|
32
|
+
- Bundle size budget (e.g., initial JS < 200KB gzipped)
|
|
33
|
+
- Interaction latency (e.g., click-to-render < 100ms)
|
|
34
|
+
|
|
35
|
+
### During implementation
|
|
36
|
+
|
|
37
|
+
#### Identifying Re-renders
|
|
38
|
+
- Install `@welldone-software/why-did-you-render` in development:
|
|
39
|
+
```typescript
|
|
40
|
+
// wdyr.ts (import before React)
|
|
41
|
+
import React from "react";
|
|
42
|
+
if (process.env.NODE_ENV === "development") {
|
|
43
|
+
const whyDidYouRender = require("@welldone-software/why-did-you-render");
|
|
44
|
+
whyDidYouRender(React, { trackAllPureComponents: true });
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
- Use React DevTools Profiler "Highlight updates" to visually see which components re-render.
|
|
48
|
+
- A re-render is wasteful ONLY if:
|
|
49
|
+
1. The component's output is identical to the previous render, AND
|
|
50
|
+
2. The render takes meaningful time (> 1ms measured in Profiler).
|
|
51
|
+
|
|
52
|
+
#### React.memo
|
|
53
|
+
- **When to use**: Component receives the same props frequently AND its render is expensive (> 5ms).
|
|
54
|
+
- **When NOT to use**: Simple components (< 1ms render), components that always receive new props.
|
|
55
|
+
- Implementation pattern:
|
|
56
|
+
```typescript
|
|
57
|
+
const ExpensiveList = React.memo(function ExpensiveList({ items, onSelect }: Props) {
|
|
58
|
+
// expensive render logic
|
|
59
|
+
return <ul>{items.map(item => <ListItem key={item.id} item={item} onSelect={onSelect} />)}</ul>;
|
|
60
|
+
});
|
|
61
|
+
```
|
|
62
|
+
- Custom comparison for complex props:
|
|
63
|
+
```typescript
|
|
64
|
+
const MemoizedChart = React.memo(ChartComponent, (prev, next) => {
|
|
65
|
+
return prev.data.length === next.data.length
|
|
66
|
+
&& prev.data[0]?.id === next.data[0]?.id;
|
|
67
|
+
});
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
#### useMemo and useCallback
|
|
71
|
+
- **Rule**: Do NOT add these by default. Add them ONLY when profiling shows a problem.
|
|
72
|
+
- **useMemo** — use when:
|
|
73
|
+
- Computing derived data that is expensive (> 1ms) on every render
|
|
74
|
+
- Passing a computed object/array to a memoized child (reference stability)
|
|
75
|
+
```typescript
|
|
76
|
+
const sortedItems = useMemo(
|
|
77
|
+
() => items.toSorted((a, b) => a.name.localeCompare(b.name)),
|
|
78
|
+
[items]
|
|
79
|
+
);
|
|
80
|
+
```
|
|
81
|
+
- **useCallback** — use when:
|
|
82
|
+
- Passing a callback to a memoized child component
|
|
83
|
+
- The callback is used as a dependency in a child's useEffect
|
|
84
|
+
```typescript
|
|
85
|
+
const handleSelect = useCallback((id: string) => {
|
|
86
|
+
setSelected(id);
|
|
87
|
+
}, []);
|
|
88
|
+
```
|
|
89
|
+
- **Never use for**: Simple event handlers on non-memoized elements, values that change every render anyway.
|
|
90
|
+
|
|
91
|
+
#### Code Splitting
|
|
92
|
+
- Split at the route level (every page is a separate chunk):
|
|
93
|
+
```typescript
|
|
94
|
+
const Dashboard = lazy(() => import("./pages/Dashboard"));
|
|
95
|
+
const Settings = lazy(() => import("./pages/Settings"));
|
|
96
|
+
|
|
97
|
+
function App() {
|
|
98
|
+
return (
|
|
99
|
+
<Suspense fallback={<PageSkeleton />}>
|
|
100
|
+
<Routes>
|
|
101
|
+
<Route path="/dashboard" element={<Dashboard />} />
|
|
102
|
+
<Route path="/settings" element={<Settings />} />
|
|
103
|
+
</Routes>
|
|
104
|
+
</Suspense>
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
- Split heavy libraries used in specific features:
|
|
109
|
+
```typescript
|
|
110
|
+
const ChartModule = lazy(() => import("./components/ChartModule"));
|
|
111
|
+
// Only loaded when user navigates to analytics
|
|
112
|
+
```
|
|
113
|
+
- Use named webpack chunks for debugging: `import(/* webpackChunkName: "chart" */ "./Chart")`.
|
|
114
|
+
- Prefetch likely-next routes on hover/focus:
|
|
115
|
+
```typescript
|
|
116
|
+
const prefetchDashboard = () => import("./pages/Dashboard");
|
|
117
|
+
<Link onMouseEnter={prefetchDashboard} to="/dashboard">Dashboard</Link>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
#### Virtualization (Long Lists)
|
|
121
|
+
- Use virtualization when rendering > 50 items in a scrollable container.
|
|
122
|
+
- Libraries: `@tanstack/react-virtual` (recommended), `react-window`, `react-virtuoso`.
|
|
123
|
+
- Implementation pattern:
|
|
124
|
+
```typescript
|
|
125
|
+
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
126
|
+
|
|
127
|
+
function VirtualList({ items }: { items: Item[] }) {
|
|
128
|
+
const parentRef = useRef<HTMLDivElement>(null);
|
|
129
|
+
const virtualizer = useVirtualizer({
|
|
130
|
+
count: items.length,
|
|
131
|
+
getScrollElement: () => parentRef.current,
|
|
132
|
+
estimateSize: () => 48, // estimated row height in px
|
|
133
|
+
overscan: 5, // render 5 extra items above/below viewport
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
return (
|
|
137
|
+
<div ref={parentRef} style={{ height: "600px", overflow: "auto" }}>
|
|
138
|
+
<div style={{ height: `${virtualizer.getTotalSize()}px`, position: "relative" }}>
|
|
139
|
+
{virtualizer.getVirtualItems().map(virtualRow => (
|
|
140
|
+
<div
|
|
141
|
+
key={virtualRow.key}
|
|
142
|
+
style={{
|
|
143
|
+
position: "absolute",
|
|
144
|
+
top: 0,
|
|
145
|
+
transform: `translateY(${virtualRow.start}px)`,
|
|
146
|
+
height: `${virtualRow.size}px`,
|
|
147
|
+
width: "100%",
|
|
148
|
+
}}
|
|
149
|
+
>
|
|
150
|
+
<ListRow item={items[virtualRow.index]} />
|
|
151
|
+
</div>
|
|
152
|
+
))}
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
```
|
|
158
|
+
- For grids, use the grid virtualizer variant.
|
|
159
|
+
- Always provide `estimateSize` close to actual size to avoid layout jumps.
|
|
160
|
+
|
|
161
|
+
#### Bundle Analysis
|
|
162
|
+
- Generate and inspect the bundle:
|
|
163
|
+
```bash
|
|
164
|
+
# Next.js
|
|
165
|
+
ANALYZE=true next build
|
|
166
|
+
|
|
167
|
+
# Vite
|
|
168
|
+
npx vite-bundle-visualizer
|
|
169
|
+
|
|
170
|
+
# Webpack
|
|
171
|
+
npx webpack --profile --json > stats.json
|
|
172
|
+
npx webpack-bundle-analyzer stats.json
|
|
173
|
+
```
|
|
174
|
+
- Common wins:
|
|
175
|
+
- Replace `moment` with `date-fns` or `dayjs` (save ~200KB).
|
|
176
|
+
- Replace `lodash` with individual imports: `import groupBy from "lodash/groupBy"`.
|
|
177
|
+
- Use dynamic import for heavy deps used in one feature (chart libs, PDF generators).
|
|
178
|
+
- Ensure tree-shaking: use ESM imports, check `sideEffects` in package.json.
|
|
179
|
+
- Remove unused dependencies: `npx depcheck`.
|
|
180
|
+
|
|
181
|
+
#### Image Optimization
|
|
182
|
+
- Use `next/image` (Next.js) or manual `<img loading="lazy" decoding="async">`.
|
|
183
|
+
- Serve WebP/AVIF with `<picture>` fallback for older browsers.
|
|
184
|
+
- Always specify `width` and `height` to prevent CLS.
|
|
185
|
+
- Use responsive `srcset` for different viewport sizes.
|
|
186
|
+
- Lazy load images below the fold; eager load the LCP image.
|
|
187
|
+
|
|
188
|
+
#### State Management Performance
|
|
189
|
+
- Colocate state: keep state as close to where it is used as possible.
|
|
190
|
+
- Split context providers: one large context triggers re-renders on every consumer
|
|
191
|
+
for any state change. Split into focused providers.
|
|
192
|
+
- Use selector patterns (`useSelector`, Zustand selectors) to subscribe to slices:
|
|
193
|
+
```typescript
|
|
194
|
+
// Zustand: only re-renders when count changes
|
|
195
|
+
const count = useStore(state => state.count);
|
|
196
|
+
```
|
|
197
|
+
- Avoid putting frequently-changing values (mouse position, scroll offset) in React state.
|
|
198
|
+
Use refs or external stores.
|
|
199
|
+
|
|
200
|
+
### After implementation
|
|
201
|
+
1. Re-profile with React DevTools Profiler and compare flamegraphs.
|
|
202
|
+
2. Run Lighthouse and compare scores (LCP, INP, CLS, Total Blocking Time).
|
|
203
|
+
3. Verify bundle sizes with analyzer: confirm the target budget is met.
|
|
204
|
+
4. Test on a throttled device (Chrome DevTools: 4x CPU slowdown, Slow 3G) to validate
|
|
205
|
+
the optimization matters in realistic conditions.
|
|
206
|
+
5. Ensure no visual regressions: the UI must look and behave identically.
|
|
207
|
+
|
|
208
|
+
## React performance anti-patterns to flag
|
|
209
|
+
|
|
210
|
+
- `useMemo`/`useCallback` on every single function (adds overhead without benefit).
|
|
211
|
+
- Inline object/array literals as props to memoized components (defeats memo).
|
|
212
|
+
- Storing derived state that could be computed from existing state/props.
|
|
213
|
+
- Re-creating context providers on every render (move value computation to useMemo).
|
|
214
|
+
- Using `index` as key in lists that reorder (causes incorrect reconciliation).
|
|
215
|
+
- Fetching data inside components without caching (use SWR, React Query, or similar).
|
|
216
|
+
- Rendering 1000+ DOM nodes without virtualization.
|
|
217
|
+
|
|
218
|
+
## Self-check before task completion
|
|
219
|
+
|
|
220
|
+
Before marking a task done when this skill was active:
|
|
221
|
+
|
|
222
|
+
- [ ] Performance problem was identified with profiling tools (not guessed).
|
|
223
|
+
- [ ] Measurable improvement demonstrated (before/after numbers).
|
|
224
|
+
- [ ] No unnecessary memoization added (each memo justified by measurement).
|
|
225
|
+
- [ ] Bundle size budget verified with analyzer.
|
|
226
|
+
- [ ] No visual or functional regressions introduced.
|
|
227
|
+
- [ ] Optimizations tested on throttled device conditions.
|
|
228
|
+
- [ ] Core Web Vitals (LCP, INP, CLS) meet targets.
|
|
229
|
+
- [ ] Code splitting applied at route level minimum.
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: real-time-analytics
|
|
3
|
+
version: 1.0.0
|
|
4
|
+
min_mindforge_version: 10.6.0
|
|
5
|
+
status: stable
|
|
6
|
+
triggers: real-time analytics architecture, OLAP cube design, materialized view strategy, pre-aggregation pipeline, sub-second query optimization, real-time dashboard backend, clickhouse architecture, druid pinot design, real-time metric computation, live analytics, streaming analytics, real-time aggregation
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Skill — Real-Time Analytics
|
|
10
|
+
|
|
11
|
+
## When this skill activates
|
|
12
|
+
This skill activates when building sub-second query systems for analytical workloads, implementing real-time dashboards, or designing OLAP architectures. Use when users need live insights rather than batch-refreshed reports.
|
|
13
|
+
|
|
14
|
+
## Mandatory actions when this skill is active
|
|
15
|
+
|
|
16
|
+
### Before writing any code
|
|
17
|
+
1. Profile query patterns to identify: aggregation dimensions, filter selectivity, time ranges, and concurrency requirements for index and materialization strategy
|
|
18
|
+
2. Select appropriate OLAP engine: ClickHouse (fast scans, columnar), Druid (streaming ingestion, roll-ups), Pinot (low-latency queries), Redshift (AWS ecosystem)
|
|
19
|
+
3. Design pre-aggregation strategy: which dimensions to roll up, granularity levels (minute/hour/day), and cardinality explosion prevention
|
|
20
|
+
4. Calculate data volume and query throughput requirements: events/sec, retention period, query concurrency, and acceptable latency (p95/p99)
|
|
21
|
+
|
|
22
|
+
### During implementation
|
|
23
|
+
- Implement streaming ingestion pipeline: Kafka → transformation → OLAP store with exactly-once semantics and backpressure handling
|
|
24
|
+
- Design table schema optimized for query patterns: sorting keys matching filters, partition keys for time pruning, materialized columns for computed fields
|
|
25
|
+
- Create pre-aggregation jobs for common metrics: tumbling windows for counts/sums, HyperLogLog for distinct counts, quantile sketches for percentiles
|
|
26
|
+
- Build materialized views for expensive joins and aggregations: incrementally updated, proper indexing, and staleness monitoring
|
|
27
|
+
- Implement query optimization: partition pruning, secondary indexes, caching layer (Redis), and query result memoization
|
|
28
|
+
- Design data retention policies: hot tier (recent, full granularity), warm tier (older, partial roll-up), cold tier (archived, summarized)
|
|
29
|
+
- Create query routing layer: directing simple queries to pre-aggregations, complex queries to raw data with circuit breakers for expensive operations
|
|
30
|
+
|
|
31
|
+
### After implementation
|
|
32
|
+
- Build monitoring for ingestion pipeline: lag, throughput, error rates, and duplicate detection with alerting on anomalies
|
|
33
|
+
- Create query performance dashboards: latency percentiles, query volume, cache hit rates, expensive queries, and optimization opportunities
|
|
34
|
+
- Generate cost analysis reports: storage by tier, compute costs, query costs, and optimization recommendations (better indexes, more pre-aggs)
|
|
35
|
+
- Document query best practices: efficient filtering, avoiding full scans, using pre-aggregations, and when to use caching
|
|
36
|
+
|
|
37
|
+
## Self-check before task completion
|
|
38
|
+
- [ ] Query latency meets SLA (typically p95 <1s, p99 <3s) for common dashboard queries under expected concurrency
|
|
39
|
+
- [ ] Pre-aggregation strategy covers 80%+ of query patterns with automated refresh and staleness monitoring
|
|
40
|
+
- [ ] Ingestion pipeline handles peak load with <1 minute lag and proper backpressure to prevent data loss
|
|
41
|
+
- [ ] Data retention policy implemented with automated tiering and archival to optimize costs
|
|
42
|
+
- [ ] Query optimization tested with partition pruning verified and slow query identification for further tuning
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: real-time-sync
|
|
3
|
+
version: 1.0.0
|
|
4
|
+
min_mindforge_version: 10.0.9
|
|
5
|
+
status: stable
|
|
6
|
+
triggers: real-time sync, conflict resolution, CRDT, operational transform, offline first, sync protocol, optimistic replication, last write wins, conflict merge strategy, eventual sync, sync engine, collaborative editing
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Skill — Real-Time Sync
|
|
10
|
+
|
|
11
|
+
## When this skill activates
|
|
12
|
+
Any task involving real-time synchronization, conflict resolution, CRDTs,
|
|
13
|
+
operational transforms, offline-first architecture, or collaborative editing.
|
|
14
|
+
|
|
15
|
+
## Mandatory actions when this skill is active
|
|
16
|
+
|
|
17
|
+
### Before writing any code
|
|
18
|
+
1. Classify data types to determine the conflict resolution strategy.
|
|
19
|
+
2. Define the consistency model (strong, eventual, causal).
|
|
20
|
+
3. Identify offline requirements and maximum acceptable sync lag.
|
|
21
|
+
|
|
22
|
+
### During implementation
|
|
23
|
+
- Implement conflict detection at field level, not document level.
|
|
24
|
+
- Use vector clocks or hybrid logical clocks for causal ordering.
|
|
25
|
+
- Design the sync engine as a separate layer from business logic.
|
|
26
|
+
- Handle network partitions gracefully (queue changes, reconcile on reconnect).
|
|
27
|
+
|
|
28
|
+
### After implementation
|
|
29
|
+
- Test with simulated partitions and concurrent edits.
|
|
30
|
+
- Verify convergence (all clients reach same state eventually).
|
|
31
|
+
- Document conflict resolution strategy per data type.
|
|
32
|
+
|
|
33
|
+
## Conflict Resolution Strategies
|
|
34
|
+
|
|
35
|
+
| Strategy | Pro | Con | Use For |
|
|
36
|
+
|----------|-----|-----|---------|
|
|
37
|
+
| LWW (Last Write Wins) | Simple, no user action | Silent data loss | Preferences, status fields |
|
|
38
|
+
| CRDTs | Auto-merge, no conflicts | Limited types, storage overhead | Counters, sets, registers |
|
|
39
|
+
| OT (Operational Transform) | Precise intent preservation | Complex, needs server | Real-time text editing |
|
|
40
|
+
|
|
41
|
+
## CRDT Catalog
|
|
42
|
+
|
|
43
|
+
- **G-Counter**: grow-only. Each node keeps own count, total = sum. Use for page views.
|
|
44
|
+
- **PN-Counter**: two G-Counters (increment/decrement). Use for inventory, votes.
|
|
45
|
+
- **LWW-Register**: single value + timestamp, latest wins. Use for simple fields.
|
|
46
|
+
- **OR-Set**: add/remove with unique tags, add-wins bias. Use for carts, tag lists.
|
|
47
|
+
|
|
48
|
+
## Offline-First Architecture
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
[Local DB] <-> [Sync Engine] <-> [Remote Server]
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
- All writes go to local DB first (instant UX, zero latency).
|
|
55
|
+
- Sync engine runs in background, uploads pending changes.
|
|
56
|
+
- On reconnect: pull remote → detect conflicts → resolve → merge.
|
|
57
|
+
- Unresolvable conflicts surface to user (never silently drop).
|
|
58
|
+
|
|
59
|
+
## Sync Protocols
|
|
60
|
+
|
|
61
|
+
- **Push-Based**: server pushes via WebSocket/SSE. Lowest latency, needs persistent connection.
|
|
62
|
+
- **Pull-Based**: client polls with cursor. Simple, works everywhere, higher latency.
|
|
63
|
+
- **Hybrid** (recommended): push notification "changes exist" → client fetches via HTTP.
|
|
64
|
+
|
|
65
|
+
## Optimistic Replication
|
|
66
|
+
- Apply locally immediately, replicate async.
|
|
67
|
+
- On conflict: reconcile via chosen strategy (LWW, CRDT, manual).
|
|
68
|
+
- Rollback if server rejects (revert local, show error to user).
|
|
69
|
+
|
|
70
|
+
## Vector Clocks
|
|
71
|
+
- Each node maintains a vector of logical timestamps (one per node).
|
|
72
|
+
- Determines causality: happened-before, concurrent, or identical.
|
|
73
|
+
- Concurrent events require conflict resolution; causal events merge cleanly.
|
|
74
|
+
|
|
75
|
+
## Self-check before task completion
|
|
76
|
+
|
|
77
|
+
- [ ] Is conflict resolution appropriate for each data type?
|
|
78
|
+
- [ ] Does the system handle network partitions without data loss?
|
|
79
|
+
- [ ] Do all clients converge to the same state eventually?
|
|
80
|
+
- [ ] Is offline support implemented with local-first writes?
|
|
81
|
+
- [ ] Are concurrent edits tested with realistic scenarios?
|
|
82
|
+
- [ ] Is the sync protocol resilient to disconnection/reconnection?
|
|
83
|
+
- [ ] Are unresolvable conflicts surfaced to the user?
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: responsive-native
|
|
3
|
+
version: 1.0.0
|
|
4
|
+
min_mindforge_version: 10.4.0
|
|
5
|
+
status: stable
|
|
6
|
+
triggers: responsive native design, adaptive layout mobile, platform-specific UX, mobile accessibility design, gesture handling mobile, mobile UX pattern, responsive breakpoint mobile, dynamic type scaling, safe area design, tablet adaptation, foldable device support, mobile navigation pattern
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Skill — Responsive Native UI & Platform-Specific Design
|
|
10
|
+
|
|
11
|
+
## When this skill activates
|
|
12
|
+
This skill activates when designing adaptive mobile interfaces, implementing platform-specific UX patterns, ensuring accessibility, handling gestures, or supporting diverse screen sizes including tablets and foldables.
|
|
13
|
+
|
|
14
|
+
## Mandatory actions when this skill is active
|
|
15
|
+
|
|
16
|
+
### Before writing any code
|
|
17
|
+
1. Define responsive breakpoints and layout strategies for phone, tablet, foldable, and landscape orientations
|
|
18
|
+
2. Review platform design guidelines (Apple HIG, Material Design) to ensure platform-appropriate patterns
|
|
19
|
+
3. Establish accessibility requirements: screen reader support, dynamic type scaling, color contrast, touch target sizes
|
|
20
|
+
4. Plan gesture handling strategy considering platform conventions (iOS swipe gestures vs Android navigation patterns)
|
|
21
|
+
|
|
22
|
+
### During implementation
|
|
23
|
+
- Use platform-appropriate navigation patterns (iOS tab bar + navigation stack, Android bottom nav + drawer)
|
|
24
|
+
- Implement safe area handling for notched devices (SafeAreaView, WindowInsets, notch cutouts)
|
|
25
|
+
- Support dynamic type scaling — use relative font sizes, test with largest accessibility sizes
|
|
26
|
+
- Implement proper touch target sizes (minimum 44x44pt iOS, 48x48dp Android) with adequate spacing
|
|
27
|
+
- Use semantic colors and avoid hardcoded values to support dark mode automatically
|
|
28
|
+
- Implement platform-specific gesture handlers (swipe back on iOS, hardware back button on Android)
|
|
29
|
+
- Handle keyboard interactions properly (dismiss on scroll, avoid keyboard covering inputs, proper focus management)
|
|
30
|
+
|
|
31
|
+
### After implementation
|
|
32
|
+
- Test on multiple screen sizes: smallest supported phone, largest phone, tablet, foldable (if applicable)
|
|
33
|
+
- Verify accessibility with screen readers (VoiceOver, TalkBack), ensure all interactive elements are labeled
|
|
34
|
+
- Test with maximum dynamic type size settings and ensure UI remains functional
|
|
35
|
+
- Validate gesture handling: swipe navigation, pull to refresh, long press actions work intuitively
|
|
36
|
+
- Check dark mode appearance, ensure proper contrast and no hardcoded light-mode colors
|
|
37
|
+
|
|
38
|
+
## Self-check before task completion
|
|
39
|
+
- [ ] Layout adapts correctly across all target screen sizes without clipping or awkward spacing
|
|
40
|
+
- [ ] Platform-specific patterns are used (no Android-style navigation on iOS, and vice versa)
|
|
41
|
+
- [ ] Accessibility score passes WCAG 2.1 AA minimum (contrast ratios, touch targets, screen reader support)
|
|
42
|
+
- [ ] Safe areas are properly handled on devices with notches, rounded corners, and home indicators
|
|
43
|
+
- [ ] Gestures work intuitively and don't conflict with system gestures or platform conventions
|
|
44
|
+
- [ ] Dynamic type scaling is supported with proper layout adjustments for large text sizes
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: responsive-patterns
|
|
3
|
+
version: 1.0.0
|
|
4
|
+
min_mindforge_version: 0.1.0
|
|
5
|
+
status: stable
|
|
6
|
+
triggers: responsive pattern, mobile first design, container queries pattern, fluid typography, adaptive component design, breakpoint strategy, viewport units, media query architecture, responsive layout pattern, responsive image strategy, css clamp technique, responsive grid system
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Skill — Responsive Patterns
|
|
10
|
+
|
|
11
|
+
## When this skill activates
|
|
12
|
+
Any task involving responsive layout architecture, mobile-first design, adaptive
|
|
13
|
+
components, fluid sizing, or multi-viewport support.
|
|
14
|
+
|
|
15
|
+
## Mandatory actions when this skill is active
|
|
16
|
+
|
|
17
|
+
### Before writing any code
|
|
18
|
+
1. Determine if the design is mobile-first or desktop-first (prefer mobile-first).
|
|
19
|
+
2. Identify content-based breakpoints (where the layout breaks, not device widths).
|
|
20
|
+
3. Decide between page-level media queries vs component-level container queries.
|
|
21
|
+
|
|
22
|
+
### During implementation
|
|
23
|
+
- Use `min-width` media queries for mobile-first progressive enhancement.
|
|
24
|
+
- Apply container queries for reusable components that adapt to their parent.
|
|
25
|
+
- Use fluid typography with `clamp()` for smooth scaling without breakpoints.
|
|
26
|
+
- Prefer CSS Grid for 2D layouts, Flexbox for 1D alignment.
|
|
27
|
+
- Use modern viewport units (`dvh`, `svw`, `lvw`) for mobile Safari compatibility.
|
|
28
|
+
|
|
29
|
+
### After implementation
|
|
30
|
+
- Test at minimum: 320px, 768px, 1024px, 1440px viewports.
|
|
31
|
+
- Verify no horizontal scroll at any viewport width.
|
|
32
|
+
- Check touch targets are minimum 44x44px on mobile.
|
|
33
|
+
- Validate images load appropriate sizes (not desktop images on mobile).
|
|
34
|
+
|
|
35
|
+
## Core strategies
|
|
36
|
+
|
|
37
|
+
### Mobile-First
|
|
38
|
+
```css
|
|
39
|
+
/* Base styles (mobile) */
|
|
40
|
+
.card { padding: 1rem; }
|
|
41
|
+
|
|
42
|
+
/* Tablet and up */
|
|
43
|
+
@media (min-width: 48rem) {
|
|
44
|
+
.card { padding: 1.5rem; }
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Desktop and up */
|
|
48
|
+
@media (min-width: 64rem) {
|
|
49
|
+
.card { padding: 2rem; }
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Container Queries
|
|
54
|
+
```css
|
|
55
|
+
.card-container { container-type: inline-size; }
|
|
56
|
+
|
|
57
|
+
@container (min-width: 400px) {
|
|
58
|
+
.card { display: grid; grid-template-columns: 1fr 2fr; }
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@container (min-width: 700px) {
|
|
62
|
+
.card { grid-template-columns: 1fr 3fr 1fr; }
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Fluid Typography
|
|
67
|
+
```css
|
|
68
|
+
/* Scales from 1rem at 320px to 2rem at 1200px */
|
|
69
|
+
h1 { font-size: clamp(1rem, 0.5rem + 2.5vw, 2rem); }
|
|
70
|
+
|
|
71
|
+
/* Body text with subtle scaling */
|
|
72
|
+
body { font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem); }
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Breakpoint Strategy
|
|
76
|
+
- Do NOT use device-based breakpoints (iPhone, iPad, etc.).
|
|
77
|
+
- Add a breakpoint when content breaks or becomes unreadable.
|
|
78
|
+
- Common content breakpoints: ~30rem, ~48rem, ~64rem, ~80rem.
|
|
79
|
+
- Name tokens semantically: `--bp-compact`, `--bp-medium`, `--bp-wide`.
|
|
80
|
+
|
|
81
|
+
### CSS Grid Layouts
|
|
82
|
+
```css
|
|
83
|
+
/* Auto-fit responsive grid — no media queries needed */
|
|
84
|
+
.grid {
|
|
85
|
+
display: grid;
|
|
86
|
+
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
|
|
87
|
+
gap: 1.5rem;
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Responsive Images
|
|
92
|
+
```html
|
|
93
|
+
<!-- srcset for resolution switching -->
|
|
94
|
+
<img
|
|
95
|
+
srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
|
|
96
|
+
sizes="(max-width: 48rem) 100vw, (max-width: 64rem) 50vw, 33vw"
|
|
97
|
+
src="image-800.webp"
|
|
98
|
+
alt="Description"
|
|
99
|
+
loading="lazy"
|
|
100
|
+
/>
|
|
101
|
+
|
|
102
|
+
<!-- picture for art direction -->
|
|
103
|
+
<picture>
|
|
104
|
+
<source media="(min-width: 64rem)" srcset="wide.webp" />
|
|
105
|
+
<source media="(min-width: 48rem)" srcset="medium.webp" />
|
|
106
|
+
<img src="narrow.webp" alt="Description" />
|
|
107
|
+
</picture>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Viewport Units
|
|
111
|
+
```css
|
|
112
|
+
/* Use dvh for mobile Safari (accounts for address bar) */
|
|
113
|
+
.hero { min-height: 100dvh; }
|
|
114
|
+
|
|
115
|
+
/* svh = smallest viewport height (address bar visible) */
|
|
116
|
+
.sticky-footer { height: 100svh; }
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Adaptive Components (Slot-Based)
|
|
120
|
+
Design components that render different internal layouts based on container size:
|
|
121
|
+
- Compact: stacked layout, icon-only buttons.
|
|
122
|
+
- Medium: side-by-side layout, abbreviated labels.
|
|
123
|
+
- Wide: full layout, expanded content, additional metadata.
|
|
124
|
+
|
|
125
|
+
## Anti-patterns to avoid
|
|
126
|
+
- Fixed pixel widths on containers (use max-width + percentage/auto).
|
|
127
|
+
- Device-specific breakpoints (will break on next year's devices).
|
|
128
|
+
- Hiding content with `display: none` at breakpoints (serve less content instead).
|
|
129
|
+
- Using `vw` for font-size without `clamp()` (too small on mobile, too large on 4K).
|
|
130
|
+
- Horizontal scrolling caused by fixed-width elements or overflow.
|
|
131
|
+
|
|
132
|
+
## Self-check before task completion
|
|
133
|
+
|
|
134
|
+
Before marking a task done when this skill was active:
|
|
135
|
+
|
|
136
|
+
- [ ] Layout works at 320px without horizontal scroll?
|
|
137
|
+
- [ ] Typography scales fluidly without jarring jumps?
|
|
138
|
+
- [ ] Images serve appropriate sizes per viewport?
|
|
139
|
+
- [ ] Touch targets are 44x44px minimum on mobile?
|
|
140
|
+
- [ ] Container queries used for reusable component responsiveness?
|
|
141
|
+
- [ ] No device-specific breakpoints in the code?
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: rfc-pipeline
|
|
3
|
+
version: 1.0.0
|
|
4
|
+
min_mindforge_version: 10.0.4
|
|
5
|
+
status: stable
|
|
6
|
+
triggers: rfc, spec decompose, dependency DAG, task graph, parallel execution, merge conflict recovery, task pinning, worktree isolation, execution plan, spec-to-tasks, dependency resolution, reproducible execution
|
|
7
|
+
compose:
|
|
8
|
+
- autonomous-loops
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# Skill — RFC Pipeline
|
|
12
|
+
|
|
13
|
+
## When this skill activates
|
|
14
|
+
|
|
15
|
+
When a specification, RFC, or feature document needs to be decomposed into
|
|
16
|
+
executable tasks with dependency ordering. Also activates when planning parallel
|
|
17
|
+
work across multiple files or modules, when managing complex multi-step
|
|
18
|
+
implementations, or when explicitly asked to create an execution DAG.
|
|
19
|
+
|
|
20
|
+
## Mandatory actions when this skill is active
|
|
21
|
+
|
|
22
|
+
### Step 1 — Parse Spec into Atomic Tasks
|
|
23
|
+
|
|
24
|
+
Decompose the specification into discrete, atomic tasks where each task has:
|
|
25
|
+
|
|
26
|
+
- **ID**: unique identifier (e.g., `T001`, `T002`)
|
|
27
|
+
- **Description**: what this task accomplishes
|
|
28
|
+
- **Inputs**: what must exist before this task can start (files, APIs, schemas)
|
|
29
|
+
- **Outputs**: what this task produces (files created/modified, APIs available)
|
|
30
|
+
- **Estimated complexity**: S/M/L
|
|
31
|
+
- **Acceptance criteria**: how to verify the task is done
|
|
32
|
+
|
|
33
|
+
### Step 2 — Build Directed Acyclic Graph
|
|
34
|
+
|
|
35
|
+
Construct the dependency graph:
|
|
36
|
+
|
|
37
|
+
- Each task is a node
|
|
38
|
+
- An edge from A to B means "A must complete before B can start"
|
|
39
|
+
- Detect cycles: if any cycle exists, STOP and report as an error
|
|
40
|
+
- Cycles indicate ambiguous dependencies that must be resolved before proceeding
|
|
41
|
+
- Store edges as explicit `depends_on` arrays per task
|
|
42
|
+
|
|
43
|
+
### Step 3 — Assign Parallel Waves
|
|
44
|
+
|
|
45
|
+
Group tasks by dependency depth:
|
|
46
|
+
|
|
47
|
+
- **Wave 0**: tasks with no dependencies (can start immediately)
|
|
48
|
+
- **Wave 1**: tasks that depend only on Wave 0 tasks
|
|
49
|
+
- **Wave N**: tasks that depend only on tasks in waves < N
|
|
50
|
+
- Tasks within the same wave are independent and can execute in parallel
|
|
51
|
+
- Tasks across waves execute sequentially (Wave 0 completes before Wave 1 starts)
|
|
52
|
+
|
|
53
|
+
### Step 4 — Pin Tasks to Commits
|
|
54
|
+
|
|
55
|
+
For reproducibility:
|
|
56
|
+
|
|
57
|
+
- Record the base commit SHA that the plan was created against
|
|
58
|
+
- Each completed task records the commit SHA of its output
|
|
59
|
+
- If the base branch advances, detect drift and flag affected tasks
|
|
60
|
+
- Pinning ensures any task can be reproduced from a known state
|
|
61
|
+
|
|
62
|
+
### Step 5 — Execute Waves
|
|
63
|
+
|
|
64
|
+
Run the plan:
|
|
65
|
+
|
|
66
|
+
- Execute all tasks in the current wave in parallel
|
|
67
|
+
- Wait for all tasks in the wave to complete before advancing
|
|
68
|
+
- Verify outputs of each task match acceptance criteria
|
|
69
|
+
- If a task fails, halt that dependency chain (other chains continue)
|
|
70
|
+
|
|
71
|
+
### Step 6 — Merge-Conflict Recovery
|
|
72
|
+
|
|
73
|
+
When parallel tasks produce conflicting changes:
|
|
74
|
+
|
|
75
|
+
- Detect conflicts immediately after wave completion
|
|
76
|
+
- Isolate conflicting tasks into a resolution queue
|
|
77
|
+
- Resolve conflicts sequentially (human or automated merge)
|
|
78
|
+
- Re-run acceptance criteria on merged result
|
|
79
|
+
- Never auto-resolve conflicts that touch the same logical block
|
|
80
|
+
|
|
81
|
+
### Step 7 — Worktree-Based Isolation
|
|
82
|
+
|
|
83
|
+
For true parallel execution:
|
|
84
|
+
|
|
85
|
+
- Each parallel task gets its own git worktree (branch from pinned SHA)
|
|
86
|
+
- Tasks cannot see each other's in-progress changes
|
|
87
|
+
- Merge worktrees back to the integration branch after wave completes
|
|
88
|
+
- Clean up worktrees after successful merge
|
|
89
|
+
|
|
90
|
+
### Output
|
|
91
|
+
|
|
92
|
+
Store the DAG and execution state in `.planning/rfc/[name]/DAG.json` with schema:
|
|
93
|
+
|
|
94
|
+
```json
|
|
95
|
+
{
|
|
96
|
+
"name": "rfc-name",
|
|
97
|
+
"base_sha": "abc123",
|
|
98
|
+
"tasks": [...],
|
|
99
|
+
"waves": [[...], [...]],
|
|
100
|
+
"status": "in-progress|complete|blocked"
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Self-check before task completion
|
|
105
|
+
|
|
106
|
+
Before marking a task done when this skill was active:
|
|
107
|
+
|
|
108
|
+
- [ ] Did I decompose the spec into atomic tasks with clear inputs/outputs?
|
|
109
|
+
- [ ] Did I verify no cycles exist in the dependency graph?
|
|
110
|
+
- [ ] Did I assign tasks to parallel waves correctly?
|
|
111
|
+
- [ ] Did I pin tasks to commit SHAs for reproducibility?
|
|
112
|
+
- [ ] Did I handle (or plan for) merge conflicts between parallel tasks?
|
|
113
|
+
- [ ] Did I store the DAG in .planning/rfc/[name]/DAG.json?
|
|
114
|
+
- [ ] Can each task be executed independently given its inputs?
|