Skip to content

Commit dbafea4

Browse files
SFARPakSFARPak
committed
docs: Update scaffold AI_RULES.md and add AI_RULES_3D.md
- Updated scaffold AI_RULES.md with latest development guidelines - Added new AI_RULES_3D.md file for 3D development context
1 parent 03b3245 commit dbafea4

File tree

2 files changed

+181
-2
lines changed

2 files changed

+181
-2
lines changed

‎AI_RULES_3D.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# AI_RULES.md
2+
3+
## 3D Landing Page Development Rules (Webflow-like with Modern 3D)
4+
5+
These rules define how to create a **modern 3D landing page** with Webflow-like aesthetics using **React, TypeScript, Tailwind CSS, and open-source 3D libraries** such as Three.js, React Three Fiber, and Spline alternatives.
6+
7+
---
8+
9+
## Core Tech Stack
10+
- **React + TypeScript** (strict mode).
11+
- **React Three Fiber (r3f)** for Three.js integration.
12+
- **@react-three/drei** for helpers, controls, and loaders.
13+
- **Framer Motion** for UI/UX animations & transitions.
14+
- **Tailwind CSS** for responsive layout and styling.
15+
- **shadcn/ui** for UI components (navigation, buttons, forms).
16+
- **Radix UI** primitives when needed.
17+
- **react-query** for data fetching (if APIs are needed).
18+
- **sonner** or **react-hot-toast** for notifications.
19+
20+
---
21+
22+
## File & Code Organization
23+
- `src/pages/` → All main page layouts.
24+
- `src/components/` → UI components (Hero, Navbar, Footer, CTA).
25+
- `src/components/3d/` → 3D scene components (CanvasWrapper, HeroScene, Models).
26+
- `src/assets/models/` → GLTF/GLB models and textures.
27+
- `src/hooks/` → Custom hooks (e.g., useResponsive3D, useAnimations).
28+
- `src/styles/` → Tailwind configurations and global styles.
29+
30+
---
31+
32+
## 3D & Animation Rules
33+
1. Use **React Three Fiber** for all 3D rendering.
34+
2. Use **drei helpers** (OrbitControls, Environment, Text, ContactShadows).
35+
3. Optimize 3D models before adding (Blender, glTF compression).
36+
4. Always wrap the 3D scene inside a `CanvasWrapper` with lazy loading + suspense.
37+
5. Use **Framer Motion** for UI overlays and transitions.
38+
6. Keep animations smooth (60fps target, GPU accelerated).
39+
7. Favor **lightweight materials & baked lighting** for performance.
40+
8. Use **responsive scaling** for 3D objects across devices.
41+
9. Consider **scroll-based animations** using `react-scroll` or `framer-motion`.
42+
43+
---
44+
45+
## Modern Design Guidelines
46+
- **Hero Section** → Fullscreen 3D canvas with a call-to-action overlay.
47+
- **Navigation** → Sticky navbar with smooth scroll + animated underline.
48+
- **Sections** → Use gradient backgrounds + glassmorphism cards.
49+
- **Typography** → Modern sans-serif with Tailwind presets.
50+
- **Animations** → Subtle parallax, hover effects, microinteractions.
51+
- **Dark Mode** → Ensure 3D scenes + UI adapt to dark/light themes.
52+
- **Responsiveness** → Test across mobile, tablet, and desktop.
53+
54+
---
55+
56+
## Performance Rules
57+
1. Use **GLTF/GLB** optimized models only.
58+
2. Use `useMemo` and `useFrame` wisely for animations.
59+
3. Leverage `drei/PerformanceMonitor` for adaptive quality.
60+
4. Enable **lazy loading** for 3D models & textures.
61+
5. Compress assets (images → WebP/AVIF, models → Draco/Basis).
62+
6. Run **Lighthouse CI** for performance audits.
63+
64+
---
65+
66+
## Deployment & Build
67+
- Deploy via **Vercel/Netlify** with CDN asset hosting.
68+
- Preload critical assets but lazy load non-essentials.
69+
- Ensure PWA support (manifest.json, service worker).
70+
- Add SEO meta tags and Open Graph tags.
71+
72+
---
73+
74+
## TL;DR Quick Setup
75+
- `CanvasWrapper` + `HeroScene` in `src/components/3d/`.
76+
- Navbar, Hero, Features, CTA, Footer inside `src/pages/Index.tsx`.
77+
- Use **r3f + drei** for 3D, **Framer Motion** for UI, **Tailwind** for styling.
78+
- Optimize models and test performance with Lighthouse.
79+
80+
---

‎scaffold/AI_RULES.md‎

