tribunal-kit 6.0.0 → 7.0.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/.agent/.manifest.json +78 -0
- package/.agent/ARCHITECTURE.md +19 -241
- package/.agent/agents/accessibility-reviewer.md +23 -16
- package/.agent/agents/ai-code-reviewer.md +25 -21
- package/.agent/agents/anti-pattern-reviewer.md +12 -7
- package/.agent/agents/api-architect.md +1 -0
- package/.agent/agents/backend-specialist.md +23 -22
- package/.agent/agents/cloud-engineer.md +1 -0
- package/.agent/agents/code-archaeologist.md +1 -0
- package/.agent/agents/complexity-reviewer.md +10 -7
- package/.agent/agents/database-architect.md +3 -2
- package/.agent/agents/db-latency-auditor.md +6 -2
- package/.agent/agents/debugger.md +3 -2
- package/.agent/agents/dependency-reviewer.md +1 -0
- package/.agent/agents/devops-engineer.md +9 -8
- package/.agent/agents/documentation-writer.md +6 -5
- package/.agent/agents/explorer-agent.md +1 -0
- package/.agent/agents/frontend-reviewer.md +21 -17
- package/.agent/agents/frontend-specialist.md +23 -20
- package/.agent/agents/game-developer.md +1 -0
- package/.agent/agents/interaction-reviewer.md +10 -5
- package/.agent/agents/logic-reviewer.md +3 -0
- package/.agent/agents/minimalist-reviewer.md +6 -0
- package/.agent/agents/mobile-developer.md +7 -6
- package/.agent/agents/mobile-reviewer.md +14 -13
- package/.agent/agents/orchestrator.md +3 -0
- package/.agent/agents/penetration-tester.md +1 -0
- package/.agent/agents/performance-optimizer.md +6 -5
- package/.agent/agents/performance-reviewer.md +6 -6
- package/.agent/agents/pipeline-reviewer.md +144 -0
- package/.agent/agents/precedence-reviewer.md +1 -0
- package/.agent/agents/product-manager.md +1 -0
- package/.agent/agents/product-owner.md +1 -0
- package/.agent/agents/product-reviewer.md +12 -7
- package/.agent/agents/project-planner.md +3 -0
- package/.agent/agents/qa-automation-engineer.md +50 -43
- package/.agent/agents/resilience-reviewer.md +1 -0
- package/.agent/agents/schema-reviewer.md +1 -0
- package/.agent/agents/security-auditor.md +24 -24
- package/.agent/agents/seo-specialist.md +33 -23
- package/.agent/agents/sql-reviewer.md +5 -4
- package/.agent/agents/supervisor-agent.md +12 -2
- package/.agent/agents/swarm-worker-contracts.md +13 -13
- package/.agent/agents/swarm-worker-registry.md +51 -51
- package/.agent/agents/system-architect.md +1 -0
- package/.agent/agents/test-coverage-reviewer.md +25 -22
- package/.agent/agents/test-engineer.md +12 -11
- package/.agent/agents/throughput-optimizer.md +45 -40
- package/.agent/agents/type-safety-reviewer.md +5 -4
- package/.agent/agents/ui-ux-auditor.md +6 -4
- package/.agent/agents/ui-visual-auditor.md +3 -0
- package/.agent/agents/ux-reviewer.md +11 -6
- package/.agent/agents/visual-reviewer.md +11 -6
- package/.agent/agents/vitals-reviewer.md +5 -4
- package/.agent/history/memory/.memory.idx +3716 -1
- package/.agent/history/memory/MEMORY.md +246 -1
- package/.agent/mcp_config.json +1 -6
- package/.agent/routing_index.json +2034 -263
- package/.agent/rules/GEMINI.md +12 -10
- package/.agent/rules/GEMINI_PLANNER.md +19 -21
- package/.agent/scripts/_colors.js +52 -54
- package/.agent/scripts/_utils.js +52 -53
- package/.agent/scripts/auto_preview.js +39 -43
- package/.agent/scripts/bundle_analyzer.js +47 -60
- package/.agent/scripts/case_law_manager.js +200 -294
- package/.agent/scripts/checklist.js +73 -94
- package/.agent/scripts/cicd_validator.js +305 -0
- package/.agent/scripts/compile_router.py +4 -111
- package/.agent/scripts/context_broker.js +317 -412
- package/.agent/scripts/contract_engine.js +402 -0
- package/.agent/scripts/dependency_analyzer.js +112 -124
- package/.agent/scripts/graph_builder.js +75 -103
- package/.agent/scripts/graph_visualizer.js +10 -12
- package/.agent/scripts/graph_zoom.js +38 -55
- package/.agent/scripts/guardrail_engine.js +195 -145
- package/.agent/scripts/impact_classifier.js +55 -30
- package/.agent/scripts/inner_loop_validator.js +108 -159
- package/.agent/scripts/integrity_manifest.js +59 -67
- package/.agent/scripts/lint_runner.js +65 -75
- package/.agent/scripts/marathon_harness.js +131 -208
- package/.agent/scripts/migrate_skills_frontmatter.py +4 -63
- package/.agent/scripts/minify_context.js +29 -33
- package/.agent/scripts/minimal_change_engine.js +95 -87
- package/.agent/scripts/mutation_runner.js +46 -62
- package/.agent/scripts/pipeline_engine.js +320 -209
- package/.agent/scripts/prompt_compiler.js +118 -93
- package/.agent/scripts/schema_validator.js +73 -121
- package/.agent/scripts/security_scan.js +88 -117
- package/.agent/scripts/session_manager.js +52 -69
- package/.agent/scripts/signal_detector.js +24 -22
- package/.agent/scripts/skill_evolution.js +184 -245
- package/.agent/scripts/skill_integrator.js +35 -48
- package/.agent/scripts/socratic_gate_policy.js +15 -12
- package/.agent/scripts/strengthen_skills.js +29 -33
- package/.agent/scripts/swarm_dispatcher.js +120 -151
- package/.agent/scripts/test_runner.js +54 -56
- package/.agent/scripts/token_budget_broker.js +9 -7
- package/.agent/scripts/trace_engine.js +126 -0
- package/.agent/scripts/verify_all.js +76 -93
- package/.agent/scripts/visual_audit.js +16 -21
- package/.agent/skill_topic_map.json +237 -0
- package/.agent/skills/12-principles-of-animation/SKILL.md +7 -0
- package/.agent/skills/60fps-animation/SKILL.md +7 -0
- package/.agent/skills/accessible-animation/SKILL.md +5 -1
- package/.agent/skills/adapt/SKILL.md +7 -1
- package/.agent/skills/advanced-rag-pipelines/SKILL.md +1 -0
- package/.agent/skills/agent-organizer/SKILL.md +1 -0
- package/.agent/skills/agentic-patterns/SKILL.md +33 -25
- package/.agent/skills/agentic-workflows-2026/SKILL.md +80 -0
- package/.agent/skills/ai-app-hardening/SKILL.md +59 -0
- package/.agent/skills/ai-prompt-injection-defense/SKILL.md +7 -6
- package/.agent/skills/animation-on-scroll/SKILL.md +24 -15
- package/.agent/skills/animation-systems/SKILL.md +11 -10
- package/.agent/skills/antfu-conventions/SKILL.md +7 -2
- package/.agent/skills/api-patterns/SKILL.md +14 -10
- package/.agent/skills/api-security-auditor/SKILL.md +15 -14
- package/.agent/skills/app-builder/SKILL.md +1 -0
- package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +2 -2
- package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +1 -1
- package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +12 -12
- package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +3 -3
- package/.agent/skills/apple-design/SKILL.md +8 -7
- package/.agent/skills/architecture/SKILL.md +3 -2
- package/.agent/skills/audit-and-fix/SKILL.md +8 -5
- package/.agent/skills/authentication-best-practices/SKILL.md +9 -8
- package/.agent/skills/backend-security-expert/SKILL.md +1 -0
- package/.agent/skills/baseline-ui/SKILL.md +8 -7
- package/.agent/skills/bash-linux/SKILL.md +1 -0
- package/.agent/skills/behavioral-modes/SKILL.md +1 -0
- package/.agent/skills/better-colors/SKILL.md +11 -7
- package/.agent/skills/better-typography/SKILL.md +30 -16
- package/.agent/skills/better-ui/SKILL.md +17 -10
- package/.agent/skills/bolder/SKILL.md +6 -0
- package/.agent/skills/brainstorming/SKILL.md +6 -4
- package/.agent/skills/browser-native-ai/SKILL.md +5 -4
- package/.agent/skills/build-primitive/SKILL.md +5 -0
- package/.agent/skills/building-native-ui/SKILL.md +1 -0
- package/.agent/skills/cicd-pro/SKILL.md +2 -1
- package/.agent/skills/clarify/SKILL.md +19 -14
- package/.agent/skills/clean-code/SKILL.md +16 -15
- package/.agent/skills/cloud-architect/SKILL.md +1 -0
- package/.agent/skills/cobejs/SKILL.md +7 -9
- package/.agent/skills/code-review-checklist/SKILL.md +1 -0
- package/.agent/skills/codebase-design/SKILL.md +7 -2
- package/.agent/skills/colorize/SKILL.md +8 -3
- package/.agent/skills/compact-landing/SKILL.md +8 -3
- package/.agent/skills/company-logos/SKILL.md +6 -0
- package/.agent/skills/config-validator/SKILL.md +10 -9
- package/.agent/skills/containerization-pro/SKILL.md +6 -5
- package/.agent/skills/context-engineering-pro/SKILL.md +70 -0
- package/.agent/skills/create-design-md/SKILL.md +13 -5
- package/.agent/skills/critique/SKILL.md +10 -8
- package/.agent/skills/csharp-developer/SKILL.md +1 -0
- package/.agent/skills/data-validation-schemas/SKILL.md +28 -23
- package/.agent/skills/database-design/SKILL.md +2 -1
- package/.agent/skills/delight/SKILL.md +6 -0
- package/.agent/skills/deployment-procedures/SKILL.md +2 -1
- package/.agent/skills/design-lab/SKILL.md +5 -0
- package/.agent/skills/devops-engineer/SKILL.md +3 -2
- package/.agent/skills/devops-incident-responder/SKILL.md +2 -1
- package/.agent/skills/diagnosing-bugs/SKILL.md +12 -2
- package/.agent/skills/distill/SKILL.md +7 -2
- package/.agent/skills/documentation-templates/SKILL.md +3 -2
- package/.agent/skills/domain-modeling/SKILL.md +12 -4
- package/.agent/skills/duckdb-analytical-sql/SKILL.md +59 -0
- package/.agent/skills/edge-ai-mobile/SKILL.md +50 -0
- package/.agent/skills/edge-computing/SKILL.md +9 -8
- package/.agent/skills/emil-design-eng/SKILL.md +43 -27
- package/.agent/skills/error-resilience/SKILL.md +34 -16
- package/.agent/skills/expo-router-v4/SKILL.md +81 -0
- package/.agent/skills/extract-design-system/SKILL.md +12 -11
- package/.agent/skills/fabel-protocol/SKILL.md +24 -17
- package/.agent/skills/fixing-accessibility/SKILL.md +23 -16
- package/.agent/skills/fixing-metadata/SKILL.md +24 -13
- package/.agent/skills/fixing-motion-performance/SKILL.md +7 -5
- package/.agent/skills/framer-motion-expert/SKILL.md +29 -15
- package/.agent/skills/frontend-design/SKILL.md +21 -13
- package/.agent/skills/frontend-security-expert/SKILL.md +1 -0
- package/.agent/skills/game-design-expert/SKILL.md +1 -0
- package/.agent/skills/game-engineering-expert/SKILL.md +1 -0
- package/.agent/skills/generative-ui-expert/SKILL.md +3 -2
- package/.agent/skills/geo-fundamentals/SKILL.md +2 -1
- package/.agent/skills/git-pro/SKILL.md +10 -9
- package/.agent/skills/github-operations/SKILL.md +2 -1
- package/.agent/skills/gpt-taste/SKILL.md +7 -0
- package/.agent/skills/gsap-core/SKILL.md +26 -22
- package/.agent/skills/gsap-frameworks/SKILL.md +6 -5
- package/.agent/skills/gsap-performance/SKILL.md +4 -3
- package/.agent/skills/gsap-plugins/SKILL.md +34 -33
- package/.agent/skills/gsap-react/SKILL.md +9 -8
- package/.agent/skills/gsap-scrolltrigger/SKILL.md +34 -33
- package/.agent/skills/gsap-timeline/SKILL.md +18 -15
- package/.agent/skills/gsap-utils/SKILL.md +25 -24
- package/.agent/skills/harden/SKILL.md +9 -3
- package/.agent/skills/harness-protocol/SKILL.md +1 -0
- package/.agent/skills/i18n-localization/SKILL.md +10 -9
- package/.agent/skills/impeccable/SKILL.md +5 -0
- package/.agent/skills/improve-codebase-architecture/SKILL.md +10 -5
- package/.agent/skills/improve-ui/SKILL.md +12 -5
- package/.agent/skills/intelligent-routing/SKILL.md +7 -6
- package/.agent/skills/knowledge-graph/SKILL.md +1 -0
- package/.agent/skills/landing-page/SKILL.md +1 -0
- package/.agent/skills/lint-and-validate/SKILL.md +9 -4
- package/.agent/skills/llm-engineering/SKILL.md +55 -54
- package/.agent/skills/local-first/SKILL.md +20 -19
- package/.agent/skills/local-first-architecture/SKILL.md +6 -1
- package/.agent/skills/lottie-animation/SKILL.md +7 -3
- package/.agent/skills/marquee-loop/SKILL.md +1 -0
- package/.agent/skills/masked-reveal/SKILL.md +17 -4
- package/.agent/skills/mcp-builder/SKILL.md +13 -10
- package/.agent/skills/micro-interaction/SKILL.md +20 -5
- package/.agent/skills/mobile-design/SKILL.md +26 -15
- package/.agent/skills/monorepo-management/SKILL.md +3 -2
- package/.agent/skills/morphing-icons/SKILL.md +16 -6
- package/.agent/skills/motion-engineering/SKILL.md +19 -15
- package/.agent/skills/nextjs-react-expert/SKILL.md +26 -21
- package/.agent/skills/nodejs-best-practices/SKILL.md +89 -76
- package/.agent/skills/observability/SKILL.md +45 -44
- package/.agent/skills/opentelemetry-observability/SKILL.md +59 -0
- package/.agent/skills/page-transition-animation/SKILL.md +6 -3
- package/.agent/skills/parallel-agents/SKILL.md +7 -2
- package/.agent/skills/performance-profiling/SKILL.md +24 -13
- package/.agent/skills/plan-writing/SKILL.md +1 -0
- package/.agent/skills/platform-engineer/SKILL.md +3 -2
- package/.agent/skills/platform-engineering-opentofu/SKILL.md +68 -0
- package/.agent/skills/playwright-ai-e2e/SKILL.md +60 -0
- package/.agent/skills/playwright-best-practices/SKILL.md +29 -28
- package/.agent/skills/polish/SKILL.md +13 -12
- package/.agent/skills/powershell-windows/SKILL.md +1 -0
- package/.agent/skills/pricing-page/SKILL.md +8 -3
- package/.agent/skills/product-aware-heuristics/SKILL.md +122 -72
- package/.agent/skills/progressive-blur/SKILL.md +9 -4
- package/.agent/skills/project-idioms/SKILL.md +1 -0
- package/.agent/skills/property-based-testing/SKILL.md +58 -0
- package/.agent/skills/python-patterns/SKILL.md +1 -0
- package/.agent/skills/python-pro/SKILL.md +1 -0
- package/.agent/skills/quieter/SKILL.md +6 -0
- package/.agent/skills/react-doctor/SKILL.md +6 -0
- package/.agent/skills/react-specialist/SKILL.md +32 -28
- package/.agent/skills/readme-builder/SKILL.md +1 -0
- package/.agent/skills/realtime-patterns/SKILL.md +34 -33
- package/.agent/skills/red-team-tactics/SKILL.md +1 -0
- package/.agent/skills/redesign-skill/SKILL.md +6 -0
- package/.agent/skills/review-animations/SKILL.md +5 -2
- package/.agent/skills/review-animations/STANDARDS.md +37 -23
- package/.agent/skills/rust-pro/SKILL.md +1 -0
- package/.agent/skills/seo-fundamentals/SKILL.md +4 -3
- package/.agent/skills/server-management/SKILL.md +1 -0
- package/.agent/skills/shadcn-ui-expert/SKILL.md +28 -22
- package/.agent/skills/shape/SKILL.md +9 -2
- package/.agent/skills/skill-creator/SKILL.md +1 -0
- package/.agent/skills/soft-skill/SKILL.md +6 -0
- package/.agent/skills/sounds-on-the-web/SKILL.md +1 -0
- package/.agent/skills/sql-pro/SKILL.md +1 -0
- package/.agent/skills/supabase-postgres-best-practices/SKILL.md +1 -0
- package/.agent/skills/svg-animation/SKILL.md +16 -7
- package/.agent/skills/swiftui-expert/SKILL.md +1 -0
- package/.agent/skills/swiss-design/SKILL.md +5 -0
- package/.agent/skills/system-design-pro/SKILL.md +1 -0
- package/.agent/skills/systematic-debugging/SKILL.md +1 -0
- package/.agent/skills/tailwind-patterns/SKILL.md +25 -11
- package/.agent/skills/taste-skill/SKILL.md +6 -0
- package/.agent/skills/tdd-workflow/SKILL.md +5 -0
- package/.agent/skills/test-result-analyzer/SKILL.md +1 -0
- package/.agent/skills/testing-patterns/SKILL.md +123 -115
- package/.agent/skills/thermo-nuclear-code-quality-review/SKILL.md +5 -0
- package/.agent/skills/thinking-protocol/SKILL.md +3 -0
- package/.agent/skills/to-spring-or-not-to-spring/SKILL.md +9 -8
- package/.agent/skills/transitions-dev/SKILL.md +19 -6
- package/.agent/skills/trend-researcher/SKILL.md +1 -0
- package/.agent/skills/typescript-advanced/SKILL.md +23 -18
- package/.agent/skills/typeset/SKILL.md +10 -1
- package/.agent/skills/ui-reasoning-engine/SKILL.md +67 -48
- package/.agent/skills/ui-skill-packs/SKILL.md +6 -1
- package/.agent/skills/ui-skills-root/SKILL.md +39 -38
- package/.agent/skills/ui-ux-pro-max/SKILL.md +34 -26
- package/.agent/skills/ui-ux-researcher/SKILL.md +1 -0
- package/.agent/skills/vector-search-pgvector/SKILL.md +78 -0
- package/.agent/skills/vue-expert/SKILL.md +22 -19
- package/.agent/skills/vulnerability-scanner/SKILL.md +22 -21
- package/.agent/skills/web-accessibility-auditor/SKILL.md +2 -1
- package/.agent/skills/web-design-guidelines/SKILL.md +16 -10
- package/.agent/skills/web-quality-audit/SKILL.md +5 -0
- package/.agent/skills/webapp-testing/SKILL.md +14 -13
- package/.agent/skills/webgpu-performance/SKILL.md +1 -0
- package/.agent/skills/whimsy-injector/SKILL.md +9 -5
- package/.agent/skills/workflow-optimizer/SKILL.md +1 -0
- package/.agent/skills/zero-trust-passkeys/SKILL.md +90 -0
- package/.agent/templates/DESIGN.md +119 -110
- package/.agent/templates/design-tokens.json +9 -6
- package/.agent/workflows/acf.md +1 -0
- package/.agent/workflows/api-tester.md +1 -0
- package/.agent/workflows/audit.md +1 -0
- package/.agent/workflows/brainstorm.md +1 -0
- package/.agent/workflows/changelog.md +1 -0
- package/.agent/workflows/contract.md +60 -0
- package/.agent/workflows/create.md +1 -0
- package/.agent/workflows/debug.md +1 -0
- package/.agent/workflows/deploy.md +1 -0
- package/.agent/workflows/enhance.md +1 -0
- package/.agent/workflows/fix-ci.md +89 -0
- package/.agent/workflows/fix.md +1 -0
- package/.agent/workflows/generate.md +1 -0
- package/.agent/workflows/marathon.md +1 -0
- package/.agent/workflows/migrate.md +1 -0
- package/.agent/workflows/minimal.md +9 -7
- package/.agent/workflows/orchestrate.md +1 -0
- package/.agent/workflows/performance-benchmarker.md +1 -0
- package/.agent/workflows/pipeline.md +26 -21
- package/.agent/workflows/plan.md +1 -0
- package/.agent/workflows/preview.md +1 -0
- package/.agent/workflows/refactor.md +3 -2
- package/.agent/workflows/review-ai.md +4 -3
- package/.agent/workflows/review.md +1 -0
- package/.agent/workflows/session.md +1 -0
- package/.agent/workflows/status.md +1 -0
- package/.agent/workflows/strengthen-skills.md +1 -0
- package/.agent/workflows/super-prompt.md +1 -0
- package/.agent/workflows/swarm.md +15 -3
- package/.agent/workflows/test.md +8 -7
- package/.agent/workflows/tribunal-backend.md +3 -2
- package/.agent/workflows/tribunal-cicd.md +104 -0
- package/.agent/workflows/tribunal-database.md +1 -0
- package/.agent/workflows/tribunal-frontend.md +8 -6
- package/.agent/workflows/tribunal-full.md +15 -14
- package/.agent/workflows/tribunal-mobile.md +6 -5
- package/.agent/workflows/tribunal-performance.md +1 -0
- package/.agent/workflows/tribunal-speed.md +1 -0
- package/.agent/workflows/tribunal-ui.md +29 -21
- package/.agent/workflows/ui-ux-pro-max.md +19 -15
- package/CONTRIBUTING.md +3 -3
- package/README.md +160 -88
- package/SECURITY.md +11 -11
- package/bin/mcp-server.js +512 -233
- package/bin/tribunal-kit.js +29 -30
- package/bin/wrapper.js +45 -48
- package/dist/cli.js +26 -0
- package/dist/commands/case.js +2 -0
- package/dist/commands/contract.js +440 -0
- package/dist/commands/memory.js +3 -2
- package/dist/commands/native.js +36 -0
- package/dist/commands/status.js +6 -0
- package/dist/esm/index.mjs +32 -0
- package/dist/index.d.ts +58 -3
- package/package.json +20 -16
- package/scripts/benchmark.js +62 -86
- package/scripts/changelog.js +67 -73
- package/scripts/fix-vbc.js +13 -15
- package/scripts/fix-vbc.ps1 +2 -118
- package/scripts/stress_benchmark.js +358 -0
- package/scripts/sync-version.js +71 -41
- package/scripts/validate-payload.js +23 -30
- package/scripts/visual_audit.js +23 -13
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before engineering route or page transitions, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Target Framework & API (View Transitions API vs Framer Motion `AnimatePresence`)
|
|
24
25
|
2. `AnimatePresence` Keying (Section 69) → Enforce `key={pathname}` and `mode="wait"` to prevent double-page DOM stacking
|
|
25
26
|
3. Vertical Displacement Cap → Keep route movement under $12\text{px}$ to prevent visual scroll shifts
|
|
@@ -31,6 +32,7 @@ Architect smooth, seamless page and route transitions without layout jumps or fr
|
|
|
31
32
|
## 3 Page Transition Architectures
|
|
32
33
|
|
|
33
34
|
### 1. Native Web View Transitions API
|
|
35
|
+
|
|
34
36
|
The modern web standard for seamless page transitions (works across MPAs and SPAs):
|
|
35
37
|
|
|
36
38
|
```javascript
|
|
@@ -63,11 +65,12 @@ function navigateToPage(url) {
|
|
|
63
65
|
```
|
|
64
66
|
|
|
65
67
|
### 2. Next.js App Router + Framer Motion (`AnimatePresence`)
|
|
68
|
+
|
|
66
69
|
```tsx
|
|
67
|
-
|
|
70
|
+
'use client';
|
|
68
71
|
|
|
69
|
-
import { usePathname } from
|
|
70
|
-
import { AnimatePresence, motion } from
|
|
72
|
+
import { usePathname } from 'next/navigation';
|
|
73
|
+
import { AnimatePresence, motion } from 'framer-motion';
|
|
71
74
|
|
|
72
75
|
export function RouteLayoutWrapper({ children }: { children: React.ReactNode }) {
|
|
73
76
|
const pathname = usePathname();
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before executing parallel agent dispatches, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Target file paths for concurrent workers → Enforce directory isolation; never allow two parallel workers to edit the same file
|
|
24
25
|
2. `Promise.allSettled()` error handling (Section 77) → Handle partial worker failures gracefully without crashing the pipeline
|
|
25
26
|
3. Context Window Budget → Keep total context across all parallel workers under 80,000 tokens
|
|
@@ -50,7 +51,11 @@ The foundation of parallel multi-agent architecture.
|
|
|
50
51
|
// Architectural representation (Fan-out/Fan-in)
|
|
51
52
|
async function executeParallelAudit(sourceCode: string) {
|
|
52
53
|
// Fan-Out
|
|
53
|
-
const promises = [
|
|
54
|
+
const promises = [
|
|
55
|
+
agentDispatch({ role: 'security-auditor', task: sourceCode }),
|
|
56
|
+
agentDispatch({ role: 'performance-profiling', task: sourceCode }),
|
|
57
|
+
agentDispatch({ role: 'web-accessibility-auditor', task: sourceCode }),
|
|
58
|
+
];
|
|
54
59
|
|
|
55
60
|
// Await concurrent resolution
|
|
56
61
|
// If one takes 10s and another takes 2s, the total wait is max(10s)
|
|
@@ -98,7 +103,7 @@ const results = await Promise.all(agentJobs);
|
|
|
98
103
|
const results = await Promise.allSettled(agentJobs);
|
|
99
104
|
|
|
100
105
|
for (const result of results) {
|
|
101
|
-
if (result.status ===
|
|
106
|
+
if (result.status === 'fulfilled') {
|
|
102
107
|
aggregatedOutput.push(result.value);
|
|
103
108
|
} else {
|
|
104
109
|
// 1 agent failed (e.g. rate limit, or runtime crash)
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before optimizing performance or auditing benchmarks, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Core Web Vitals Targets (INP replacing FID) (Section 26) → Target INP $\le 200\text{ms}$, LCP $\le 2.5\text{s}$, CLS $\le 0.1$; ban FID (deprecated)
|
|
24
25
|
2. Bundle Size Limits & Import Tree-Shaking (Section 55) → Enforce total gzipped JS $<200\text{KB}$; use deep imports (`lodash/debounce`) instead of full barrel imports
|
|
25
26
|
3. SQL EXPLAIN ANALYZE Requirement (Section 156) → Profile database queries with `EXPLAIN ANALYZE` before making index or query optimization changes
|
|
@@ -117,9 +118,9 @@ const sortedItems = useMemo(
|
|
|
117
118
|
// Common memory leaks in JavaScript:
|
|
118
119
|
// 1. Event listeners not cleaned up
|
|
119
120
|
useEffect(() => {
|
|
120
|
-
const handler = () => console.log(
|
|
121
|
-
window.addEventListener(
|
|
122
|
-
return () => window.removeEventListener(
|
|
121
|
+
const handler = () => console.log('resize');
|
|
122
|
+
window.addEventListener('resize', handler);
|
|
123
|
+
return () => window.removeEventListener('resize', handler); // ✅ cleanup
|
|
123
124
|
}, []);
|
|
124
125
|
|
|
125
126
|
// 2. Timers not cleared
|
|
@@ -131,11 +132,11 @@ useEffect(() => {
|
|
|
131
132
|
// 3. AbortController not used for fetch
|
|
132
133
|
useEffect(() => {
|
|
133
134
|
const controller = new AbortController();
|
|
134
|
-
fetch(
|
|
135
|
-
.then(
|
|
135
|
+
fetch('/api/data', { signal: controller.signal })
|
|
136
|
+
.then(res => res.json())
|
|
136
137
|
.then(setData)
|
|
137
|
-
.catch(
|
|
138
|
-
if (e.name !==
|
|
138
|
+
.catch(e => {
|
|
139
|
+
if (e.name !== 'AbortError') throw e;
|
|
139
140
|
});
|
|
140
141
|
return () => controller.abort(); // ✅ cancel on unmount
|
|
141
142
|
}, []);
|
|
@@ -150,7 +151,17 @@ useEffect(() => {
|
|
|
150
151
|
|
|
151
152
|
```html
|
|
152
153
|
<!-- Modern image loading -->
|
|
153
|
-
<img
|
|
154
|
+
<img
|
|
155
|
+
src="hero.webp"
|
|
156
|
+
srcset="hero-480.webp 480w, hero-768.webp 768w, hero-1200.webp 1200w"
|
|
157
|
+
sizes="(max-width: 768px) 100vw, 50vw"
|
|
158
|
+
width="1200"
|
|
159
|
+
height="800"
|
|
160
|
+
loading="lazy"
|
|
161
|
+
decoding="async"
|
|
162
|
+
alt="Product hero"
|
|
163
|
+
fetchpriority="high"
|
|
164
|
+
/>
|
|
154
165
|
|
|
155
166
|
<!-- Rules:
|
|
156
167
|
- ALWAYS set width and height (prevents CLS)
|
|
@@ -200,11 +211,11 @@ module.exports = {
|
|
|
200
211
|
ci: {
|
|
201
212
|
assert: {
|
|
202
213
|
assertions: {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
214
|
+
'categories:performance': ['error', { minScore: 0.9 }],
|
|
215
|
+
'first-contentful-paint': ['error', { maxNumericValue: 1500 }],
|
|
216
|
+
'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
|
|
217
|
+
'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
|
|
218
|
+
'total-byte-weight': ['error', { maxNumericValue: 500000 }],
|
|
208
219
|
},
|
|
209
220
|
},
|
|
210
221
|
},
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before writing implementation plans or execution blueprints, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Verification Criteria Requirement (Section 15) → Include explicit "How to verify" criteria for every wave; ban plan steps without verification
|
|
24
25
|
2. Phased Wave Segmentation (Section 41) → Segment multi-file tasks into testable, independent waves (Wave 1: Data, Wave 2: API, Wave 3: UI)
|
|
25
26
|
3. Non-Destructive Defaults & Rollback Rules (Section 66) → Define fallback feature toggles and database rollback procedures prior to execution
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before designing developer platforms or GitOps manifests, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Golden Path Self-Service Rule (Section 29) → Build pre-approved automated templates for bootstrapping services (CI, metrics, DB Terraform out-of-the-box)
|
|
24
25
|
2. GitOps Continuous Reconciliation (Section 48) → Enforce declarative GitOps (`selfHeal: true`) via ArgoCD/Flux; ban manual `kubectl apply` or console modifications
|
|
25
26
|
3. Higher-Level Terraform Modules (Section 76) → Encapsulate complex IaC logic into simple interface modules (`capacity`, `needs_replica`) to reduce cognitive load
|
|
@@ -71,11 +72,11 @@ metadata:
|
|
|
71
72
|
spec:
|
|
72
73
|
project: default
|
|
73
74
|
source:
|
|
74
|
-
repoURL:
|
|
75
|
+
repoURL: 'https://github.com/mycorp/infrastructure-ops'
|
|
75
76
|
path: k8s/auth-service
|
|
76
77
|
targetRevision: HEAD # Automatically deploys any merge to main
|
|
77
78
|
destination:
|
|
78
|
-
server:
|
|
79
|
+
server: 'https://kubernetes.default.svc'
|
|
79
80
|
namespace: auth-prod
|
|
80
81
|
syncPolicy:
|
|
81
82
|
automated:
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: platform-engineering-opentofu
|
|
3
|
+
description: Infrastructure as Code (IaC) with OpenTofu/Terraform/Pulumi, automated cloud provisioning, DevSecOps pipelines, and self-service platform engineering.
|
|
4
|
+
tools: Read, Grep, Glob, Edit, Write
|
|
5
|
+
version: 3.0.0
|
|
6
|
+
last-updated: 2026-08-05
|
|
7
|
+
script: .agent/scripts/verify_all.js
|
|
8
|
+
scripts-binding:
|
|
9
|
+
- .agent/scripts/security_scan.js
|
|
10
|
+
- .agent/scripts/verify_all.js
|
|
11
|
+
skills:
|
|
12
|
+
- devops-engineer
|
|
13
|
+
- platform-engineer
|
|
14
|
+
- cloud-architect
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
# Platform Engineering & OpenTofu IaC
|
|
18
|
+
|
|
19
|
+
## Mandatory Pre-Flight Context Inspection
|
|
20
|
+
|
|
21
|
+
Before provisioning cloud infrastructure:
|
|
22
|
+
|
|
23
|
+
1. OpenTofu State Locking → Use remote S3/DynamoDB or backend state locking to prevent concurrency collisions
|
|
24
|
+
2. Least Privilege IAM → Enforce strict role-based access control (RBAC) on all cloud resources
|
|
25
|
+
3. Plan Validation → Run `tofu plan` and static security analysis (tfsec/checkov) before `tofu apply`
|
|
26
|
+
|
|
27
|
+
## Production AWS VPC & ECS Module Blueprint
|
|
28
|
+
|
|
29
|
+
```hcl
|
|
30
|
+
terraform {
|
|
31
|
+
required_version = ">= 1.6.0"
|
|
32
|
+
required_providers {
|
|
33
|
+
aws = {
|
|
34
|
+
source = "hashicorp/aws"
|
|
35
|
+
version = "~> 5.0"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
variable "environment" {
|
|
41
|
+
type = string
|
|
42
|
+
default = "production"
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
resource "aws_vpc" "main" {
|
|
46
|
+
cidr_block = "10.0.0.0/16"
|
|
47
|
+
enable_dns_hostnames = true
|
|
48
|
+
enable_dns_support = true
|
|
49
|
+
|
|
50
|
+
tags = {
|
|
51
|
+
Name = "vpc-${var.environment}"
|
|
52
|
+
Environment = var.environment
|
|
53
|
+
ManagedBy = "OpenTofu"
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
resource "aws_subnet" "public_a" {
|
|
58
|
+
vpc_id = aws_vpc.main.id
|
|
59
|
+
cidr_block = "10.0.1.0/24"
|
|
60
|
+
availability_zone = "us-east-1a"
|
|
61
|
+
map_public_ip_on_launch = true
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## 🛑 Verification-Before-Completion (VBC) Protocol
|
|
66
|
+
|
|
67
|
+
- Run `tofu validate` and security scan before applying changes.
|
|
68
|
+
- Ensure rollback plan is explicitly documented.
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: playwright-ai-e2e
|
|
3
|
+
description: Modern Playwright 1.45+ E2E web testing, resilient ARIA locators, visual regression testing, network mocking, and AI-assisted flakiness detection.
|
|
4
|
+
tools: Read, Grep, Glob, Edit, Write
|
|
5
|
+
version: 3.0.0
|
|
6
|
+
last-updated: 2026-08-05
|
|
7
|
+
script: .agent/scripts/test_runner.js
|
|
8
|
+
scripts-binding:
|
|
9
|
+
- .agent/scripts/test_runner.js
|
|
10
|
+
- .agent/scripts/visual_audit.js
|
|
11
|
+
skills:
|
|
12
|
+
- playwright-best-practices
|
|
13
|
+
- webapp-testing
|
|
14
|
+
- testing-patterns
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
# Playwright AI E2E Testing — 2026 Standards
|
|
18
|
+
|
|
19
|
+
## Mandatory Pre-Flight Context Inspection
|
|
20
|
+
|
|
21
|
+
Before writing end-to-end web tests:
|
|
22
|
+
|
|
23
|
+
1. ARIA Role Locators → Use accessibility roles (`getByRole`, `getByText`) over brittle CSS selectors
|
|
24
|
+
2. Auto-Waiting & Zero Sleep → Avoid `page.waitForTimeout()`; rely on Playwright built-in auto-waiting
|
|
25
|
+
3. Network Interception → Mock external third-party APIs using `page.route()` for deterministic CI runs
|
|
26
|
+
|
|
27
|
+
## Resilient E2E API Route Mocking & Interaction Test
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
import { test, expect } from '@playwright/test';
|
|
31
|
+
|
|
32
|
+
test.describe('Dashboard Features', () => {
|
|
33
|
+
test.beforeEach(async ({ page }) => {
|
|
34
|
+
// Intercept external analytics API to avoid flaky network calls
|
|
35
|
+
await page.route('**/api/analytics', async route => {
|
|
36
|
+
await route.fulfill({
|
|
37
|
+
status: 200,
|
|
38
|
+
contentType: 'application/json',
|
|
39
|
+
body: JSON.stringify({ visits: 1042, conversions: 88 }),
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
test('user views analytics dashboard', async ({ page }) => {
|
|
45
|
+
await page.goto('/dashboard');
|
|
46
|
+
|
|
47
|
+
// Resilient ARIA locators
|
|
48
|
+
const heading = page.getByRole('heading', { name: 'Analytics' });
|
|
49
|
+
await expect(heading).toBeVisible();
|
|
50
|
+
|
|
51
|
+
const visitsText = page.getByText('1042');
|
|
52
|
+
await expect(visitsText).toBeVisible();
|
|
53
|
+
});
|
|
54
|
+
});
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## 🛑 Verification-Before-Completion (VBC) Protocol
|
|
58
|
+
|
|
59
|
+
- Run Playwright test suite in headless mode and verify zero flakiness.
|
|
60
|
+
- Ensure all interactive elements rely on resilient locators.
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before writing Playwright E2E tests or test fixtures, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Auto-Waiting & Resilient Selectors (Section 26) → Use `getByRole()`, `getByLabel()` or `getByTestId()`; ban `page.waitForTimeout()` and CSS layout paths
|
|
24
25
|
2. Complete Test Isolation Rule (Section 53) → Isolate every test in fresh browser context; ban cascading tests dependent on previous test outcomes
|
|
25
26
|
3. External Network Interception (Section 86) → Intercept 3rd party external APIs (`page.route()`) to eliminate flaky network failures in CI
|
|
@@ -46,13 +47,13 @@ Playwright automatically waits for elements to be actionable (visible, stable, n
|
|
|
46
47
|
await page.waitForTimeout(3000);
|
|
47
48
|
|
|
48
49
|
// ❌ FLAKY: CSS selectors tied to layout/styling changes
|
|
49
|
-
await page.locator(
|
|
50
|
+
await page.locator('.btn-primary > span').click();
|
|
50
51
|
|
|
51
52
|
// ✅ ROBUST: Playwright auto-waits for actionability based on user-centric selectors
|
|
52
|
-
await page.getByRole(
|
|
53
|
+
await page.getByRole('button', { name: 'Submit Checkout' }).click();
|
|
53
54
|
|
|
54
55
|
// ✅ ROBUST: Testing for expected states
|
|
55
|
-
await expect(page.getByText(
|
|
56
|
+
await expect(page.getByText('Order confirmed')).toBeVisible();
|
|
56
57
|
```
|
|
57
58
|
|
|
58
59
|
### The Selector Hierarchy (Best to Worst)
|
|
@@ -69,15 +70,15 @@ await expect(page.getByText("Order confirmed")).toBeVisible();
|
|
|
69
70
|
Do not cascade tests (where Test B requires Test A to pass first). Playwright gives every test a blank browser context isolated from the rest.
|
|
70
71
|
|
|
71
72
|
```typescript
|
|
72
|
-
import { test, expect } from
|
|
73
|
+
import { test, expect } from '@playwright/test';
|
|
73
74
|
|
|
74
75
|
// ❌ BAD: Cascading state
|
|
75
|
-
test.describe(
|
|
76
|
-
test(
|
|
76
|
+
test.describe('Dashboard', () => {
|
|
77
|
+
test('Login', async ({ page }) => {
|
|
77
78
|
await login(page); // Next test assumes this succeeded
|
|
78
79
|
});
|
|
79
|
-
test(
|
|
80
|
-
await page.getByRole(
|
|
80
|
+
test('Action', async ({ page }) => {
|
|
81
|
+
await page.getByRole('button', { name: 'Save' }).click();
|
|
81
82
|
});
|
|
82
83
|
});
|
|
83
84
|
|
|
@@ -85,12 +86,12 @@ test.describe("Dashboard", () => {
|
|
|
85
86
|
test.beforeEach(async ({ page }) => {
|
|
86
87
|
// Login directly via API to bypass slow UI login, seeding cookies
|
|
87
88
|
await performFastApiLogin(page);
|
|
88
|
-
await page.goto(
|
|
89
|
+
await page.goto('/dashboard');
|
|
89
90
|
});
|
|
90
91
|
|
|
91
|
-
test(
|
|
92
|
-
await page.getByRole(
|
|
93
|
-
await expect(page.getByRole(
|
|
92
|
+
test('Should save settings', async ({ page }) => {
|
|
93
|
+
await page.getByRole('button', { name: 'Save' }).click();
|
|
94
|
+
await expect(page.getByRole('alert')).toHaveText('Saved successfully');
|
|
94
95
|
});
|
|
95
96
|
```
|
|
96
97
|
|
|
@@ -101,16 +102,16 @@ test("Should save settings", async ({ page }) => {
|
|
|
101
102
|
E2E tests that rely on external 3rd party APIs (Stripe, SendGrid) will fail randomly due to network latency outside your control.
|
|
102
103
|
|
|
103
104
|
```typescript
|
|
104
|
-
test(
|
|
105
|
+
test('Should block invalid credit cards', async ({ page }) => {
|
|
105
106
|
// Intercept the outgoing request to the payment processor
|
|
106
|
-
await page.route(
|
|
107
|
+
await page.route('**/api/v1/charge*', async route => {
|
|
107
108
|
// Return a mocked failure response immediately
|
|
108
|
-
const json = { status:
|
|
109
|
+
const json = { status: 'declined', message: 'Insufficient funds' };
|
|
109
110
|
await route.fulfill({ status: 400, json });
|
|
110
111
|
});
|
|
111
112
|
|
|
112
|
-
await page.getByRole(
|
|
113
|
-
await expect(page.getByText(
|
|
113
|
+
await page.getByRole('button', { name: 'Purchase' }).click();
|
|
114
|
+
await expect(page.getByText('Insufficient funds')).toBeVisible();
|
|
114
115
|
});
|
|
115
116
|
```
|
|
116
117
|
|
|
@@ -120,33 +121,33 @@ test("Should block invalid credit cards", async ({ page }) => {
|
|
|
120
121
|
|
|
121
122
|
```typescript
|
|
122
123
|
// playwright.config.ts
|
|
123
|
-
import { defineConfig, devices } from
|
|
124
|
+
import { defineConfig, devices } from '@playwright/test';
|
|
124
125
|
|
|
125
126
|
export default defineConfig({
|
|
126
|
-
testDir:
|
|
127
|
+
testDir: './tests/e2e',
|
|
127
128
|
fullyParallel: true, // Run tests concurrently
|
|
128
129
|
forbidOnly: !!process.env.CI, // Fail build if `.only` was left in code
|
|
129
130
|
retries: process.env.CI ? 2 : 0, // Retry flakes on CI only
|
|
130
131
|
workers: process.env.CI ? 1 : undefined, // Reduce CI overload
|
|
131
|
-
reporter:
|
|
132
|
+
reporter: 'html',
|
|
132
133
|
|
|
133
134
|
use: {
|
|
134
|
-
trace:
|
|
135
|
-
video:
|
|
136
|
-
baseURL:
|
|
135
|
+
trace: 'on-first-retry', // Record trace viewer ONLY on failure to save space
|
|
136
|
+
video: 'retain-on-failure',
|
|
137
|
+
baseURL: 'http://localhost:3000',
|
|
137
138
|
},
|
|
138
139
|
|
|
139
140
|
projects: [
|
|
140
|
-
{ name:
|
|
141
|
-
{ name:
|
|
141
|
+
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
|
|
142
|
+
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
|
|
142
143
|
// Mobile Viewport Example
|
|
143
|
-
{ name:
|
|
144
|
+
{ name: 'Mobile Safari', use: { ...devices['iPhone 13'] } },
|
|
144
145
|
],
|
|
145
146
|
|
|
146
147
|
// Spin up local server before running tests
|
|
147
148
|
webServer: {
|
|
148
|
-
command:
|
|
149
|
-
url:
|
|
149
|
+
command: 'npm run build && npm run start',
|
|
150
|
+
url: 'http://localhost:3000',
|
|
150
151
|
reuseExistingServer: !process.env.CI,
|
|
151
152
|
},
|
|
152
153
|
});
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before running a pre-ship quality pass, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Target component / view state → Test across light and dark theme modes
|
|
24
25
|
2. The 10-Point Polish Checklist (Section 22) → Audit 8px grid alignment, tabular numbers, focus rings, press feedback, and CLS loading skeletons
|
|
25
26
|
3. Edge case string truncation → Test long user input strings with `truncate` or `line-clamp` boundaries
|
|
@@ -30,18 +31,18 @@ The comprehensive pre-ship inspection checklist to verify that code meets top-ti
|
|
|
30
31
|
|
|
31
32
|
## Pre-Ship 10-Point Polish Checklist
|
|
32
33
|
|
|
33
|
-
| #
|
|
34
|
-
|
|
|
35
|
-
| **1**
|
|
36
|
-
| **2**
|
|
37
|
-
| **3**
|
|
38
|
-
| **4**
|
|
39
|
-
| **5**
|
|
40
|
-
| **6**
|
|
41
|
-
| **7**
|
|
42
|
-
| **8**
|
|
43
|
-
| **9**
|
|
44
|
-
| **10** | **Reduced Motion**
|
|
34
|
+
| # | Inspection Item | Verification Rule |
|
|
35
|
+
| ------ | --------------------- | --------------------------------------------------------------------------------------------------------- |
|
|
36
|
+
| **1** | **Grid Alignment** | All paddings, margins, and flex gaps use strict 4px/8px multiples. |
|
|
37
|
+
| **2** | **Typography Scale** | Headings use `text-wrap: balance`; body copy limit max `65ch` per line. |
|
|
38
|
+
| **3** | **Tabular Data** | All numbers in tables, badges, and stats use `font-variant-numeric: tabular-nums`. |
|
|
39
|
+
| **4** | **Focus States** | Keyboard tab navigation shows visible, non-clipped `:focus-visible` ring. |
|
|
40
|
+
| **5** | **Press Feedback** | All buttons, links, and cards have explicit `:active` press feedback. |
|
|
41
|
+
| **6** | **Dark Mode** | Dark theme uses relative surface lightness steps and subtle borders instead of dark shadows. |
|
|
42
|
+
| **7** | **Overflow Handling** | Long text strings, email addresses, and filenames use proper text truncation (`truncate` / `line-clamp`). |
|
|
43
|
+
| **8** | **Empty States** | Lists, tables, and search results handle zero-item empty states gracefully. |
|
|
44
|
+
| **9** | **Loading Skeletons** | Slow data loads show matching skeleton pulses instead of sudden layout shifts (CLS). |
|
|
45
|
+
| **10** | **Reduced Motion** | CSS animations and JS motion respect `@media (prefers-reduced-motion: reduce)`. |
|
|
45
46
|
|
|
46
47
|
---
|
|
47
48
|
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before writing PowerShell `.ps1` scripts or Windows automation commands, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Object Pipeline vs String Parsing Rule (Section 23) → Operate directly on .NET object properties (`Get-Process | Stop-Process`); ban string splitting/parsing
|
|
24
25
|
2. Mandatory Script Strict Mode Header (Section 43) → Always declare `$ErrorActionPreference = "Stop"` and `Set-StrictMode -Version Latest` at top of automation scripts
|
|
25
26
|
3. Process-Scoped Execution Policy Bypass (Section 68) → Use process-level policy override (`powershell.exe -ExecutionPolicy Bypass -File ...`); ban system-wide `Set-ExecutionPolicy Unrestricted`
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before engineering SaaS pricing pages or comparison tables, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Tabular Price Numbers (Section 27) → Apply `font-variant-numeric: tabular-nums` to price digits to prevent layout jittering during Monthly/Annual toggles
|
|
24
25
|
2. Featured Tier Distinction (Section 31) → Highlight the "Most Popular" plan with distinct accent borders, badge pill, and solid primary CTA
|
|
25
26
|
3. Discount Badge (Section 26) → Display explicit "Save X%" discount badge alongside the Annual billing toggle option
|
|
@@ -31,20 +32,24 @@ Architect high-converting SaaS pricing tables with clear billing toggles, tier d
|
|
|
31
32
|
## 4 Pricing Table Rules
|
|
32
33
|
|
|
33
34
|
### 1. The Billing Cycle Toggle (Monthly vs Annual)
|
|
35
|
+
|
|
34
36
|
- Provide a clear segmented control or switch for **Monthly** / **Annual (Save 20%)**.
|
|
35
37
|
- Display an explicit "Save 20%" badge next to the annual option.
|
|
36
38
|
- Smoothly transition price numbers when toggling billing frequencies using `font-variant-numeric: tabular-nums`.
|
|
37
39
|
|
|
38
40
|
### 2. Tier Visual Hierarchy (Max 3-4 Tiers)
|
|
39
|
-
|
|
40
|
-
- **
|
|
41
|
-
- **
|
|
41
|
+
|
|
42
|
+
- **Hobby / Starter**: Quiet surface, border outline, ghost CTA button (_"Start free"_).
|
|
43
|
+
- **Pro / Business (Featured Tier)**: Prominent accent border, subtle glow/gradient header, "Most Popular" pill badge, solid primary CTA button (_"Start 14-day trial"_).
|
|
44
|
+
- **Enterprise**: Solid dark surface or neutral card, contact sales CTA (_"Talk to sales"_).
|
|
42
45
|
|
|
43
46
|
### 3. Price Display Formatting
|
|
47
|
+
|
|
44
48
|
- Big bold price numeral (`3.5rem` font size) + billing cadence label (`/month billed annually` in smaller muted text).
|
|
45
49
|
- Always include `$0` or `Free` tier explicitly if available.
|
|
46
50
|
|
|
47
51
|
### 4. Feature Checklist Consistency
|
|
52
|
+
|
|
48
53
|
- Group bullet points with green checkmark icons (`✓`).
|
|
49
54
|
- Explicitly list features included vs excluded (using muted dashed icons or opacity for missing features).
|
|
50
55
|
|