Skip to content

Commit ecc57dc

Browse files
dipankardas011dipankardas011
committed
updated the agents
Signed-off-by: Dipankar Das <[email protected]>
1 parent 67d1969 commit ecc57dc

File tree

2 files changed

+130
-0
lines changed

2 files changed

+130
-0
lines changed

‎AGENTS.md‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
# AGENTS.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Project Overview
6+
7+
This is the marketing website for **ksctl** - a cloud-agnostic Kubernetes management tool focused on sustainable and cost-efficient cluster deployment. Built with Astro 5, Tailwind CSS, and Alpine.js.
8+
9+
**Site URL:** https://ksctl.com
10+
11+
## Commands
12+
13+
### Development
14+
```bash
15+
# Start development server (default port 4321)
16+
npm run dev
17+
# or
18+
npm start
19+
20+
# Build for production
21+
npm run build
22+
23+
# Preview production build
24+
npm run preview
25+
```
26+
27+
### Package Management
28+
This project uses **pnpm** as the package manager (configured in GitHub Actions). While npm works locally, prefer pnpm for consistency with CI/CD.
29+
30+
## Architecture
31+
32+
### Framework Stack
33+
- **Astro 5**: Static site generator with component islands architecture
34+
- **Tailwind CSS**: Utility-first CSS with dark mode support (`class` strategy)
35+
- **Alpine.js**: Loaded via CDN (v3.x) for minimal client-side interactivity
36+
37+
### Directory Structure
38+
39+
```
40+
src/
41+
├── components/ # Astro components (all sections of the landing page)
42+
├── layouts/ # Layout wrapper (Layout.astro with header/footer)
43+
├── pages/ # Routes (currently only index.astro)
44+
└── styles/ # Global CSS (custom animations, theme variables)
45+
46+
public/
47+
├── images/ # Static assets
48+
└── *.svg, *.ico # Favicons and logos
49+
```
50+
51+
### Key Architecture Patterns
52+
53+
**Single Page Application:** The site is currently a single-page marketing site (`index.astro`) that imports and composes multiple section components.
54+
55+
**Component Structure:** Each major section (Features, FAQ, Stats, etc.) is a standalone `.astro` component in `src/components/`. The main page at `src/pages/index.astro` assembles these sections in sequence within the `Layout.astro` wrapper.
56+
57+
**Layout System:** `Layout.astro` provides the global structure:
58+
- Meta tags, fonts (Inter + Urbanist), and Alpine.js CDN
59+
- Persistent `AppHeader` and `AppFooter` components
60+
- Dark mode initialization (`darkMode: true` by default)
61+
- Back-to-top button with scroll visibility logic
62+
- Google Analytics integration (gtag.js)
63+
64+
**Styling Architecture:**
65+
- Primary color: Teal (`#14b8a6`) defined in both Tailwind config and CSS variables
66+
- Dark mode: Always enabled by default via `class="dark"` on `<html>`
67+
- Custom animations in `tailwind.config.cjs`: float, blob, spin-reverse, underline-pulse
68+
- Global styles in `src/styles/global.css`: gradient utilities, scrollbar styling, custom hover effects
69+
- Typography: Urbanist for headings, Inter for body text
70+
71+
**State Management:** Minimal client-side state using Alpine.js for:
72+
- Dark mode toggling (though currently forced to dark)
73+
- Scroll-based interactions (back-to-top button)
74+
- Any interactive components use `x-data` attributes
75+
76+
### Component Composition Pattern
77+
78+
Components are self-contained sections that can be commented out in `index.astro` if not needed (see existing commented sections like `DashboardPreview`, `ComparisonTabs`, `Testimonials`, `Pricing`).
79+
80+
## Development Notes
81+
82+
### Astro Specifics
83+
- Components use `.astro` extension with frontmatter (`---`) for JS/TS logic
84+
- Static by default; use `client:*` directives for hydration if needed (currently minimal)
85+
- Props are typed via `Astro.props` destructuring
86+
87+
### Tailwind Customization
88+
- Extended color palette with primary teal shades (50-950)
89+
- Custom animations: `animate-float`, `animate-float-slow`, `animate-float-delayed`, `animate-blob`, `animate-spin-slow`, `animate-spin-reverse-slow`, `animate-underline-pulse`
90+
- Custom shadows: `shadow-glass`, `shadow-glass-dark`
91+
- Typography plugin configured for dark mode support
92+
93+
### Alpine.js Usage
94+
- Loaded via CDN in `Layout.astro` (no build step required)
95+
- Used for minimal interactivity (dark mode toggle, scroll handlers)
96+
- Initialize with `x-data` on root HTML element
97+
98+
## Deployment
99+
100+
**GitHub Actions:** Automated deployment to GitHub Pages on:
101+
- Push to `main` branch
102+
- Daily schedule (midnight UTC)
103+
- Manual workflow dispatch
104+
105+
**Build Process:**
106+
1. Uses `withastro/action@v5` for building
107+
2. Node 22 with pnpm
108+
3. Deploys to GitHub Pages environment
109+
110+
## Important Context
111+
112+
**Brand Identity:** ksctl focuses on sustainability and cloud agnosticism. Visual design uses green/teal color scheme, eco-themed messaging, and emphasizes carbon footprint reduction.
113+
114+
**Design System:** The site uses a modern glass-morphism aesthetic with:
115+
- Gradient backgrounds and animated geometric shapes
116+
- Grid pattern overlays with low opacity
117+
- Smooth transitions and hover effects on cards
118+
- Responsive breakpoints following Tailwind's defaults
119+
120+
**External Links:**
121+
- Documentation: https://docs.ksctl.com/docs/getting-started/
122+
- GitHub repository: Links to ksctl org via StarButton component
123+
- Analytics: Google Analytics tracking ID `G-7PBL3S9S8W`
124+
125+
## TypeScript Configuration
126+
127+
Extends `astro/tsconfigs/base`. Type checking available via Astro CLI but not enforced in build.

‎CLAUDE.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# In ./CLAUDE.md
2+
3+
@AGENTS.md

0 commit comments

Comments
 (0)