codehava-agent-kit 1.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/README.md +56 -0
- package/bin/cli.js +56 -0
- package/package.json +26 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/charts.csv +26 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/colors.csv +97 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/icons.csv +101 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/landing.csv +31 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/products.csv +97 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/prompts.csv +24 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/react-performance.csv +45 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/jetpack-compose.csv +53 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/react.csv +54 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/vue.csv +50 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/styles.csv +59 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/typography.csv +58 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/ui-reasoning.csv +101 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/web-interface.csv +31 -0
- package/templates/.agent/.shared/ui-ux-pro-max/scripts/__pycache__/core.cpython-313.pyc +0 -0
- package/templates/.agent/.shared/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-313.pyc +0 -0
- package/templates/.agent/.shared/ui-ux-pro-max/scripts/core.py +258 -0
- package/templates/.agent/.shared/ui-ux-pro-max/scripts/design_system.py +1067 -0
- package/templates/.agent/.shared/ui-ux-pro-max/scripts/search.py +106 -0
- package/templates/.agent/agents/backend-specialist.md +263 -0
- package/templates/.agent/agents/code-archaeologist.md +106 -0
- package/templates/.agent/agents/database-architect.md +226 -0
- package/templates/.agent/agents/debugger.md +225 -0
- package/templates/.agent/agents/devops-engineer.md +242 -0
- package/templates/.agent/agents/documentation-writer.md +104 -0
- package/templates/.agent/agents/explorer-agent.md +73 -0
- package/templates/.agent/agents/frontend-specialist.md +593 -0
- package/templates/.agent/agents/game-developer.md +162 -0
- package/templates/.agent/agents/mobile-developer.md +377 -0
- package/templates/.agent/agents/orchestrator.md +416 -0
- package/templates/.agent/agents/penetration-tester.md +188 -0
- package/templates/.agent/agents/performance-optimizer.md +187 -0
- package/templates/.agent/agents/product-manager.md +112 -0
- package/templates/.agent/agents/product-owner.md +95 -0
- package/templates/.agent/agents/project-planner.md +406 -0
- package/templates/.agent/agents/qa-automation-engineer.md +103 -0
- package/templates/.agent/agents/security-auditor.md +170 -0
- package/templates/.agent/agents/seo-specialist.md +111 -0
- package/templates/.agent/agents/test-engineer.md +158 -0
- package/templates/.agent/mcp_config.json +129 -0
- package/templates/.agent/rules/GEMINI.md +273 -0
- package/templates/.agent/scripts/auto_preview.py +148 -0
- package/templates/.agent/scripts/checklist.py +217 -0
- package/templates/.agent/scripts/session_manager.py +120 -0
- package/templates/.agent/scripts/verify_all.py +327 -0
- package/templates/.agent/skills/api-patterns/SKILL.md +81 -0
- package/templates/.agent/skills/api-patterns/api-style.md +42 -0
- package/templates/.agent/skills/api-patterns/auth.md +24 -0
- package/templates/.agent/skills/api-patterns/documentation.md +26 -0
- package/templates/.agent/skills/api-patterns/graphql.md +41 -0
- package/templates/.agent/skills/api-patterns/rate-limiting.md +31 -0
- package/templates/.agent/skills/api-patterns/response.md +37 -0
- package/templates/.agent/skills/api-patterns/rest.md +40 -0
- package/templates/.agent/skills/api-patterns/scripts/api_validator.py +211 -0
- package/templates/.agent/skills/api-patterns/security-testing.md +122 -0
- package/templates/.agent/skills/api-patterns/trpc.md +41 -0
- package/templates/.agent/skills/api-patterns/versioning.md +22 -0
- package/templates/.agent/skills/app-builder/SKILL.md +75 -0
- package/templates/.agent/skills/app-builder/agent-coordination.md +71 -0
- package/templates/.agent/skills/app-builder/feature-building.md +53 -0
- package/templates/.agent/skills/app-builder/project-detection.md +34 -0
- package/templates/.agent/skills/app-builder/scaffolding.md +118 -0
- package/templates/.agent/skills/app-builder/tech-stack.md +41 -0
- package/templates/.agent/skills/app-builder/templates/SKILL.md +39 -0
- package/templates/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md +76 -0
- package/templates/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md +92 -0
- package/templates/.agent/skills/app-builder/templates/cli-tool/TEMPLATE.md +88 -0
- package/templates/.agent/skills/app-builder/templates/electron-desktop/TEMPLATE.md +88 -0
- package/templates/.agent/skills/app-builder/templates/express-api/TEMPLATE.md +83 -0
- package/templates/.agent/skills/app-builder/templates/flutter-app/TEMPLATE.md +90 -0
- package/templates/.agent/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +90 -0
- package/templates/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +122 -0
- package/templates/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +122 -0
- package/templates/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +169 -0
- package/templates/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +134 -0
- package/templates/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md +83 -0
- package/templates/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +119 -0
- package/templates/.agent/skills/architecture/SKILL.md +55 -0
- package/templates/.agent/skills/architecture/context-discovery.md +43 -0
- package/templates/.agent/skills/architecture/examples.md +94 -0
- package/templates/.agent/skills/architecture/pattern-selection.md +68 -0
- package/templates/.agent/skills/architecture/patterns-reference.md +50 -0
- package/templates/.agent/skills/architecture/trade-off-analysis.md +77 -0
- package/templates/.agent/skills/bash-linux/SKILL.md +199 -0
- package/templates/.agent/skills/behavioral-modes/SKILL.md +242 -0
- package/templates/.agent/skills/better-auth-patterns/SKILL.md +121 -0
- package/templates/.agent/skills/brainstorming/SKILL.md +163 -0
- package/templates/.agent/skills/brainstorming/dynamic-questioning.md +350 -0
- package/templates/.agent/skills/bullmq-worker/SKILL.md +124 -0
- package/templates/.agent/skills/clean-code/SKILL.md +201 -0
- package/templates/.agent/skills/code-review-checklist/SKILL.md +109 -0
- package/templates/.agent/skills/database-design/SKILL.md +52 -0
- package/templates/.agent/skills/database-design/database-selection.md +43 -0
- package/templates/.agent/skills/database-design/indexing.md +39 -0
- package/templates/.agent/skills/database-design/migrations.md +48 -0
- package/templates/.agent/skills/database-design/optimization.md +36 -0
- package/templates/.agent/skills/database-design/orm-selection.md +30 -0
- package/templates/.agent/skills/database-design/schema-design.md +56 -0
- package/templates/.agent/skills/database-design/scripts/schema_validator.py +172 -0
- package/templates/.agent/skills/deployment-procedures/SKILL.md +241 -0
- package/templates/.agent/skills/doc.md +177 -0
- package/templates/.agent/skills/documentation-templates/SKILL.md +194 -0
- package/templates/.agent/skills/feature-spec-writer/SKILL.md +76 -0
- package/templates/.agent/skills/frontend-design/SKILL.md +452 -0
- package/templates/.agent/skills/frontend-design/animation-guide.md +331 -0
- package/templates/.agent/skills/frontend-design/color-system.md +311 -0
- package/templates/.agent/skills/frontend-design/decision-trees.md +418 -0
- package/templates/.agent/skills/frontend-design/motion-graphics.md +306 -0
- package/templates/.agent/skills/frontend-design/scripts/accessibility_checker.py +183 -0
- package/templates/.agent/skills/frontend-design/scripts/ux_audit.py +722 -0
- package/templates/.agent/skills/frontend-design/typography-system.md +345 -0
- package/templates/.agent/skills/frontend-design/ux-psychology.md +1116 -0
- package/templates/.agent/skills/frontend-design/visual-effects.md +383 -0
- package/templates/.agent/skills/game-development/2d-games/SKILL.md +119 -0
- package/templates/.agent/skills/game-development/3d-games/SKILL.md +135 -0
- package/templates/.agent/skills/game-development/SKILL.md +167 -0
- package/templates/.agent/skills/game-development/game-art/SKILL.md +185 -0
- package/templates/.agent/skills/game-development/game-audio/SKILL.md +190 -0
- package/templates/.agent/skills/game-development/game-design/SKILL.md +129 -0
- package/templates/.agent/skills/game-development/mobile-games/SKILL.md +108 -0
- package/templates/.agent/skills/game-development/multiplayer/SKILL.md +132 -0
- package/templates/.agent/skills/game-development/pc-games/SKILL.md +144 -0
- package/templates/.agent/skills/game-development/vr-ar/SKILL.md +123 -0
- package/templates/.agent/skills/game-development/web-games/SKILL.md +150 -0
- package/templates/.agent/skills/geo-fundamentals/SKILL.md +156 -0
- package/templates/.agent/skills/geo-fundamentals/scripts/geo_checker.py +289 -0
- package/templates/.agent/skills/i18n-localization/SKILL.md +154 -0
- package/templates/.agent/skills/i18n-localization/scripts/i18n_checker.py +241 -0
- package/templates/.agent/skills/intelligent-routing/SKILL.md +335 -0
- package/templates/.agent/skills/lint-and-validate/SKILL.md +45 -0
- package/templates/.agent/skills/lint-and-validate/scripts/lint_runner.py +184 -0
- package/templates/.agent/skills/lint-and-validate/scripts/type_coverage.py +173 -0
- package/templates/.agent/skills/mcp-builder/SKILL.md +176 -0
- package/templates/.agent/skills/mobile-design/SKILL.md +394 -0
- package/templates/.agent/skills/mobile-design/decision-trees.md +516 -0
- package/templates/.agent/skills/mobile-design/mobile-backend.md +491 -0
- package/templates/.agent/skills/mobile-design/mobile-color-system.md +420 -0
- package/templates/.agent/skills/mobile-design/mobile-debugging.md +122 -0
- package/templates/.agent/skills/mobile-design/mobile-design-thinking.md +357 -0
- package/templates/.agent/skills/mobile-design/mobile-navigation.md +458 -0
- package/templates/.agent/skills/mobile-design/mobile-performance.md +767 -0
- package/templates/.agent/skills/mobile-design/mobile-testing.md +356 -0
- package/templates/.agent/skills/mobile-design/mobile-typography.md +433 -0
- package/templates/.agent/skills/mobile-design/platform-android.md +666 -0
- package/templates/.agent/skills/mobile-design/platform-ios.md +561 -0
- package/templates/.agent/skills/mobile-design/scripts/mobile_audit.py +670 -0
- package/templates/.agent/skills/mobile-design/touch-psychology.md +537 -0
- package/templates/.agent/skills/neo-storage/SKILL.md +115 -0
- package/templates/.agent/skills/nextjs-api-route/SKILL.md +134 -0
- package/templates/.agent/skills/nextjs-react-expert/1-async-eliminating-waterfalls.md +351 -0
- package/templates/.agent/skills/nextjs-react-expert/2-bundle-bundle-size-optimization.md +240 -0
- package/templates/.agent/skills/nextjs-react-expert/3-server-server-side-performance.md +490 -0
- package/templates/.agent/skills/nextjs-react-expert/4-client-client-side-data-fetching.md +264 -0
- package/templates/.agent/skills/nextjs-react-expert/5-rerender-re-render-optimization.md +581 -0
- package/templates/.agent/skills/nextjs-react-expert/6-rendering-rendering-performance.md +432 -0
- package/templates/.agent/skills/nextjs-react-expert/7-js-javascript-performance.md +684 -0
- package/templates/.agent/skills/nextjs-react-expert/8-advanced-advanced-patterns.md +150 -0
- package/templates/.agent/skills/nextjs-react-expert/9-cache-components.md +103 -0
- package/templates/.agent/skills/nextjs-react-expert/SKILL.md +293 -0
- package/templates/.agent/skills/nextjs-react-expert/scripts/convert_rules.py +222 -0
- package/templates/.agent/skills/nextjs-react-expert/scripts/react_performance_checker.py +252 -0
- package/templates/.agent/skills/nodejs-best-practices/SKILL.md +333 -0
- package/templates/.agent/skills/parallel-agents/SKILL.md +175 -0
- package/templates/.agent/skills/performance-profiling/SKILL.md +143 -0
- package/templates/.agent/skills/performance-profiling/scripts/lighthouse_audit.py +76 -0
- package/templates/.agent/skills/plan-writing/SKILL.md +152 -0
- package/templates/.agent/skills/powershell-windows/SKILL.md +167 -0
- package/templates/.agent/skills/prisma-7-patterns/SKILL.md +91 -0
- package/templates/.agent/skills/python-patterns/SKILL.md +441 -0
- package/templates/.agent/skills/red-team-tactics/SKILL.md +199 -0
- package/templates/.agent/skills/rust-pro/SKILL.md +176 -0
- package/templates/.agent/skills/seo-fundamentals/SKILL.md +129 -0
- package/templates/.agent/skills/seo-fundamentals/scripts/seo_checker.py +219 -0
- package/templates/.agent/skills/server-management/SKILL.md +161 -0
- package/templates/.agent/skills/systematic-debugging/SKILL.md +109 -0
- package/templates/.agent/skills/tailwind-patterns/SKILL.md +269 -0
- package/templates/.agent/skills/tdd-workflow/SKILL.md +149 -0
- package/templates/.agent/skills/testing-patterns/SKILL.md +178 -0
- package/templates/.agent/skills/testing-patterns/scripts/test_runner.py +219 -0
- package/templates/.agent/skills/uu-pdp-feature-check/SKILL.md +116 -0
- package/templates/.agent/skills/vibe-buildplan/SKILL.md +232 -0
- package/templates/.agent/skills/vibe-prd/SKILL.md +226 -0
- package/templates/.agent/skills/vibe-research/SKILL.md +162 -0
- package/templates/.agent/skills/vibe-techdesign/SKILL.md +195 -0
- package/templates/.agent/skills/vulnerability-scanner/SKILL.md +276 -0
- package/templates/.agent/skills/vulnerability-scanner/checklists.md +121 -0
- package/templates/.agent/skills/vulnerability-scanner/scripts/security_scan.py +458 -0
- package/templates/.agent/skills/web-design-guidelines/SKILL.md +57 -0
- package/templates/.agent/skills/webapp-testing/SKILL.md +187 -0
- package/templates/.agent/skills/webapp-testing/scripts/playwright_runner.py +173 -0
- package/templates/.agent/skills/xendit-integration/SKILL.md +100 -0
- package/templates/.agent/snippets/@react-component-template.tsx +29 -0
- package/templates/.agent/workflows/brainstorm.md +113 -0
- package/templates/.agent/workflows/create.md +59 -0
- package/templates/.agent/workflows/db-migrate.md +26 -0
- package/templates/.agent/workflows/debug.md +103 -0
- package/templates/.agent/workflows/deploy.md +35 -0
- package/templates/.agent/workflows/dev-reset.md +40 -0
- package/templates/.agent/workflows/enhance.md +63 -0
- package/templates/.agent/workflows/git-commit.md +24 -0
- package/templates/.agent/workflows/health-check.md +34 -0
- package/templates/.agent/workflows/new-feature.md +32 -0
- package/templates/.agent/workflows/orchestrate.md +237 -0
- package/templates/.agent/workflows/plan.md +89 -0
- package/templates/.agent/workflows/preview.md +81 -0
- package/templates/.agent/workflows/status.md +86 -0
- package/templates/.agent/workflows/test.md +144 -0
- package/templates/.agent/workflows/ui-ux-pro-max.md +296 -0
- package/templates/.agent/workflows/vibe-plan.md +133 -0
- package/templates/.agent/workflows/vibe-recap.md +17 -0
- package/templates/.antigravity/rules.md +64 -0
- package/templates/AGENTS.md +268 -0
- package/templates/docs/00A-PROJECT-CHARTER.md +33 -0
- package/templates/docs/00B-BRD.md +25 -0
- package/templates/docs/01-PRD.md +122 -0
- package/templates/docs/01B-SRS-LENGKAP.md +60 -0
- package/templates/docs/02-TECH-DESIGN.md +491 -0
- package/templates/docs/03-UI-GUIDELINES.md +301 -0
- package/templates/docs/04-BACKLOG.md +127 -0
- package/templates/docs/05-DEPLOYMENT.md +363 -0
- package/templates/docs/06-DEVELOPMENT-LOG.md +78 -0
- package/templates/specs/README.md +54 -0
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: flutter-app
|
|
3
|
+
description: Flutter mobile app template principles. Riverpod, Go Router, clean architecture.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Flutter App Template
|
|
7
|
+
|
|
8
|
+
## Tech Stack
|
|
9
|
+
|
|
10
|
+
| Component | Technology |
|
|
11
|
+
|-----------|------------|
|
|
12
|
+
| Framework | Flutter 3.x |
|
|
13
|
+
| Language | Dart 3.x |
|
|
14
|
+
| State | Riverpod 2.0 |
|
|
15
|
+
| Navigation | Go Router |
|
|
16
|
+
| HTTP | Dio |
|
|
17
|
+
| Storage | Hive |
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Directory Structure
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
project_name/
|
|
25
|
+
├── lib/
|
|
26
|
+
│ ├── main.dart
|
|
27
|
+
│ ├── app.dart
|
|
28
|
+
│ ├── core/
|
|
29
|
+
│ │ ├── constants/
|
|
30
|
+
│ │ ├── theme/
|
|
31
|
+
│ │ ├── router/
|
|
32
|
+
│ │ └── utils/
|
|
33
|
+
│ ├── features/
|
|
34
|
+
│ │ ├── auth/
|
|
35
|
+
│ │ │ ├── data/
|
|
36
|
+
│ │ │ ├── domain/
|
|
37
|
+
│ │ │ └── presentation/
|
|
38
|
+
│ │ └── home/
|
|
39
|
+
│ ├── shared/
|
|
40
|
+
│ │ ├── widgets/
|
|
41
|
+
│ │ └── providers/
|
|
42
|
+
│ └── services/
|
|
43
|
+
│ ├── api/
|
|
44
|
+
│ └── storage/
|
|
45
|
+
├── test/
|
|
46
|
+
└── pubspec.yaml
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## Architecture Layers
|
|
52
|
+
|
|
53
|
+
| Layer | Contents |
|
|
54
|
+
|-------|----------|
|
|
55
|
+
| Presentation | Screens, Widgets, Providers |
|
|
56
|
+
| Domain | Entities, Use Cases |
|
|
57
|
+
| Data | Repositories, Models |
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Key Packages
|
|
62
|
+
|
|
63
|
+
| Package | Purpose |
|
|
64
|
+
|---------|---------|
|
|
65
|
+
| flutter_riverpod | State management |
|
|
66
|
+
| riverpod_annotation | Code generation |
|
|
67
|
+
| go_router | Navigation |
|
|
68
|
+
| dio | HTTP client |
|
|
69
|
+
| freezed | Immutable models |
|
|
70
|
+
| hive | Local storage |
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
## Setup Steps
|
|
75
|
+
|
|
76
|
+
1. `flutter create {{name}} --org com.{{bundle}}`
|
|
77
|
+
2. Update `pubspec.yaml`
|
|
78
|
+
3. `flutter pub get`
|
|
79
|
+
4. Run code generation: `dart run build_runner build`
|
|
80
|
+
5. `flutter run`
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
## Best Practices
|
|
85
|
+
|
|
86
|
+
- Feature-first folder structure
|
|
87
|
+
- Riverpod for state, React Query pattern for server state
|
|
88
|
+
- Freezed for immutable data classes
|
|
89
|
+
- Go Router for declarative navigation
|
|
90
|
+
- Material 3 theming
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: monorepo-turborepo
|
|
3
|
+
description: Turborepo monorepo template principles. pnpm workspaces, shared packages.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Turborepo Monorepo Template
|
|
7
|
+
|
|
8
|
+
## Tech Stack
|
|
9
|
+
|
|
10
|
+
| Component | Technology |
|
|
11
|
+
|-----------|------------|
|
|
12
|
+
| Build System | Turborepo |
|
|
13
|
+
| Package Manager | pnpm |
|
|
14
|
+
| Apps | Next.js, Express |
|
|
15
|
+
| Packages | Shared UI, Config, Types |
|
|
16
|
+
| Language | TypeScript |
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Directory Structure
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
project-name/
|
|
24
|
+
├── apps/
|
|
25
|
+
│ ├── web/ # Next.js app
|
|
26
|
+
│ ├── api/ # Express API
|
|
27
|
+
│ └── docs/ # Documentation
|
|
28
|
+
├── packages/
|
|
29
|
+
│ ├── ui/ # Shared components
|
|
30
|
+
│ ├── config/ # ESLint, TS, Tailwind
|
|
31
|
+
│ ├── types/ # Shared types
|
|
32
|
+
│ └── utils/ # Shared utilities
|
|
33
|
+
├── turbo.json
|
|
34
|
+
├── pnpm-workspace.yaml
|
|
35
|
+
└── package.json
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Key Concepts
|
|
41
|
+
|
|
42
|
+
| Concept | Description |
|
|
43
|
+
|---------|-------------|
|
|
44
|
+
| Workspaces | pnpm-workspace.yaml |
|
|
45
|
+
| Pipeline | turbo.json task graph |
|
|
46
|
+
| Caching | Remote/local task caching |
|
|
47
|
+
| Dependencies | `workspace:*` protocol |
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## Turbo Pipeline
|
|
52
|
+
|
|
53
|
+
| Task | Depends On |
|
|
54
|
+
|------|------------|
|
|
55
|
+
| build | ^build (dependencies first) |
|
|
56
|
+
| dev | cache: false, persistent |
|
|
57
|
+
| lint | ^build |
|
|
58
|
+
| test | ^build |
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
## Setup Steps
|
|
63
|
+
|
|
64
|
+
1. Create root directory
|
|
65
|
+
2. `pnpm init`
|
|
66
|
+
3. Create pnpm-workspace.yaml
|
|
67
|
+
4. Create turbo.json
|
|
68
|
+
5. Add apps and packages
|
|
69
|
+
6. `pnpm install`
|
|
70
|
+
7. `pnpm dev`
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
## Common Commands
|
|
75
|
+
|
|
76
|
+
| Command | Description |
|
|
77
|
+
|---------|-------------|
|
|
78
|
+
| `pnpm dev` | Run all apps |
|
|
79
|
+
| `pnpm build` | Build all |
|
|
80
|
+
| `pnpm --filter @name/web dev` | Run specific app |
|
|
81
|
+
| `pnpm --filter @name/web add axios` | Add dep to app |
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## Best Practices
|
|
86
|
+
|
|
87
|
+
- Shared configs in packages/config
|
|
88
|
+
- Shared types in packages/types
|
|
89
|
+
- Internal packages with `workspace:*`
|
|
90
|
+
- Use Turbo remote caching for CI
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: nextjs-fullstack
|
|
3
|
+
description: Next.js full-stack template principles. App Router, Prisma, Tailwind v4.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Next.js Full-Stack Template (2026 Edition)
|
|
7
|
+
|
|
8
|
+
## Tech Stack
|
|
9
|
+
|
|
10
|
+
| Component | Technology | Version / Notes |
|
|
11
|
+
|-----------|------------|-----------------|
|
|
12
|
+
| Framework | Next.js | v16+ (App Router, Turbopack) |
|
|
13
|
+
| Language | TypeScript | v5+ (Strict Mode) |
|
|
14
|
+
| Database | PostgreSQL | Prisma ORM (Serverless friendly) |
|
|
15
|
+
| Styling | Tailwind CSS | v4.0 (Zero-config, CSS-first) |
|
|
16
|
+
| Auth | Clerk / Better Auth | Middleware Protected Routes |
|
|
17
|
+
| UI Logic | React 19 | Server Actions, useActionState |
|
|
18
|
+
| Validation | Zod | Schema validation (API & Forms) |
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Directory Structure
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
project-name/
|
|
26
|
+
├── prisma/
|
|
27
|
+
│ └── schema.prisma # Database schema
|
|
28
|
+
├── src/
|
|
29
|
+
│ ├── app/
|
|
30
|
+
│ │ ├── (auth)/ # Route groups for Login/Register
|
|
31
|
+
│ │ ├── (dashboard)/ # Protected routes
|
|
32
|
+
│ │ ├── api/ # Route Handlers (only for Webhooks/External integration)
|
|
33
|
+
│ │ ├── layout.tsx # Root Layout (Metadata, Providers)
|
|
34
|
+
│ │ ├── page.tsx # Landing Page
|
|
35
|
+
│ │ └── globals.css # Tailwind v4 config (@theme) lives here
|
|
36
|
+
│ ├── components/
|
|
37
|
+
│ │ ├── ui/ # Reusable UI (Button, Input)
|
|
38
|
+
│ │ └── forms/ # Client forms using useActionState
|
|
39
|
+
│ ├── lib/
|
|
40
|
+
│ │ ├── db.ts # Prisma singleton client
|
|
41
|
+
│ │ ├── utils.ts # Helper functions
|
|
42
|
+
│ │ └── dal.ts # Data Access Layer (Server-only)
|
|
43
|
+
│ ├── actions/ # Server Actions (Mutations)
|
|
44
|
+
│ └── types/ # Global TS Types
|
|
45
|
+
├── public/
|
|
46
|
+
├── next.config.ts # TypeScript Config
|
|
47
|
+
└── package.json
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
## Key Concepts (Updated)
|
|
53
|
+
|
|
54
|
+
| Concept | Description |
|
|
55
|
+
|---------|-------------|
|
|
56
|
+
| Server Components | Render on server (default). Direct DB access (Prisma) without APIs. |
|
|
57
|
+
| Server Actions | Handle Form mutations. Replaces traditional API Routes. Use in action={}. |
|
|
58
|
+
| React 19 Hooks | Form state management: useActionState, useFormStatus, useOptimistic. |
|
|
59
|
+
| Data Access Layer | Data security. Separation of DB logic (DTOs) for safe reuse. |
|
|
60
|
+
| Tailwind v4 | Styling engine. No tailwind.config.js. Config directly in CSS. |
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## Environment Variables
|
|
65
|
+
|
|
66
|
+
| Variable | Purpose |
|
|
67
|
+
|----------|---------|
|
|
68
|
+
| DATABASE_URL | PostgreSQL connection string (Prisma) |
|
|
69
|
+
| NEXT_PUBLIC_APP_URL | Public application URL |
|
|
70
|
+
| NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY | Auth (if using Clerk) |
|
|
71
|
+
| CLERK_SECRET_KEY | Auth Secret (Server only) |
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Setup Steps
|
|
76
|
+
|
|
77
|
+
1. Initialize Project:
|
|
78
|
+
```bash
|
|
79
|
+
npx create-next-app@latest my-app --typescript --tailwind --eslint
|
|
80
|
+
# Select Yes for App Router
|
|
81
|
+
# Select No for src directory (optional, this template uses src)
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
2. Install DB & Validation:
|
|
85
|
+
```bash
|
|
86
|
+
npm install prisma @prisma/client zod
|
|
87
|
+
npm install -D ts-node # For running seed scripts
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
3. Configure Tailwind v4 (If missing):
|
|
91
|
+
Ensure `src/app/globals.css` uses the new import syntax instead of a config file:
|
|
92
|
+
```css
|
|
93
|
+
@import "tailwindcss";
|
|
94
|
+
|
|
95
|
+
@theme {
|
|
96
|
+
--color-primary: oklch(0.5 0.2 240);
|
|
97
|
+
--font-sans: "Inter", sans-serif;
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
4. Initialize Database:
|
|
102
|
+
```bash
|
|
103
|
+
npx prisma init
|
|
104
|
+
# Update schema.prisma
|
|
105
|
+
npm run db:push
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
5. Run Developer Server:
|
|
109
|
+
```bash
|
|
110
|
+
npm run dev --turbo
|
|
111
|
+
# --turbo to enable faster Turbopack
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## Best Practices (2026 Standards)
|
|
117
|
+
|
|
118
|
+
- **Fetch Data**: Call Prisma directly in Server Components (async/await). Do not use useEffect for initial data fetching.
|
|
119
|
+
- **Mutations**: Use Server Actions combined with React 19's `useActionState` to handle loading and error states instead of manual useState.
|
|
120
|
+
- **Type Safety**: Share Zod schemas between Server Actions (input validation) and Client Forms.
|
|
121
|
+
- **Security**: Always validate input data with Zod before passing it to Prisma.
|
|
122
|
+
- **Styling**: Use native CSS variables in Tailwind v4 for easier dynamic theming.
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: nextjs-saas
|
|
3
|
+
description: Next.js SaaS template principles (2026 Standards). React 19, Server Actions, Auth.js v6.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Next.js SaaS Template (Updated 2026)
|
|
7
|
+
|
|
8
|
+
## Tech Stack
|
|
9
|
+
|
|
10
|
+
| Component | Technology | Version / Notes |
|
|
11
|
+
|-----------|------------|-----------------|
|
|
12
|
+
| Framework | Next.js | v16+ (App Router, React Compiler) |
|
|
13
|
+
| Runtime | Node.js | v24 (Krypton LTS) |
|
|
14
|
+
| Auth | Auth.js | v6 (formerly NextAuth) |
|
|
15
|
+
| Payments | Stripe API | Latest |
|
|
16
|
+
| Database | PostgreSQL | Prisma v6 (Serverless Driver) |
|
|
17
|
+
| Email | Resend | React Email |
|
|
18
|
+
| UI | Tailwind CSS | v4 (Oxide Engine, no config file) |
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Directory Structure
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
project-name/
|
|
26
|
+
├── prisma/
|
|
27
|
+
│ └── schema.prisma # Database Schema
|
|
28
|
+
├── src/
|
|
29
|
+
│ ├── actions/ # NEW: Server Actions (Replaces API Routes for data mutation)
|
|
30
|
+
│ │ ├── auth-actions.ts
|
|
31
|
+
│ │ ├── billing-actions.ts
|
|
32
|
+
│ │ └── user-actions.ts
|
|
33
|
+
│ ├── app/
|
|
34
|
+
│ │ ├── (auth)/ # Route Group: Login, register
|
|
35
|
+
│ │ ├── (dashboard)/ # Route Group: Protected routes (App Layout)
|
|
36
|
+
│ │ ├── (marketing)/ # Route Group: Landing, pricing (Marketing Layout)
|
|
37
|
+
│ │ └── api/ # Only used for Webhooks or Edge cases
|
|
38
|
+
│ │ └── webhooks/stripe/
|
|
39
|
+
│ ├── components/
|
|
40
|
+
│ │ ├── emails/ # React Email templates
|
|
41
|
+
│ │ ├── forms/ # Client components using useActionState (React 19)
|
|
42
|
+
│ │ └── ui/ # Shadcn UI
|
|
43
|
+
│ ├── lib/
|
|
44
|
+
│ │ ├── auth.ts # Auth.js v6 config
|
|
45
|
+
│ │ ├── db.ts # Prisma Singleton
|
|
46
|
+
│ │ └── stripe.ts # Stripe Singleton
|
|
47
|
+
│ └── styles/
|
|
48
|
+
│ └── globals.css # Tailwind v4 imports (CSS only)
|
|
49
|
+
└── package.json
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## SaaS Features
|
|
55
|
+
|
|
56
|
+
| Feature | Implementation |
|
|
57
|
+
|---------|---------------|
|
|
58
|
+
| Auth | Auth.js v6 + Passkeys + OAuth |
|
|
59
|
+
| Data Mutation | Server Actions (No API routes) |
|
|
60
|
+
| Subscriptions | Stripe Checkout & Customer Portal |
|
|
61
|
+
| Webhooks | Asynchronous Stripe event handling |
|
|
62
|
+
| Email | Transactional via Resend |
|
|
63
|
+
| Validation | Zod (Server-side validation) |
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## Database Schema
|
|
68
|
+
|
|
69
|
+
| Model | Fields (Key fields) |
|
|
70
|
+
|-------|---------------------|
|
|
71
|
+
| User | id, email, stripeCustomerId, subscriptionId, plan |
|
|
72
|
+
| Account | OAuth provider data (Google, GitHub...) |
|
|
73
|
+
| Session | User sessions (Database strategy) |
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## Environment Variables
|
|
78
|
+
|
|
79
|
+
| Variable | Purpose |
|
|
80
|
+
|----------|---------|
|
|
81
|
+
| DATABASE_URL | Prisma connection string (Postgres) |
|
|
82
|
+
| AUTH_SECRET | Replaces NEXTAUTH_SECRET (Auth.js v6) |
|
|
83
|
+
| STRIPE_SECRET_KEY | Payments (Server-side) |
|
|
84
|
+
| STRIPE_WEBHOOK_SECRET | Webhook verification |
|
|
85
|
+
| RESEND_API_KEY | Email sending |
|
|
86
|
+
| NEXT_PUBLIC_APP_URL | Application Canonical URL |
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## Setup Steps
|
|
91
|
+
|
|
92
|
+
1. Initialize project (Node 24):
|
|
93
|
+
```bash
|
|
94
|
+
npx create-next-app@latest {{name}} --typescript --eslint
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
2. Install core libraries:
|
|
98
|
+
```bash
|
|
99
|
+
npm install next-auth@beta stripe resend @prisma/client
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
3. Install Tailwind v4 (Add to globals.css):
|
|
103
|
+
```css
|
|
104
|
+
@import "tailwindcss";
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
4. Configure environment (.env.local)
|
|
108
|
+
|
|
109
|
+
5. Sync Database:
|
|
110
|
+
```bash
|
|
111
|
+
npx prisma db push
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
6. Run local Webhook:
|
|
115
|
+
```bash
|
|
116
|
+
npm run stripe:listen
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
7. Run project:
|
|
120
|
+
```bash
|
|
121
|
+
npm run dev
|
|
122
|
+
```
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: nextjs-static
|
|
3
|
+
description: Modern template for Next.js 16, React 19 & Tailwind v4. Optimized for Landing pages and Portfolios.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Next.js Static Site Template (Modern Edition)
|
|
7
|
+
|
|
8
|
+
## Tech Stack
|
|
9
|
+
|
|
10
|
+
| Component | Technology | Notes |
|
|
11
|
+
|-----------|------------|-------|
|
|
12
|
+
| Framework | Next.js 16+ | App Router, Turbopack, Static Exports |
|
|
13
|
+
| Core | React 19 | Server Components, New Hooks, Compiler |
|
|
14
|
+
| Language | TypeScript | Strict Mode |
|
|
15
|
+
| Styling | Tailwind CSS v4 | CSS-first configuration (No js config), Oxide Engine |
|
|
16
|
+
| Animations | Framer Motion | Layout animations & gestures |
|
|
17
|
+
| Icons | Lucide React | Lightweight SVG icons |
|
|
18
|
+
| SEO | Metadata API | Native Next.js API (Replaces next-seo) |
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Directory Structure
|
|
23
|
+
|
|
24
|
+
Streamlined structure thanks to Tailwind v4 (theme configuration lives inside CSS).
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
project-name/
|
|
28
|
+
├── src/
|
|
29
|
+
│ ├── app/
|
|
30
|
+
│ │ ├── layout.tsx # Contains root SEO Metadata
|
|
31
|
+
│ │ ├── page.tsx # Landing Page
|
|
32
|
+
│ │ ├── globals.css # Import Tailwind v4 & @theme config
|
|
33
|
+
│ │ ├── not-found.tsx # Custom 404 page
|
|
34
|
+
│ │ └── (routes)/ # Route groups (about, contact...)
|
|
35
|
+
│ ├── components/
|
|
36
|
+
│ │ ├── layout/ # Header, Footer
|
|
37
|
+
│ │ ├── sections/ # Hero, Features, Pricing, CTA
|
|
38
|
+
│ │ └── ui/ # Atomic components (Button, Card)
|
|
39
|
+
│ └── lib/
|
|
40
|
+
│ └── utils.ts # Helper functions (cn, formatters)
|
|
41
|
+
├── content/ # Markdown/MDX content
|
|
42
|
+
├── public/ # Static assets (images, fonts)
|
|
43
|
+
├── next.config.ts # Next.js Config (TypeScript)
|
|
44
|
+
└── package.json
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Static Export Config
|
|
50
|
+
|
|
51
|
+
Using `next.config.ts` instead of `.js` for better type safety.
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
// next.config.ts
|
|
55
|
+
import type { NextConfig } from "next";
|
|
56
|
+
|
|
57
|
+
const nextConfig: NextConfig = {
|
|
58
|
+
output: 'export', // Required for Static Hosting (S3, GitHub Pages)
|
|
59
|
+
images: {
|
|
60
|
+
unoptimized: true // Required if not using Node.js server image optimization
|
|
61
|
+
},
|
|
62
|
+
trailingSlash: true, // Recommended for SEO and fixing 404s on some hosts
|
|
63
|
+
reactStrictMode: true,
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
export default nextConfig;
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## SEO Implementation (Metadata API)
|
|
72
|
+
|
|
73
|
+
Deprecated next-seo. Configure directly in layout.tsx or page.tsx.
|
|
74
|
+
|
|
75
|
+
```typescript
|
|
76
|
+
// src/app/layout.tsx
|
|
77
|
+
import type { Metadata } from 'next';
|
|
78
|
+
|
|
79
|
+
export const metadata: Metadata = {
|
|
80
|
+
title: {
|
|
81
|
+
template: '%s | Product Name',
|
|
82
|
+
default: 'Home - Product Name',
|
|
83
|
+
},
|
|
84
|
+
description: 'SEO optimized description for the landing page.',
|
|
85
|
+
openGraph: {
|
|
86
|
+
type: 'website',
|
|
87
|
+
locale: 'en_US',
|
|
88
|
+
url: 'https://mysite.com',
|
|
89
|
+
siteName: 'My Brand',
|
|
90
|
+
},
|
|
91
|
+
};
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
## Landing Page Sections
|
|
97
|
+
|
|
98
|
+
| Section | Purpose | Suggested Component |
|
|
99
|
+
|---------|---------|---------------------|
|
|
100
|
+
| Hero | First impression, H1 & Main CTA | `<HeroSection />` |
|
|
101
|
+
| Features | Product benefits (Grid/Bento layout) | `<FeaturesGrid />` |
|
|
102
|
+
| Social Proof | Partner logos, User numbers | `<LogoCloud />` |
|
|
103
|
+
| Testimonials | Customer reviews | `<TestimonialCarousel />` |
|
|
104
|
+
| Pricing | Service plans | `<PricingCards />` |
|
|
105
|
+
| FAQ | Questions & Answers (Good for SEO) | `<Accordion />` |
|
|
106
|
+
| CTA | Final conversion | `<CallToAction />` |
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## Animation Patterns (Framer Motion)
|
|
111
|
+
|
|
112
|
+
| Pattern | Usage | Implementation |
|
|
113
|
+
|---------|-------|----------------|
|
|
114
|
+
| Fade Up | Headlines, paragraphs | `initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}` |
|
|
115
|
+
| Stagger | Lists of Features/Cards | Use variants with `staggerChildren` |
|
|
116
|
+
| Parallax | Background images or floating elements | `useScroll` & `useTransform` |
|
|
117
|
+
| Micro-interactions | Hover buttons, click effects | `whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}` |
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
## Setup Steps
|
|
122
|
+
|
|
123
|
+
1. Initialize Project:
|
|
124
|
+
```bash
|
|
125
|
+
npx create-next-app@latest my-site --typescript --tailwind --eslint
|
|
126
|
+
# Select 'Yes' for App Router
|
|
127
|
+
# Select 'No' for 'Would you like to customize the default import alias?'
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
2. Install Auxiliary Libraries:
|
|
131
|
+
```bash
|
|
132
|
+
npm install framer-motion lucide-react clsx tailwind-merge
|
|
133
|
+
# clsx and tailwind-merge help handle dynamic classes better
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
3. Configure Tailwind v4 (in `src/app/globals.css`):
|
|
137
|
+
```css
|
|
138
|
+
@import "tailwindcss";
|
|
139
|
+
|
|
140
|
+
@theme {
|
|
141
|
+
--color-primary: #3b82f6;
|
|
142
|
+
--font-sans: 'Inter', sans-serif;
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
4. Development:
|
|
147
|
+
```bash
|
|
148
|
+
npm run dev --turbopack
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
## Deployment
|
|
154
|
+
|
|
155
|
+
| Platform | Method | Important Notes |
|
|
156
|
+
|----------|--------|-----------------|
|
|
157
|
+
| Vercel | Git Push | Auto-detects Next.js. Best for performance. |
|
|
158
|
+
| GitHub Pages | GitHub Actions | Need to set `basePath` in `next.config.ts` if not using a custom domain. |
|
|
159
|
+
| AWS S3 / CloudFront | Upload out folder | Ensure Error Document is configured to `404.html`. |
|
|
160
|
+
| Netlify | Git Push | Set build command to `npm run build`. |
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## Best Practices (Modern)
|
|
165
|
+
|
|
166
|
+
- **React Server Components (RSC)**: Default all components to Server Components. Only add `'use client'` when you need state (`useState`) or event listeners (`onClick`).
|
|
167
|
+
- **Image Optimization**: Use the `<Image />` component but remember `unoptimized: true` for static export or use an external image CDN (Cloudinary/Imgix).
|
|
168
|
+
- **Font Optimization**: Use `next/font` (Google Fonts) to automatically host fonts and prevent layout shift.
|
|
169
|
+
- **Responsive**: Mobile-first design using Tailwind prefixes like `sm:`, `md:`, `lg:`.
|