Awesome Cursor Rules Collection

Showing 1345-1356 of 2626 matches

MDX
You are an expert in TypeScript, Astro framework, Tailwind CSS, and modern web development.

---

# Key Principles

-   **Write Concise and Technical Code**: Ensure your code is clear, efficient, and adheres to modern web development standards.
-   **Leverage Astro Strengths**: Utilize Astro static site generation, partial hydration, and content-focused approach for optimal performance and SEO.
-   **Prioritize Performance and SEO**: Aim for minimal JavaScript, fast load times, efficient resource management, and implement SEO best practices.
-   **Produce High-Quality Content**: Focus on creating valuable, informative, and relevant content that resonates with your target audience.
-   **Use Descriptive Naming**: Adopt clear and descriptive variable and function names.
-   **Organize Files Logically**: Structure your project using Astro file-based routing and component system, ensuring consistency and maintainability.

---

# Project Structure

-   **Recommended Astro Project Layout**:
    ```
    - src/
      - components/
      - config/        # Configuration files for components and features
      - content/
      - layouts/
      - pages/
      - styles/       # Global and component-specific styles
      - types/        # TypeScript type definitions
      - utils/        # Utility functions and helpers
    - public/
    - astro.config.mjs
    - tailwind.config.cjs
    - src/env.d.ts    # Environment and global type declarations
    - src/types.ts    # Central type definitions index
    ```
-   **Components**: Place reusable UI components in `src/components/`.
-   **Config**: Store component and feature configurations in `src/config/*.ts`:
    -   Use `Components.ts` for Astro component configurations
    -   Each config file should export constants used throughout the project
    -   Scripts should use site config constants defined in `/src/config/*.ts`
-   **Types**:
    -   Place all TypeScript interfaces and types in `src/types/*.ts`
    -   Always reference new type files in `/src/types.ts`
    -   Maintain type definitions for component props, utilities, and configurations
-   **Utils**:
    -   Store all utility functions in `/src/utils/*.ts`
    -   Ensure utility scripts are written in TypeScript, not JavaScript
-   **Layouts**: Store layout components in `src/layouts/` for consistent page structure
-   **Pages**: Organize page components in `src/pages/` using Astro routing conventions
-   **Styles**: Keep all CSS files in `src/styles/*.css`
-   **Content**: Store content files like Markdown or MDX in `src/content/`

---

# Code Style and Structure

-   **Functional Programming**: Use functional and declarative programming patterns.
-   **Avoid Unnecessary Complexity**: Keep components and functions focused, avoiding over-engineering.
-   **TypeScript First**: Use TypeScript for type safety and enhanced developer experience.
-   **Modularization**: Break down code into reusable modules and components.
-   **Comments and Documentation**: Write meaningful comments and maintain clear documentation.

---

# Naming Conventions

-   **Files and Folders**: Use kebab-case for file and folder names (e.g., `user-profile.astro`).
-   **Components**: Use PascalCase for component names (e.g., `UserProfile`).
-   **Variables and Functions**: Use camelCase (e.g., `fetchData`, `isLoaded`).
-   **Constants**: Use UPPER_SNAKE_CASE for constants (e.g., `MAX_ITEMS`).
-   **Props and Events**: Prefix boolean props with `is` or `has` (e.g., `isActive`, `hasError`).

---

# TypeScript and Development Standards

-   **TypeScript-First Development**:
    -   Write all scripts in TypeScript, never JavaScript
    -   Utilize `/src/env.d.ts` for environment and global type declarations
    -   Create and maintain comprehensive type definitions in `/src/types/`
    -   Reference all type files in the central `/src/types.ts` index
    -   Whenever creating new TypeScript code or changing existing code, look around in `/src/types/*.ts` and create TypeScript types there as needed. If you create a new type file, don't forget to reference it in `/src/types.ts`**
-   **Astro-Specific Guidelines**:
    -   This project is built with Astro and doesn't contain any React. Avoid writing any React code or TSX syntax
    -   Use `.astro` files for components instead of React components
    -   Leverage Astro's built-in features instead of React alternatives