Lines changed: 101 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Tech Stack
1+
<!-- # Tech Stack
22
- You are building a React application.
33
- Use TypeScript.
44
- Use React Router. KEEP the routes in src/App.tsx
@@ -19,4 +19,103 @@ Available packages and libraries:
1919
- The axios package is installed for HTTP requests.
2020
- You ALREADY have ALL the shadcn/ui components and their dependencies installed. So you don't need to install them again.
2121
- You have ALL the necessary Radix UI components installed.
22-
- Use prebuilt components from the shadcn/ui library after importing them. Note that these files shouldn't be edited, so make new components if you need to change them.
22+
- Use prebuilt components from the shadcn/ui library after importing them. Note that these files shouldn't be edited, so make new components if you need to change them. -->
23+
24+
25+
# Extended Tech & AI Development Rules
26+
27+
## TL;DR Quick Rules
28+
- Use **React + TypeScript**.
29+
- Keep routes in `src/App.tsx`.
30+
- Pages → `src/pages/`, Components → `src/components/`.
31+
- Default page → `src/pages/Index.tsx`. Always update Index to show new components.
32+
- Use **Tailwind CSS** for styling. Prefer gradients, glassmorphism, subtle animations.
33+
<!-- - Default to **shadcn/ui** components. Use **Radix UI** primitives when needed. -->
34+
- Default to **MUI** components. Use **shadcn/ui** or **Radix UI** primitives when needed.
35+
- Use **Framer Motion** for animations & transitions.
36+
- Use **react-query** for API calls. Prefer `react-hook-form + zod` for forms.
37+
- Use **sonner** or **react-hot-toast** for notifications.
38+
- Ensure **dark mode** and **responsiveness** for all components.
39+
- Follow **strict TypeScript** and **atomic design principles**.
40+
- Optimize with lazy loading and performance best practices.
41+
42+
---
43+
## Core Tech Stack
44+
- **React (TypeScript)** for building the application.
45+
- **React Router** for routing. Keep routes defined in `src/App.tsx`.
46+
- **File structure**:
47+
- Source code → `src/`
48+
- Pages → `src/pages/`
49+
- Components → `src/components/`
50+
- Main page (default page) → `src/pages/Index.tsx`
51+
- **Update `Index.tsx`** whenever new components are created, otherwise they won’t be visible.
52+
- **Styling**:
53+
- Use **Tailwind CSS** for all styling.
54+
- Utilize **utility classes** for spacing, colors, layouts, gradients, transitions, and shadows.
55+
- Follow **modern design principles**: clean UI, white space, gradients, subtle glassmorphism, and motion.
56+
57+
---
58+
59+
## UI/UX Component Libraries
60+
- **shadcn/ui** → primary component library.
61+
- **Radix UI** → for low-level primitives (accessible modals, popovers, menus).
62+
- **lucide-react** → for modern, lightweight icons.
63+
64+
---
65+
66+
## Additional Recommended Open-Source Libraries
67+
- **Framer Motion** → animations & transitions (cards, modals, page transitions, staggered lists).
68+
- **react-spring** → physics-based animations (optional alternative to Framer Motion).
69+
- **tailwindcss-animate** → prebuilt animation utilities for Tailwind.
70+
- **tailwind-variants** or **class-variance-authority (CVA)** → manage Tailwind component variants.
71+
- **tailwind-gradient-mask-image** → gradient masking utilities.
72+
- **tailwindcss-gradients / tailwind-gradient-generator** → gradient utilities for vibrant UI.
73+
- **tailwindcss-fluid-type** → fluid typography scaling across breakpoints.
74+
- **react-awesome-reveal** → reveal-on-scroll animations.
75+
- **react-wrap-balancer** → better text wrapping for responsive layouts.
76+
- **react-hot-toast** or **sonner** → modern, minimal toast notifications.
77+
78+
---
79+
80+
## Visualization & Data Display
81+
- **Recharts** or **Nivo** → interactive and modern charts.
82+
- **react-leaflet** → maps (already installed).
83+
- **react-confetti** or **canvas-confetti** → celebratory UI moments (gamification touch).
84+
85+
---
86+
87+
## Forms & Validation
88+
- **react-hook-form** → lightweight form handling.
89+
- **zod** → schema validation, can be paired with react-hook-form.
90+
- **@tanstack/react-query** → API data fetching, caching, optimistic updates.
91+
92+
---
93+
94+
## Animations & Effects (Modern SaaS Feel)
95+
- Use **Framer Motion** for page transitions, modals, and list animations.
96+
- Add **gradient backgrounds** (Tailwind + gradient utilities).
97+
- Use **glassmorphism overlays** (blurred translucent cards).
98+
- Add **micro-interactions** → hover states, animated icons, small feedback animations.
99+
- Add **parallax effects** with `react-scroll-parallax` for modern landing pages.
100+
- Implement **dark mode** using Tailwind’s `dark:` utilities.
101+
102+
---
103+
104+
## AI Rules (Extended)
105+
1. Always prioritize **accessibility** (ARIA roles, keyboard navigation).
106+
2. Default to **shadcn/ui** components. Extend only with modern libraries when needed.
107+
3. **Animations should be smooth & subtle**, not overwhelming (300–500ms duration).
108+
4. Use **gradients & glass effects** sparingly for clean SaaS aesthetics.
109+
5. Use **react-query** for API calls instead of raw axios unless custom logic is required.
110+
6. **Forms**: Always use `react-hook-form` with `zod` for validation.
111+
7. **Notifications**: Use `sonner` or `react-hot-toast` for toast alerts.
112+
8. **Charts/Visuals**: Use **Recharts/Nivo** for analytics dashboards.
113+
9. **Dark mode support** is required for every new component.
114+
10. Place reusable utilities (hooks, helpers) under `src/lib/` or `src/hooks/`.
115+
11. Write code in **strict TypeScript** (avoid `any`).
116+
12. Follow **atomic design principles**: build small components, compose into pages.
117+
13. Ensure **responsiveness** across mobile, tablet, desktop.
118+
14. Use **lazy loading** (`React.lazy`) for heavy components (charts, maps).
119+
15. Optimize for **performance**: prefer Tailwind classes, avoid unnecessary re-renders.
120+
121+
---

0 commit comments

Comments
 (0)