cameronapak kit .cursorrules file for Astro (stars: 7)

You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development.

Technology Stack:

UI Layer:

- Framework: Astro
- Styling: TailwindCSS, Preline UI, DaisyUI
- Icons: Lucide Icons
- File Pattern: \*.astro
- Rich Text Editor: Trix

Interactivity Layer:

- Language: TypeScript
- Frameworks: Alpine.js, HTMX
- Alpine Plugins: Intersect, Persist, Collapse, Mask
- File Pattern: _.ts, _.tsx

Backend Layer:

- ORM: Drizzle via Astro DB
- Database: Astro DB (with libSQL/Turso)
- Authentication: Better Auth
- Cache: Netlify
- File Pattern: db/\*.ts

Development Guidelines:

- Enforce strict TypeScript settings for type safety
- Use DaisyUI and TailwindCSS with utility-first approach (never use @apply)
- Create modular, reusable Astro components
- Maintain clear separation of concerns
- Implement proper cache control headers
- Sanitize HTML content using DOMPurify
- Use Markdown for content formatting (marked)
- Leverage Astro's partial hydration and multi-framework support
- Prioritize static generation and minimal JavaScript
- Use descriptive variable names and follow Astro's conventions

Project Structure:

- src/
  - components/
  - layouts/
  - pages/
  - styles/
- public/
- astro.config.mjs

Component Development:

- Create .astro files for Astro components
- Use framework-specific components when necessary
- Implement proper component composition
- Use Astro's component props for data passing
- Leverage built-in components like <Markdown />

Routing and Pages:

- Utilize file-based routing in src/pages/
- Implement dynamic routes using [...slug].astro
- Use getStaticPaths() for static page generation
- Implement proper 404 handling

Content Management:

- Use Markdown (.md) or MDX (.mdx) for content-heavy pages
- Leverage frontmatter in Markdown files
- Implement content collections

Performance Optimization:

- Minimize client-side JavaScript
- Use client:\* directives judiciously:
  - client:load for immediate needs
  - client:idle for non-critical
  - client:visible for viewport-based
- Implement proper lazy loading
- Utilize built-in asset optimization

Code Style Requirements:

- Indentation: 2 spaces (tabWidth: 2, useTabs: false)
- Enable format on save
- No trailing comma (trailingComma: "none")
- Line length: 120 characters (printWidth: 120)
- Trim trailing whitespace
- Ensure final newline
- Include path/filename as first comment
- Write purpose-focused comments
- Follow DRY principles
- Prioritize modularity and performance
- Use Astro-specific parser for .astro files
- Use prettier-plugin-astro for Astro file formatting

Commit Message Standards:

- Use conventional commits with lowercase type and optional scope
- Keep messages concise (max 60 characters)
- Format: type(scope): description
- Include full commit command in suggestions
- Messages should be terminal-ready

Environment Variables:

- ASTRO_DB_REMOTE_URL: libSQL connection URL
- ASTRO_DB_APP_TOKEN: libSQL auth token
- BETTER_AUTH_SECRET: Better Auth secret
- BETTER_AUTH_URL: Better Auth URL

Testing and Accessibility:

- Implement unit tests for utility functions
- Use end-to-end testing with Cypress
- Ensure proper semantic HTML structure
- Implement ARIA attributes where necessary
- Ensure keyboard navigation support

Documentation Resources:

- DaisyUI: https://daisyui.com/
- TailwindCSS: https://tailwindcss.com/
- Preline: https://preline.co/
- Astro DB: https://docs.astro.build/en/guides/astro-db
- HTMX: https://htmx.org/
- Better Auth: https://better-auth.com/
- Alpine.js: https://alpinejs.dev/
- Turso: https://docs.turso.tech/
css
prettier
java
cypress
astro
javascript
typescript
sentry
+4 more

First Time Repository

With kit (Keep in Touch), staying engaged with your users and promoting your product has never been easier.

Astro

Languages:

Astro: 86.7KB
CSS: 1.2KB
JavaScript: 2.2KB
TypeScript: 27.2KB
Created: 10/14/2024
Updated: 1/10/2025

All Repositories (2)

A full-stack Astro starter kit that feels freeing and is free. Ready for use, and even better when using Cursor's IDE.

With kit (Keep in Touch), staying engaged with your users and promoting your product has never been easier.