-   **Project Integration**:
    -   Ensure new files and changed files are properly referenced from other parts of the Astro/TypeScript project. Never create files in isolation.
    -   Use configuration constants from `/src/config/` in components and scripts
-   **Code Organization**:
    -   Place all utility functions in `/src/utils/*.ts`
    -   Keep styles in `/src/styles/*.css`
    -   Maintain type definitions in `/src/types/*.ts`

---

# TypeScript Usage

-   **Strict Mode**: Enable strict mode in your `tsconfig.json` for better type checking.
-   **Interfaces over Types**: Prefer `interface` declarations over `type` aliases for object shapes.
-   **Avoid `any` and `unknown`**: Strive for precise typings; avoid using `any` or `unknown`.
-   **Generics**: Use generics for functions and components when appropriate.
-   **Type Assertions**: Avoid using `as` for type assertions unless necessary.

---

# Astro Best Practices

-   **Component Development**:
    -   Use `.astro` files for components.
    -   Utilize Astro component props for data passing.
    -   **Use Layouts for Consistency**: Implement layout components in `src/layouts/` to ensure a consistent header, footer, and main content across pages.
    -   Leverage Astro built-in components and features.
-   **Routing and Pages**:
    -   Use file-based routing in `src/pages/`.
    -   Implement dynamic routes with `[param].astro` syntax.
    -   Handle 404 errors with a custom `404.astro` page.
-   **Content Management**:
    -   Use Markdown (`.md`) or MDX (`.mdx`) files for content-heavy pages.
    -   Leverage Astro support for frontmatter in Markdown files.
    -   Implement content collections for organized content management.
-   **SEO Components**:
    -   **Create an SEO Component**: Develop a reusable SEO component to manage meta tags, title tags, and structured data.
    -   Use frontmatter or component props to pass SEO-related data.
-   **Data Fetching**:
    -   Fetch data at build time using `Astro.fetchContent` or `getStaticPaths()`.
    -   Use `Astro.glob()` for importing multiple files.
    -   Implement proper error handling for data fetching operations.

---

# Performance Optimization

-   **Minimal JavaScript**: Reduce client-side JavaScript to essential functionality.
-   **Partial Hydration**: Use Astro client directives for interactive components:
    -   `client:load` for components that need immediate hydration.
    -   `client:idle` for non-critical components.
    -   `client:visible` for components that hydrate upon visibility.
-   **Asset Optimization**:
    -   Optimize images using Astro image integration (`@astrojs/image`).
    -   **Implement Lazy Loading**: Use lazy loading for off-screen images and other assets.
    -   **Image Compression**: Compress images to balance quality and performance.
-   **Code Splitting**: Leverage dynamic imports to split code for faster load times.
-   **Caching**: Use HTTP caching headers for static assets.
-   **Optimize Builds**:
    -   Minify HTML, CSS, and JavaScript in production builds.
    -   **Post-Build Optimizations**: Create post-build scripts to remove unwanted files or perform further optimizations.
-   **Page Speed Optimization**:
    -   Regularly audit and improve page load times.
    -   Use tools like Google PageSpeed Insights for recommendations.

---

# SEO Best Practices

-   **High-Quality Content**:
    -   Focus on creating valuable, informative, and relevant content.
    -   Perform keyword research to identify relevant search terms.
-   **Technical SEO**:
    -   Ensure clean and well-structured code.
    -   **Generate Sitemaps**: Use Astro sitemap integration (`@astrojs/sitemap`) to generate a `sitemap.xml`.
    -   **Internal Linking**: Implement internal links to guide search engines through your content.
-   **On-Page Optimization**:
    -   Optimize title tags and meta descriptions for each page.
    -   Use heading tags (`<h1>` to `<h6>`) appropriately to structure content.
    -   Use frontmatter or props to manage SEO metadata.
-   **Image Optimization**:
    -   Use descriptive `alt` text for images to improve accessibility and SEO.
    -   Optimize image file sizes and formats.
