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 using or customizing shadcn/ui components, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Component Installation State → Check `@/components/ui/` directory for existing components before running `npx shadcn@latest add`
|
|
24
25
|
2. `cn` Utility Usage (Section 144) → Use `cn(...)` (combining `clsx` + `tailwind-merge`) for all conditional and overridden class names
|
|
25
26
|
3. Client Component Boundaries (Section 166) → Add `"use client"` on interactive Radix primitives (Dialog, Select, Popover) before rendering in App Router
|
|
@@ -78,30 +79,35 @@ Do not treat `components/ui/*` as an immutable black box. You are _supposed_ to
|
|
|
78
79
|
### Adding Variants via `cva` (Class Variance Authority)
|
|
79
80
|
|
|
80
81
|
```typescript
|
|
81
|
-
import { cva, type VariantProps } from
|
|
82
|
+
import { cva, type VariantProps } from 'class-variance-authority';
|
|
82
83
|
|
|
83
84
|
// Adding a new "ghost-rounded" variant to the Button component
|
|
84
|
-
const buttonVariants = cva(
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
const buttonVariants = cva(
|
|
86
|
+
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors...',
|
|
87
|
+
{
|
|
88
|
+
variants: {
|
|
89
|
+
variant: {
|
|
90
|
+
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
|
91
|
+
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
|
92
|
+
outline:
|
|
93
|
+
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
|
94
|
+
// YOUR CUSTOM VARIANT:
|
|
95
|
+
'ghost-rounded':
|
|
96
|
+
'bg-transparent hover:bg-accent hover:text-accent-foreground rounded-full px-6',
|
|
97
|
+
},
|
|
98
|
+
size: {
|
|
99
|
+
default: 'h-9 px-4 py-2',
|
|
100
|
+
sm: 'h-8 rounded-md px-3 text-xs',
|
|
101
|
+
lg: 'h-10 rounded-md px-8',
|
|
102
|
+
icon: 'h-9 w-9',
|
|
103
|
+
},
|
|
92
104
|
},
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
lg: "h-10 rounded-md px-8",
|
|
97
|
-
icon: "h-9 w-9",
|
|
105
|
+
defaultVariants: {
|
|
106
|
+
variant: 'default',
|
|
107
|
+
size: 'default',
|
|
98
108
|
},
|
|
99
109
|
},
|
|
100
|
-
|
|
101
|
-
variant: "default",
|
|
102
|
-
size: "default",
|
|
103
|
-
},
|
|
104
|
-
});
|
|
110
|
+
);
|
|
105
111
|
```
|
|
106
112
|
|
|
107
113
|
---
|
|
@@ -156,8 +162,8 @@ Implementation with Tailwind v4 CSS-first configuration:
|
|
|
156
162
|
The `cn` utility combines `clsx` (conditional classes) and `tailwind-merge` (fixing class conflicts).
|
|
157
163
|
|
|
158
164
|
```typescript
|
|
159
|
-
import { clsx, type ClassValue } from
|
|
160
|
-
import { twMerge } from
|
|
165
|
+
import { clsx, type ClassValue } from 'clsx';
|
|
166
|
+
import { twMerge } from 'tailwind-merge';
|
|
161
167
|
|
|
162
168
|
export function cn(...inputs: ClassValue[]) {
|
|
163
169
|
return twMerge(clsx(inputs));
|
|
@@ -168,7 +174,7 @@ export function cn(...inputs: ClassValue[]) {
|
|
|
168
174
|
const className = `px-4 py-2 bg-blue-500 hover:bg-blue-600 ${props.className}`;
|
|
169
175
|
|
|
170
176
|
// ✅ GOOD: cn resolves conflicts correctly
|
|
171
|
-
const className = cn(
|
|
177
|
+
const className = cn('px-4 py-2 bg-blue-500 hover:bg-blue-600', props.className);
|
|
172
178
|
```
|
|
173
179
|
|
|
174
180
|
---
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before generating UI component code for new features, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Target feature scope & user goals → Execute the 3-Step Shaping Workflow (Section 22)
|
|
24
25
|
2. State Inventory (Section 29) → Define 5 required component states (Default, Empty, Loading, Error, Success)
|
|
25
26
|
3. Architecture Contract (Section 37) → Draft entry/exit points and primary action contract before coding
|
|
@@ -31,12 +32,16 @@ Uncover core requirements, define interaction boundaries, and lock down screen f
|
|
|
31
32
|
## The 3-Step Shaping Workflow
|
|
32
33
|
|
|
33
34
|
### Step 1: High-Ambiguity Socratic Interview
|
|
35
|
+
|
|
34
36
|
Before designing components, ask 2 targeted questions about high-ambiguity choices:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
|
|
38
|
+
1. **Primary User Goal**: _What is the single most important action the user must accomplish on this screen?_
|
|
39
|
+
2. **Context & Entry Point**: _Where does the user arrive from, and where do they expect to go after completing this step?_
|
|
37
40
|
|
|
38
41
|
### Step 2: Screen Boundaries & State Inventory
|
|
42
|
+
|
|
39
43
|
Define the component states before implementation:
|
|
44
|
+
|
|
40
45
|
- **Default State**: Primary layout with standard populated data.
|
|
41
46
|
- **Empty State**: Zero-data view with creation prompt.
|
|
42
47
|
- **Loading State**: Skeleton placeholders.
|
|
@@ -44,7 +49,9 @@ Define the component states before implementation:
|
|
|
44
49
|
- **Success State**: Instant feedback toast or confirmation view.
|
|
45
50
|
|
|
46
51
|
### Step 3: Architecture Contract
|
|
52
|
+
|
|
47
53
|
Summarize the screen contract in a concise visual outline before coding:
|
|
54
|
+
|
|
48
55
|
```
|
|
49
56
|
[Screen Title]
|
|
50
57
|
├── Entry Point: (e.g. Dashboard -> "New Project" button)
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before creating a new skill module, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. `.agent/skills/` directory → Check if a skill in the same domain already exists to prevent duplication
|
|
24
25
|
2. Option A+C Hybrid Skill Schema (Section 26) → Enforce frontmatter with `version: 3.0.0`, `scripts-binding`, `Pre-Flight Checklist`, and `VBC Protocol`
|
|
25
26
|
3. Target skill path (`.agent/skills/<skill-name>/SKILL.md`) → Verify destination directory structure before creation
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before engineering luxury or soft-depth UI interfaces, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Multi-Layer Shadow Recipe (Section 25) → Blend low-opacity multi-layered ambient shadows ($\le 6\%$ opacity per layer) instead of heavy single drop shadows
|
|
24
25
|
2. Spatial Cadence (Section 37) → Increase container padding by $1.5\times$ ($\ge 24\text{px}$) to provide generous negative space
|
|
25
26
|
3. Color Harmonies (Section 40) → Use quiet, low-chroma monochromatic OKLCH palettes for background and typography
|
|
@@ -31,7 +32,9 @@ Craft high-end, luxury interfaces featuring soft depth, gentle surface transitio
|
|
|
31
32
|
## 4 Soft Design Rules
|
|
32
33
|
|
|
33
34
|
### 1. Multi-Layer Soft Ambient Depth
|
|
35
|
+
|
|
34
36
|
- Avoid harsh drop-shadows. Use low-opacity multi-layered ambient lighting shadows:
|
|
37
|
+
|
|
35
38
|
```css
|
|
36
39
|
.soft-depth-card {
|
|
37
40
|
background: var(--surface);
|
|
@@ -44,12 +47,15 @@ Craft high-end, luxury interfaces featuring soft depth, gentle surface transitio
|
|
|
44
47
|
```
|
|
45
48
|
|
|
46
49
|
### 2. Generous Negative Space Cadence
|
|
50
|
+
|
|
47
51
|
- Increase component padding by 1.5x (e.g. `24px` -> `36px`, `32px` -> `48px`). Generous negative space is the ultimate indicator of luxury software.
|
|
48
52
|
|
|
49
53
|
### 3. Subdued Monochrome Color Harmonies
|
|
54
|
+
|
|
50
55
|
- Use quiet, low-chroma monochromatic palettes (`oklch(0.97 0.005 240)` background with `oklch(0.22 0.01 240)` primary text).
|
|
51
56
|
|
|
52
57
|
### 4. Fluid, Low-Velocity Transitions
|
|
58
|
+
|
|
53
59
|
- Transition speeds should be gentle ($\approx 250\text{ms}$) with strong ease-out curves (`cubic-bezier(0.16, 1, 0.3, 1)`).
|
|
54
60
|
|
|
55
61
|
---
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before implementing web audio feedback, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Autoplay Policy Rules (Section 78) → Initialize `AudioContext` strictly after/inside user gesture interaction handlers
|
|
24
25
|
2. Gain Volume Caps → Keep gain volume subtle ($\le 0.15$ max gain) to prevent user auditory discomfort
|
|
25
26
|
3. Mute Preference Toggle (Section 66) → Provide a persistent sound mute option in settings or local storage
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before writing complex SQL queries or optimizing database performance, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. SARGability Inspection (Section 328) → Ensure WHERE clauses use SARGable predicates; avoid functions or string operations on indexed columns
|
|
24
25
|
2. Keyset Pagination over OFFSET (Section 74) → Use keyset/cursor pagination (`WHERE (created_at, id) < (...)`) instead of `OFFSET` for large tables (>10K rows)
|
|
25
26
|
3. EXPLAIN ANALYZE Verification (Section 358) → Run `EXPLAIN (ANALYZE, BUFFERS)` to inspect physical query cost, buffer hits, and join algorithms
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before engineering Supabase schemas or writing PostgreSQL migrations, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Row Level Security Mandatory Policy (Section 28) → Always enable RLS on every table (`alter table ... enable row level security;`) before deploying
|
|
24
25
|
2. Direct UID Match RLS Rule (Section 30) → Use direct equality (`auth.uid() = user_id`) in RLS policies; avoid slow `IN` subqueries
|
|
25
26
|
3. SQL Migration File Requirement (Section 38) → Write explicit SQL migration files (`supabase/migrations/`) rather than manual GUI operations
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before engineering SVG path or stroke animations, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Target SVG attributes → Ensure `fill="none"` is set on draw-on paths to prevent black fill occlusion
|
|
24
25
|
2. Path Length Calibration (Section 70) → Calculate exact `path.getTotalLength()` instead of guessing `stroke-dasharray` values
|
|
25
26
|
3. Non-scaling Stroke rule (Section 83) → Apply `vector-effect="non-scaling-stroke"` if vector elements scale across responsive viewports
|
|
@@ -31,10 +32,15 @@ Craft crisp, resolution-independent vector animations using CSS, Framer Motion,
|
|
|
31
32
|
## 3 SVG Motion Techniques
|
|
32
33
|
|
|
33
34
|
### 1. Pure CSS Stroke Draw-On Effect
|
|
35
|
+
|
|
34
36
|
```css
|
|
35
37
|
@keyframes draw-path {
|
|
36
|
-
from {
|
|
37
|
-
|
|
38
|
+
from {
|
|
39
|
+
stroke-dashoffset: 1000;
|
|
40
|
+
}
|
|
41
|
+
to {
|
|
42
|
+
stroke-dashoffset: 0;
|
|
43
|
+
}
|
|
38
44
|
}
|
|
39
45
|
|
|
40
46
|
.draw-signature-path {
|
|
@@ -45,8 +51,9 @@ Craft crisp, resolution-independent vector animations using CSS, Framer Motion,
|
|
|
45
51
|
```
|
|
46
52
|
|
|
47
53
|
### 2. Framer Motion SVG Path Length Animation
|
|
54
|
+
|
|
48
55
|
```tsx
|
|
49
|
-
import { motion } from
|
|
56
|
+
import { motion } from 'framer-motion';
|
|
50
57
|
|
|
51
58
|
export function DrawCheckmark() {
|
|
52
59
|
return (
|
|
@@ -55,7 +62,7 @@ export function DrawCheckmark() {
|
|
|
55
62
|
d="M5 13l4 4L19 7"
|
|
56
63
|
initial={{ pathLength: 0 }}
|
|
57
64
|
animate={{ pathLength: 1 }}
|
|
58
|
-
transition={{ duration: 0.4, ease:
|
|
65
|
+
transition={{ duration: 0.4, ease: 'easeOut' }}
|
|
59
66
|
/>
|
|
60
67
|
</svg>
|
|
61
68
|
);
|
|
@@ -63,12 +70,14 @@ export function DrawCheckmark() {
|
|
|
63
70
|
```
|
|
64
71
|
|
|
65
72
|
### 3. SVG Path Morphing (GSAP MorphSVGPlugin)
|
|
73
|
+
|
|
66
74
|
- Morph between 2 vector paths with identical point counts or using GSAP MorphSVG:
|
|
75
|
+
|
|
67
76
|
```javascript
|
|
68
|
-
gsap.to(
|
|
69
|
-
morphSVG:
|
|
77
|
+
gsap.to('#start-shape', {
|
|
78
|
+
morphSVG: '#end-shape',
|
|
70
79
|
duration: 0.6,
|
|
71
|
-
ease:
|
|
80
|
+
ease: 'power2.inOut',
|
|
72
81
|
});
|
|
73
82
|
```
|
|
74
83
|
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before writing or refactoring SwiftUI components, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Modern Observable Macro (iOS 17+) (Section 43) → Use `@Observable` macro for reference types; ban legacy `@StateObject` / `@Published` boilerplate in iOS 17+ code
|
|
24
25
|
2. Identifiable Protocol in ForEach (Section 125) → Conform model types to `Identifiable` for `ForEach`; ban integer index iteration (`0..<items.count`)
|
|
25
26
|
3. NavigationStack Standard (Section 18) → Use `NavigationStack` or `NavigationSplitView`; ban deprecated legacy `NavigationView`
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before applying Swiss Design aesthetics, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. `DESIGN.md` / `index.css` → Check grid system tokens and grotesque font declarations (Helvetica, Inter, Geist)
|
|
24
25
|
2. Asymmetric Structural Balance (Section 32) → Align headings and content to strong left vertical axes; strictly prohibit `text-align: justify` or centered body paragraphs
|
|
25
26
|
3. Mathematical Section Numbering (Section 35) → Enforce small uppercase badges (`SECTION 01 // OVERVIEW`) with `tabular-nums`
|
|
@@ -31,17 +32,21 @@ Architect pristine, print-inspired interfaces grounded in grid discipline, objec
|
|
|
31
32
|
## 4 Swiss Design Pillars
|
|
32
33
|
|
|
33
34
|
### 1. Strict Grid Alignment
|
|
35
|
+
|
|
34
36
|
- Every layout element MUST align strictly to a visible or invisible 12-column grid.
|
|
35
37
|
- Border dividers use thin, sharp 1px solid lines matching `--foreground` opacity (e.g. `border-color: rgba(0,0,0,0.15)`).
|
|
36
38
|
|
|
37
39
|
### 2. High-Contrast Sans-Serif Typography
|
|
40
|
+
|
|
38
41
|
- Use clean grotesque sans-serif fonts (Helvetica, Inter, Geist, Neue Haas Grotesk).
|
|
39
42
|
- Pair large bold display titles (`3rem+`, `font-weight: 700`, `letter-spacing: -0.03em`) with clean flush-left, rag-right body copy (`text-align: left`).
|
|
40
43
|
|
|
41
44
|
### 3. Asymmetric Structural Balance
|
|
45
|
+
|
|
42
46
|
- Reject centered, symmetrical layouts. Align headings and content to strong left vertical axes, using generous negative space to anchor visual weight.
|
|
43
47
|
|
|
44
48
|
### 4. Mathematical Numbering & Labels
|
|
49
|
+
|
|
45
50
|
- Use small uppercase metadata badges (`SECTION 01 // OVERVIEW`) with tracking (`letter-spacing: 0.08em`) and monospace or tabular numbers (`font-variant-numeric: tabular-nums`).
|
|
46
51
|
|
|
47
52
|
---
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before designing system architecture or writing scale proposals, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. 6-Step Design Framework (Section 27) → Execute Clarify Scope, Scale Estimation, API Definition, Data Model, High-Level Design, and Deep Dive in exact order
|
|
24
25
|
2. Quantified Scale Estimation (Section 65) → Calculate read/write QPS, storage growth, and bandwidth before selecting database or caching tiers
|
|
25
26
|
3. Monolith First Rule (Section 17) → Start with modular monolith for $<10\text{K}$ RPM; ban introducing microservices or sharding prematurely
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before debugging issues or analyzing stack traces, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Single Variable Isolation (Section 15) → Change ONE variable at a time when debugging; ban shotgun debugging or multi-file edits simultaneously
|
|
24
25
|
2. Deterministic Reproduction Pre-requisite (Section 29) → Write a failing deterministic test/reproduction script FIRST before modifying code logic
|
|
25
26
|
3. Stack Trace Application Line Extraction (Section 98) → Trace up past `node_modules` to locate the top-most application code frame you wrote
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before engineering Tailwind CSS styles or themes, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. CSS-First v4 Configuration (Section 19) → Use `@import "tailwindcss";` and `@theme { }` in CSS files instead of deprecated `tailwind.config.js`
|
|
24
25
|
2. Viewport Height Units (Section 151) → Use `min-h-svh` (small viewport height) or `min-h-dvh` instead of broken mobile `min-h-screen`
|
|
25
26
|
3. Container Query Prefix (Section 204) → Use `@sm:`, `@md:`, `@lg:` container prefixes for component-level responsiveness rather than viewport `sm:`, `md:`, `lg:`
|
|
@@ -34,7 +35,7 @@ Before engineering Tailwind CSS styles or themes, you MUST inspect:
|
|
|
34
35
|
|
|
35
36
|
```css
|
|
36
37
|
/* app.css — THE configuration file in Tailwind v4 */
|
|
37
|
-
@import
|
|
38
|
+
@import 'tailwindcss';
|
|
38
39
|
|
|
39
40
|
@theme {
|
|
40
41
|
/* Colors */
|
|
@@ -51,8 +52,8 @@ Before engineering Tailwind CSS styles or themes, you MUST inspect:
|
|
|
51
52
|
--color-text-muted: oklch(0.45 0 0);
|
|
52
53
|
|
|
53
54
|
/* Typography */
|
|
54
|
-
--font-sans:
|
|
55
|
-
--font-mono:
|
|
55
|
+
--font-sans: 'Inter', 'system-ui', sans-serif;
|
|
56
|
+
--font-mono: 'JetBrains Mono', monospace;
|
|
56
57
|
|
|
57
58
|
/* Spacing (extends the default scale) */
|
|
58
59
|
--spacing-18: 4.5rem;
|
|
@@ -152,7 +153,9 @@ Before engineering Tailwind CSS styles or themes, you MUST inspect:
|
|
|
152
153
|
<p class="max-w-2xl text-center text-lg text-text-muted">Subtitle text</p>
|
|
153
154
|
<div class="flex gap-3">
|
|
154
155
|
<button class="rounded-pill bg-primary-600 px-6 py-3 text-white">Primary</button>
|
|
155
|
-
<button class="rounded-pill border border-primary-600 px-6 py-3 text-primary-600">
|
|
156
|
+
<button class="rounded-pill border border-primary-600 px-6 py-3 text-primary-600">
|
|
157
|
+
Secondary
|
|
158
|
+
</button>
|
|
156
159
|
</div>
|
|
157
160
|
</section>
|
|
158
161
|
|
|
@@ -229,10 +232,14 @@ Before engineering Tailwind CSS styles or themes, you MUST inspect:
|
|
|
229
232
|
|
|
230
233
|
```html
|
|
231
234
|
<!-- Fluid heading — scales smoothly from 2rem to 4rem -->
|
|
232
|
-
<h1 class="text-[clamp(2rem,5vw,4rem)] font-bold leading-tight tracking-tight">
|
|
235
|
+
<h1 class="text-[clamp(2rem,5vw,4rem)] font-bold leading-tight tracking-tight">
|
|
236
|
+
Responsive Heading
|
|
237
|
+
</h1>
|
|
233
238
|
|
|
234
239
|
<!-- Fluid body text -->
|
|
235
|
-
<p class="text-[clamp(1rem,1.2vw,1.25rem)] leading-relaxed text-text-muted">
|
|
240
|
+
<p class="text-[clamp(1rem,1.2vw,1.25rem)] leading-relaxed text-text-muted">
|
|
241
|
+
Body text that scales with viewport
|
|
242
|
+
</p>
|
|
236
243
|
|
|
237
244
|
<!-- Prose (for long-form content) -->
|
|
238
245
|
<article class="prose prose-lg mx-auto max-w-3xl dark:prose-invert">
|
|
@@ -247,14 +254,14 @@ Before engineering Tailwind CSS styles or themes, you MUST inspect:
|
|
|
247
254
|
```css
|
|
248
255
|
/* @font-face in your CSS (Tailwind v4 approach) */
|
|
249
256
|
@font-face {
|
|
250
|
-
font-family:
|
|
257
|
+
font-family: 'Inter';
|
|
251
258
|
font-weight: 100 900;
|
|
252
259
|
font-display: swap;
|
|
253
|
-
src: url(
|
|
260
|
+
src: url('/fonts/inter-variable.woff2') format('woff2');
|
|
254
261
|
}
|
|
255
262
|
|
|
256
263
|
@theme {
|
|
257
|
-
--font-sans:
|
|
264
|
+
--font-sans: 'Inter', system-ui, sans-serif;
|
|
258
265
|
}
|
|
259
266
|
```
|
|
260
267
|
|
|
@@ -356,7 +363,12 @@ Before engineering Tailwind CSS styles or themes, you MUST inspect:
|
|
|
356
363
|
backdrop-blur-sm animate-fade-in"
|
|
357
364
|
>
|
|
358
365
|
<!-- Modal -->
|
|
359
|
-
<div
|
|
366
|
+
<div
|
|
367
|
+
class="w-full max-w-md rounded-2xl bg-surface p-6 shadow-elevated animate-slide-up"
|
|
368
|
+
role="dialog"
|
|
369
|
+
aria-modal="true"
|
|
370
|
+
aria-labelledby="modal-title"
|
|
371
|
+
>
|
|
360
372
|
<h2 id="modal-title" class="text-lg font-semibold">Dialog Title</h2>
|
|
361
373
|
<p class="mt-2 text-sm text-text-muted">Dialog description.</p>
|
|
362
374
|
|
|
@@ -571,7 +583,9 @@ Before engineering Tailwind CSS styles or themes, you MUST inspect:
|
|
|
571
583
|
</div>
|
|
572
584
|
|
|
573
585
|
<!-- Forced colors mode (high contrast) -->
|
|
574
|
-
<button class="bg-primary-600 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]">
|
|
586
|
+
<button class="bg-primary-600 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]">
|
|
587
|
+
Accessible button
|
|
588
|
+
</button>
|
|
575
589
|
```
|
|
576
590
|
|
|
577
591
|
---
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before rendering UI components, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Banned AI Clichés (Section 24) → Strictly ban purple/indigo gradients (`from-purple-600 to-indigo-600`), glowing neon borders, and floating 3D spheres
|
|
24
25
|
2. Typography Rules (Section 30) → Apply negative tracking (`-0.025em`) + `text-wrap: balance` to display headings; cap body text at `65ch` max width
|
|
25
26
|
3. Tactile Press Feedback (Section 39) → Enforce `:active` press feedback (`transform: scale(0.97)`) on all interactive buttons/cards
|
|
@@ -31,24 +32,29 @@ Enforce senior-level design taste, anti-slop constraints, and visual craft acros
|
|
|
31
32
|
## The 5 Rules of Design Taste
|
|
32
33
|
|
|
33
34
|
### 1. Banned AI Visual Clichés (Zero Tolerance)
|
|
35
|
+
|
|
34
36
|
- ❌ Purple/violet gradient backgrounds (`from-purple-600 to-indigo-600`).
|
|
35
37
|
- ❌ Glowing neon borders on every card element.
|
|
36
38
|
- ❌ Floating 3D spheres or generic iridescent mesh gradients.
|
|
37
39
|
- ❌ Identical Bento Box 3-column grids on every page.
|
|
38
40
|
|
|
39
41
|
### 2. High-Fidelity Typography
|
|
42
|
+
|
|
40
43
|
- Typography accounts for 80% of interface perception.
|
|
41
44
|
- Display headings must use negative tracking (`-0.025em`) and balanced text wrapping (`text-wrap: balance`).
|
|
42
45
|
- Body text line length MUST be bounded to `65ch` max width.
|
|
43
46
|
|
|
44
47
|
### 3. Spatial System Strictness
|
|
48
|
+
|
|
45
49
|
- Never use arbitrary `px` paddings or margins (`margin-top: 17px`).
|
|
46
50
|
- Enforce strict 8px spatial grid math (`4px`, `8px`, `12px`, `16px`, `24px`, `32px`, `48px`, `64px`).
|
|
47
51
|
|
|
48
52
|
### 4. Tactile Micro-Feedback
|
|
53
|
+
|
|
49
54
|
- All interactive controls MUST respond to press with `transform: scale(0.97)` on `:active` with transition duration $\le 160\text{ms}$.
|
|
50
55
|
|
|
51
56
|
### 5. Multi-Layer Depth Over Flat Lines
|
|
57
|
+
|
|
52
58
|
- Replace harsh black borders with multi-layer ambient drop shadows and subtle 8% opacity surface outlines.
|
|
53
59
|
|
|
54
60
|
---
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before implementing feature logic or writing unit tests, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. Red-Green-Refactor Cycle (Section 25) → Write failing test FIRST (Red) → minimal passing code SECOND (Green) → cleanup THIRD (Refactor)
|
|
24
25
|
2. Behavior-First Assertion Rule (Section 36) → Assert public contract results (GIVEN/WHEN/THEN); ban asserting internal private fields or state
|
|
25
26
|
3. IO Boundary-Only Mocking (Section 50) → Mock ONLY un-owned external boundaries (DB IO, network APIs); ban mocking domain entities or pure utils
|
|
@@ -45,6 +46,7 @@ Build features and fixes one slice at a time using strict Test-Driven Developmen
|
|
|
45
46
|
## 4 TDD Rules
|
|
46
47
|
|
|
47
48
|
### 1. Test Behavior, Not Implementation Details
|
|
49
|
+
|
|
48
50
|
- Assert GIVEN / WHEN / THEN behavior results, NOT private class methods or internal variables.
|
|
49
51
|
|
|
50
52
|
```typescript
|
|
@@ -56,12 +58,15 @@ expect(calculator.add(40, 2)).toBe(42);
|
|
|
56
58
|
```
|
|
57
59
|
|
|
58
60
|
### 2. The Minimal Green Rule
|
|
61
|
+
|
|
59
62
|
- In Step 2 (GREEN), write ONLY the minimal code required to pass the test—even if it's hardcoding a return value initially. This forces you to write the next test that proves the hardcoded value inadequate.
|
|
60
63
|
|
|
61
64
|
### 3. Mock Only External Boundaries
|
|
65
|
+
|
|
62
66
|
- Never mock internal domain entities or utility functions. Mock ONLY un-owned external boundaries (database IO, network APIs, payment gateways).
|
|
63
67
|
|
|
64
68
|
### 4. Triangulation Strategy
|
|
69
|
+
|
|
65
70
|
- When uncertain about algorithm logic, write 2 or more tests with different inputs to force general implementation.
|
|
66
71
|
|
|
67
72
|
---
|
|
@@ -20,6 +20,7 @@ scripts-binding:
|
|
|
20
20
|
## Mandatory Pre-Flight Context Inspection
|
|
21
21
|
|
|
22
22
|
Before analyzing failing test logs or output traces, you MUST inspect:
|
|
23
|
+
|
|
23
24
|
1. First Point of Failure (FPF) Isolation (Section 114) → Identify the initial root failure in execution order first; ban fixing cascading downstream failures beforehand
|
|
24
25
|
2. Cluster Categorization Rule (Section 88) → Group failures by shared module/error type to resolve dozens of failures via single root fixes
|
|
25
26
|
3. Literal Trace Extract Discipline (Section 257) → Quote exact Expected/Received values and line numbers strictly from actual logs; ban guessing assertion details
|