-   **Structured Data Markup**:
    -   Utilize schema.org markup to provide rich information to search engines.
    -   Implement structured data using JSON-LD in your SEO component.
-   **Mobile-Friendliness**:
    -   Ensure responsive design for various screen sizes.
    -   Test mobile-friendliness using tools like Google's Mobile-Friendly Test.
-   **Backlinks and Content Promotion**:
    -   Create high-quality content that naturally attracts backlinks.
    -   Promote content through appropriate channels to enhance visibility.
-   **Stay Updated**:
    -   Keep abreast of SEO trends and search engine algorithm changes.

---

# UI and Styling with Tailwind CSS

-   **Integration**:
    -   Set up Tailwind CSS using the `@astrojs/tailwind` integration.
    -   Configure Tailwind in `tailwind.config.cjs`.
-   **Utility-First Approach**:
    -   Use Tailwind's utility classes directly in your components.
    -   Avoid custom CSS when Tailwind utilities suffice.
-   **Responsive Design**:
    -   Utilize Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`).
    -   Ensure your design adapts to various devices and screen sizes.
-   **Custom Themes**:
    -   Extend Tailwind's default theme when necessary.
    -   Keep theme customizations minimal and consistent.
-   **Use `class:list` Over External Libraries**:
    -   **Use Astro `class:list` Directive**: Utilize `class:list` for conditional classes instead of packages like `classNames`.
    -   **Example**:
        ```astro
        <div class:list={{ active: isActive, disabled: isDisabled }}>...</div>
        ```

---

# Build and Deployment

-   **Environment Variables**:
    -   Use environment variables for configuration.
    -   Access variables securely in Astro using `import.meta.env`.
-   **Static Hosting**:
    -   Deploy to platforms like Netlify, Vercel, GitHub Pages, or Cloudflare Pages.
    -   Ensure your build command is correctly set (usually `astro build`).
-   **Continuous Integration/Continuous Deployment (CI/CD)**:
    -   Set up automated builds and tests in your CI/CD pipeline.
    -   Use deployment previews for testing before going live.
-   **Optimizations**:
    -   Minify and compress assets in production builds.
    -   Implement prefetching and prerendering where appropriate.
-   **Robots.txt and Sitemap**:
    -   **Generate a `robots.txt` File**: Inform crawlers how to navigate your site.
    -   Use Astro sitemap integration to generate a `sitemap.xml`.

---

# Testing and Accessibility

-   **Testing**:
    -   Write unit tests for critical functions and components.
    -   Use end-to-end testing tools like Cypress for user flow testing.
    -   Implement integration tests for complex interactions.
-   **Accessibility (A11y)**:
    -   Use semantic HTML elements.
    -   Provide alternative text for images.
    -   Ensure keyboard navigability.
    -   Implement ARIA attributes where necessary.
    -   **Test with Accessibility Tools**: Use tools like Lighthouse or Axe to evaluate accessibility.

---

# Key Conventions and Best Practices

1. **Follow Official Documentation**: Always refer to Astro and Tailwind CSS official docs for guidance.
2. **Consistent Formatting**: Use tools like Prettier and ESLint to maintain code consistency.
3. **Version Control**: Commit early and often with clear commit messages.
4. **Code Reviews**: Encourage peer reviews to maintain code quality.
5. **Performance Monitoring**: Regularly audit performance using Lighthouse or WebPageTest.
6. **Security Practices**: Sanitize user input and protect against common vulnerabilities.
7. **Progressive Enhancement**: Ensure the website is usable without JavaScript enabled.
8. **Optimize Builds**: Continuously optimize builds and bundles for performance.
9. **Stay Updated**: Keep your dependencies up to date and monitor for security patches.

---

# Additional Resources

-   **Astro Documentation**: [https://docs.astro.build](https://docs.astro.build)
-   **Tailwind CSS Documentation**: [https://tailwindcss.com/docs](https://tailwindcss.com/docs)
-   **Astro SEO Guide**: [Astro SEO Best Practices](https://docs.astro.build/en/guides/seo/)
-   **Web Performance**: [Google Web Fundamentals](https://developers.google.com/web/fundamentals/performance)
-   **Accessibility Guidelines**: [WCAG 2.1 Standards](https://www.w3.org/TR/WCAG21/)
-   **Mobile-Friendly Test**: [Google Mobile-Friendly Test](https://search.google.com/test/mobile-friendly)
astro
bun
css
cypress
eslint
golang
java
javascript
+8 more
apify/actor-whitepaper-web

Used in 1 repository

C#
You are assisting with the Bookmate project, a digital library web application built with ASP.NET Core.

Project Structure:

- Uses ASP.NET Core MVC with Identity for authentication
- Modern UI with custom CSS (no framework)
- Follows a clean, minimalist design approach

Code Organization:

- Keep functions and methods short and focused
- Use meaningful variable and function names
- Group related code together
- Add clear comments for complex logic
- Maintain consistent indentation and spacing
- Break down complex operations into smaller, reusable parts

Coding Standards:

1. Use consistent naming conventions:

   - PascalCase for C# classes and methods
   - camelCase for JavaScript and CSS
   - lowercase-hyphen for CSS classes when needed

2. CSS Guidelines:

   - Keep selectors specific but not overly nested
   - Use modern CSS features (flexbox, grid, custom properties)
   - Maintain the established color scheme (#1a73e8, #1557b0)
   - Group related styles together
   - Comment major sections

3. C# Guidelines:

   - Follow SOLID principles
   - Use async/await for database operations
   - Implement proper error handling
   - Keep methods concise and single-purpose
   - Use clear and descriptive naming

4. When suggesting code changes:
   - Provide concise code blocks
   - Include brief explanations
   - Maintain existing styling patterns
   - Focus on readability and maintainability
   - Suggest optimizations when relevant

Key Features:

- User authentication and registration
- Book management system
- Modern, responsive design
- Glassmorphism UI elements

Remember to maintain consistency with the existing modern and clean design aesthetic throughout any suggestions or modifications.

CSS Best Practices:

1. Specificity Management:

   - Use specific selectors to avoid conflicts
   - Maintain a clear selector hierarchy
   - Document complex selector relationships
   - Avoid multiple overlapping style definitions
   - When styling components, use unique class names

2. CSS Debugging Guidelines:

   - Check browser dev tools for competing styles
   - Use specific selectors over !important when possible
   - Keep track of style inheritance
   - Document any necessary !important usage
   - Group related styles together in the CSS file

3. CSS Organization:
   - Organize styles by component/feature
   - Keep global styles separate from component styles
   - Comment major sections clearly
   - Use consistent naming patterns
   - Document style dependencies

Remember:

- Check for existing styles before adding new ones
- Use browser dev tools to debug style conflicts
- Keep selectors as specific as needed but not more
- Document any complex style interactions
- Maintain a clear separation between component styles
aws
c#
css
html
java
javascript
nestjs
solidjs
Rafiiathallah/ddac-bookmate

Used in 1 repository

Swift
HTML
General Principles:
- Keep It Simple: Write code that does the job without unnecessary complexity (KISS). Avoid overengineering or adding extra features unless absolutely necessary (YAGNI).
- Do One Thing Well: Each function or script should have a single clear goal. Avoid making a script or function handle multiple unrelated tasks (Curly's Law).
- Reproducibility is Key: Always ensure your results can be easily reproduced by others. Use R Markdown for reproducible workflows and document data sources, script functionality, and results clearly.
- Don't apologize, collaborate: If you need further instructions or if you need more information, please ask.
- Keep in mind that I'm not always right even if I tell you I am, so please debate and discuss.

Project Structure:
- Simple Directory Structure: Organize your project into clear folders like `data/`, `scripts/`, and `output/`. Avoid clutter or creating too many folders.
  - `/data/`: Raw and cleaned data.
  - `/scripts/`: Separate scripts for different tasks (e.g., `clean_data.R`, `analyze_data.R`).
  - `/output/`: Results like graphs, tables, and summary reports.
- Minimal Dependencies: Only install and load the libraries necessary for your work. Use built-in functions when possible.

Writing and Formatting Code:
- Clean and Readable Code: Avoid unnecessary complexity. Code should be easy to follow without extensive comments (Don’t Make Me Think).
- No Code Duplication: Reuse code by creating functions for tasks that are repeated (DRY). Keep each function focused on a single task.
- Consistent Naming: Use clear, consistent names for variables and functions that describe their purpose. Avoid abbreviations.

Data and Statistical Analysis:
- Use Appropriate Tools: Stick to core R packages and specialized libraries for your biological research (e.g., `vegan` for ecological analysis, `ggplot2` for visualization).
- Validate Data: Ensure data is cleaned and validated before analysis. Use simple checks (e.g., `stopifnot()`) to ensure data consistency.

Reproducibility:
- R Markdown: Combine code and narrative in R Markdown files to ensure that your analysis is reproducible. Embed code and outputs directly in your report.
- Docker: Use Docker for environment consistency. Ensure that anyone using your code can replicate your environment with minimal setup.

Version Control and Backup:
- Use Git: Track changes with Git but focus on key files (scripts and reports). Avoid adding large data files unless necessary. Keep commit messages clear and focused.

Testing and Error Handling:
- Simple Error Handling: Use basic error handling (`try()` or `stop()`) when necessary but avoid overcomplicating. The goal is to keep your research flowing without unnecessary interruptions.

Documentation:
- Document as You Go: Include inline comments to explain key steps but avoid over-documenting obvious code. Make sure others can understand the code without needing extensive notes.

Focus on Results:
- Publication-Ready Visuals: Use `ggplot2` to create clear, professional-quality graphs. Avoid overly complex visualizations unless needed for your specific analysis.
- Summarize Effectively: Provide clear summaries of results. Your analysis should speak directly to your research questions without unnecessary detours.

Project-Specific Rules for the Journal Article:
1. Maintain a Clean and Focused Directory Structure:
  - Data: Store raw and cleaned datasets in `/data/`. Ensure any transformations are done within the script and outputs saved separately.
  - Scripts: Use `/scripts/` to hold R scripts that clean, analyze, and visualize data.
  - Reports: Write your main text and any supplementary documents in `/reports/`. Keep your R Markdown files here (e.g., `kfj.Rmd`).
  - Outputs: Save tables, figures, and model outputs in `/output/` to maintain separation between code and results.
2. Efficient and Reproducible Data Handling:
  - Raw Data Integrity: Always load raw data from `/data/` and use scripts to clean or transform data without overwriting the raw files.
  - Data Wrangling: Use `dplyr` and `tidyr` to clean and prepare data, ensuring all operations are clear and efficient.
  - Versioning: Track versions of datasets using a simple naming scheme (e.g., `data_cleaned_v1.csv`). Avoid cluttering the directory with unnecessary intermediate datasets.
3. Clear, Modular Scripts for Analysis:
  - R Markdown Structure: For each part of your analysis (e.g., data cleaning, statistical models), write separate, clear chunks in `kfj.Rmd`.
    - Keep one section for data import and cleaning.
    - One for descriptive statistics and exploratory analysis.
    - One for each analysis method (e.g., NMDS, PERMANOVA, SIMPER).
  - Reusability: Write simple functions to reuse across the script (e.g., for calculating AMBI indices). Avoid duplication of code wherever possible (DRY principle).
  - Document Your Work: Use comments in code sparingly but where necessary, such as to explain any complex transformations or model outputs.
4. Results and Visualization for the Article:
  - Reproducible Figures: All figures for the article (like NMDS, PERMANOVA, and SIMPER results) should be generated within the R script and saved in `/output/` with clear filenames (e.g., `nmds_plot.png`).
  - `ggplot2` for Publication-Quality Visuals: Use `ggplot2` for creating all publication figures. Ensure that axis labels and legends are descriptive and appropriate for a non-specialist audience. Make sure that the background is white.
  - Summarize Key Metrics: Summarize the number of species, diversity indices, or ecological quality assessments using clear tables in R Markdown.
5. Use Statistical Methods Suited to Your Research:
  - Ecological Indices: Ensure AMBI and Norwegian Quality Indices (nNQI1) are calculated consistently using the `BBI` package and report results in the text and figures.
  - Statistical Analysis: Run non-parametric tests (Kruskal-Wallis, Dunn's test) for sediment grain-size and organic matter variation as appropriate. Document each test clearly in `kfj.Rmd`.
  - Multivariate Analysis: Use `vegan` for NMDS, PERMANOVA, and SIMPER analysis. Ensure code for community composition analysis (as seen in `henda.txt`) is clean, and results are saved in human-readable form.
6. Minimize Complexity While Maximizing Reproducibility:
  - Focus on the Essentials: Avoid unnecessary packages or overly complex statistical models unless required by the research.
  - Keep Docker Simple: Ensure that the Docker environment is focused only on the necessary dependencies (e.g., base R, `vegan`, `BBI`, `ggplot2`). This will make the environment portable and easy for collaborators or reviewers to use.
  - Document Environment: Make sure your Dockerfile and any package requirements (e.g., `renv` or `packrat`) are well-documented so others can replicate the exact analysis environment.
7. Regular Backups and Version Control:
  - Git: Commit regularly using Git and track changes to R scripts and Markdown files. Avoid adding large raw datasets to version control.
  - Commit Messages: Use clear commit messages focused on specific changes (e.g., "Add NMDS analysis section" or "Fix grain-size analysis script").

Collaboration and Writing:
1. Collaboration and Continuity:
  - Follow Existing Structure: Ensure that any additions or changes made are consistent with the existing structure of the document. The sections should follow a logical flow as outlined in the original manuscript.
  - Write in Alignment with the Author’s Voice: Maintain consistency with the tone and style already established in the article. Use clear, concise language that aligns with the journal Marine Biology's requirements.
2. Contributions to Analysis and Results:
  - Adhere to Analytical Approach: When contributing to the data analysis (e.g., NMDS, SIMPER), ensure that you are using the exact statistical methods and packages that have already been defined (e.g., `vegan`, `BBI` for ecological indices).
  - Reproducibility: Make sure any code or analysis steps you write are easily replicable. Always verify that all code runs correctly in the Docker environment, and document any assumptions or transformations.
3. Writing and Referencing:
  - Maintain Accuracy in Scientific Writing: When drafting new sections or expanding on existing parts, ensure that all references are correctly cited (using the same citation style as in `henda.txt`). All data points should be verified against the raw datasets or established sources.
  - Clear and Focused Language: Contribute concise and focused text that supports the main arguments of the article. Avoid jargon that might be unclear to readers from related but different disciplines.
4. Figure and Table Preparation:
  - Publication-Quality Figures: If creating or editing figures, ensure they are of publication quality using `ggplot2` for consistency. Any new figures should be added to the `/output/` directory with clear filenames and descriptions.
  - Consistency in Data Representation: All tables and figures should use consistent scales, labels, and legends. Coordinate with the lead author to ensure all visualizations match the style already established in the draft.
5. Version Control and Documentation:
  - Use Git for Collaboration: Make incremental changes and commit them regularly with clear, descriptive messages. Always pull the latest version of the repository before making edits to avoid conflicts.
  - Document Any Assumptions: If any assumptions or decisions are made during data analysis or manuscript writing, document them clearly in the R scripts or in the manuscript draft to ensure transparency and clarity.
6. Editing and Reviewing:
  - Peer Review Readiness: When editing the draft, focus on clarity and precision. Make sure that each section logically follows from the previous one, and that the results are clearly explained and linked back to the research questions posed in the introduction.
  - Final Proofreading: Prior to submission, thoroughly proofread all sections for consistency in terminology, formatting, and citation style. Ensure that all figures and tables are properly referenced in the text.
docker
dockerfile
golang
html
javascript
less
r

First seen in:

harkanatta/ormar

Used in 1 repository

TypeScript
{
  "project_name": "Fusionix",
  "description": "Fusionix is a robust, AI-powered data integration and analytics platform designed to unify data, optimize workflows, and create dynamic dashboards. It supports integrations with popular platforms, offers SQL query capabilities, and enables marketing optimization with AI-driven suggestions.",
  "rules": {
    "framework": {
      "frontend": "Next.js",
      "backend": "Vercel Serverless Functions with Node.js",
      "database": "PostgreSQL",
      "ai_framework": "TensorFlow.js or OpenAI API",
      "deployment": "Vercel for both frontend and backend"
    },
    "file_structure": {
      "root": ["README.md", "package.json", ".gitignore", ".env"],
      "src": {
        "frontend": [
          "pages",
          "components",
          "styles",
          "utils",
          "public"
        ],
        "backend": [
          "api/integrations",
          "api/sql",
          "api/dashboard",
          "api/auth"
        ],
        "database": ["schemas", "migrations", "seeds"],
        "ai": ["services", "models", "training_data"],
        "tests": ["frontend", "backend", "integration"]
      },
      "config": ["eslint.json", "prettier.json"]
    },
    "features": {
      "integration_hub": {
        "description": "Central hub to manage integrations with platforms such as Google Ads, GA4, Shopify, QuickBooks, and Stripe.",
        "modules": [
          "OAuth2 authentication",
          "API connection status",
          "Scheduled syncs and real-time data fetch"
        ]
      },
      "sql_terminal": {
        "description": "Built-in SQL editor for advanced queries.",
        "capabilities": [
          "Schema retention",
          "Query history",
          "Error highlighting"
        ]
      },
      "dashboard_builder": {
        "description": "Drag-and-drop builder for creating custom dashboards.",
        "features": [
          "Pre-designed templates",
          "Dynamic widget support",
          "Client sharing with authentication"
        ]
      },
      "ai_features": {
        "description": "AI-driven insights and recommendations.",
        "tools": [
          "Ad performance analysis",
          "Automated marketing rule creation",
          "Predictive analytics for data trends"
        ]
      },
      "document_management": {
        "description": "Organized storage and retrieval of documents.",
        "capabilities": [
          "File upload with tagging",
          "Advanced search and filtering",
          "Integration with analytics data"
        ]
      },
      "email_automation": {
        "description": "Personalized email creation and automation.",
        "modules": [
          "Dynamic data population",
          "Conditional triggers",
          "Email scheduling"
        ]
      }
    },
    "ui_guidelines": {
      "style": {
        "primary_color": "#1E90FF",
        "secondary_color": "#F5F5F5",
        "font": "Inter",
        "icons": "Heroicons"
      },
      "layout": {
        "dashboard": "Responsive with a sidebar for navigation",
        "terminal": "Full-width editor with collapsible results pane",
        "integration_hub": "Tabbed view for connected platforms and actions"
      },
      "responsiveness": {
        "breakpoints": {
          "mobile": "480px",
          "tablet": "768px",
          "desktop": "1024px"
        }
      }
    },
    "dependencies": {
      "frontend": [
        "react",
        "next",
        "tailwindcss",
        "chart.js"
      ],
      "backend": [
        "pg",
        "jsonwebtoken",
        "axios"
      ],
      "dev": [
        "eslint",
        "prettier",
        "nodemon"
      ]
    },
    "constraints": {
      "ai_model": {
        "schema_retention": "Ensure AI retains schema memory for SQL queries.",
        "recommendations_accuracy": "Validate AI suggestions using real-world test data."
      },
      "api_limits": {
        "rate_limit_handling": "Implement retry logic for APIs with rate limits."
      },
      "security": {
        "authentication": "OAuth2 for third-party logins and JWT for session management.",
        "encryption": {
          "data_in_transit": "TLS 1.2+",
          "data_at_rest": "AES-256"
        }
      }
    },
    "tasks": [
      {
        "title": "Setup Base Project",
        "steps": [
          "Initialize frontend with Next.js.",
          "Set up Vercel Serverless Functions for backend.",
          "Integrate PostgreSQL database."
        ]
      },
      {
        "title": "Implement Core Features",
        "steps": [
          "Build SQL terminal UI and backend.",
          "Create integration hub API connectors.",
          "Develop AI-powered marketing tools."
        ]
      },
      {
        "title": "Add Custom Dashboards",
        "steps": [
          "Build dashboard drag-and-drop functionality.",
          "Connect widgets to data sources.",
          "Set up authentication for shared dashboards."
        ]
      },
      {
        "title": "Final Testing & Deployment",
        "steps": [
          "Conduct end-to-end testing.",
          "Deploy frontend and backend to Vercel.",
          "Ensure all systems are stable."
        ]
      }
    ]
  }
}
analytics
css
eslint
golang
javascript
jwt
less
next.js
+12 more

First seen in:

LogicLeapLtd/Fusionix

Used in 1 repository

TypeScript

You are an expert AI programming assistant that primarily focuses on producing clear, readable React and TypeScript code. You excel in:

1. **Technical Expertise**
- Latest stable versions of: TypeScript, JavaScript, React, Node.js, Next.js App Router
- Shadcn UI and Tailwind CSS best practices
- Modern development patterns and architectures

2. **Code Quality Standards**
- Write complete, production-ready implementations
- Maintain clear, consistent code structure
- Follow TypeScript best practices
- Implement robust error handling
- Consider performance optimizations
- Handle edge cases thoroughly

3. **Documentation & Testing**
- Update README.md and specification.md files
- Add comprehensive unit tests for new features
- Ensure existing tests pass
- Include JSDoc comments where appropriate

4. **Development Practices**
- Use descriptive variable names
- Avoid magic numbers
- Implement proper error handling
- Follow modular design principles
- Consider security implications
- Maintain version compatibility
- Use type assertions appropriately

5. **UI/UX Considerations**
- Follow accessibility best practices
- Ensure responsive designs
- Optimize component performance
- Maintain consistent styling

You provide accurate, factual, and thoughtful responses while maintaining high code quality standards and best practices.

For every change, log all the chat history and the code changes you made to a changes.md file
css
java
javascript
next.js
react
rust
shadcn/ui
tailwindcss
+1 more
paulmanning/AIGen_TNS_Web

Used in 1 repository

JavaScript
TypeScript
Code Style and Structure
- Use functional and declarative patterns over imperative code 
- Favor small, pure, reusable functions over large classes
- Structure code in a flat architecture with feature folders
- Export reusable logic into /lib folder, import into pages
- Keep components small and focused on one purpose

Naming Conventions 
- Use camelCase for variable and function names
- Use PascalCase for component names
- Name components after their feature/purpose
- Name helper modules based on functionality 

TypeScript Usage
- Type all component props, state, and functions
- Use TypeScript generics for reusable types  
- Type external API responses
- Use utility types like Partial and Required

Syntax and Formatting
- Use Prettier to enforce consistent formatting
- Favor arrow functions over verbose function syntax
- Destructure props in functional components
- Use trailing commas in objects and arrays

UI and Styling
- Stick to Radix and Tailwind CSS for styling
- Avoid nested selectors for simplicity
- Use Radix primitive components over custom ones
- Prefix global CSS classes with "global-"

Performance 
- Lazy load downstream pages with dynamic SSG
- Enable incremental static regeneration 
- Use React Server Components where possible 
- Load large page data client-side with SWR  

Key Next.js Conventions
- Use App Router for routing with dynamic params 
- Handle data fetching in getRouteData hook 
- Put shared layout in app/layout.tsx component
- Export route modules from /app/routes folder
nestjs
next.js
prettier
radix-ui
react
tailwindcss
typescript
itsdillon/readmewriter-example

Used in 1 repository