AI Rules for 10xCards

10xCards is a web application that enables the automatic generation of flashcards using artificial intelligence. The aim of the project is to significantly speed up and simplify the process of creating fiches, enabling users to quickly transform the text they enter (copy-paste) into high-quality flashcards for learning.

Tech Stack

Astro 5
TypeScript 5
React 19
Tailwind 4
Shadcn/ui

Project Structure

When introducing changes to the project, always follow the directory structure below:

./src - source code
./src/layouts - Astro layouts
./src/pages - Astro pages
./src/pages/api - API endpoints
./src/middleware/index.ts - Astro middleware
./src/db - Supabase clients and types
./src/components - Client-side components written in Astro (static) and React (dynamic)
./src/components/ui - Client-side components from Shadcn/ui
./src/assets - static internal assets
./public - public assets

When modifying the directory structure, always update this section.

Coding practices

Guidelines for clean code

Use feedback from linters to improve the code when making changes.
Prioritize error handling and edge cases.
Handle errors and edge cases at the beginning of functions.
Use early returns for error conditions to avoid deeply nested if statements.
Place the happy path last in the function for improved readability.
Avoid unnecessary else statements; use if-return pattern instead.
Use guard clauses to handle preconditions and invalid states early.
Implement proper error logging and user-friendly error messages.
Consider using custom error types or error factories for consistent error handling.

Frontend

General Guidelines

Use Astro components (.astro) for static content and layout
Implement framework components in React only when interactivity is needed

Guidelines for Styling

Tailwind

Use the @layer directive to organize styles into components, utilities, and base layers
Use arbitrary values with square brackets (e.g., w-[123px]) for precise one-off designs
Implement the Tailwind configuration file for customizing theme, plugins, and variants
Leverage the theme() function in CSS for accessing Tailwind theme values
Implement dark mode with the dark: variant
Use responsive variants (sm:, md:, lg:, etc.) for adaptive designs
Leverage state variants (hover:, focus-visible:, active:, etc.) for interactive elements

Guidelines for Accessibility

ARIA Best Practices

Use ARIA landmarks to identify regions of the page (main, navigation, search, etc.)
Apply appropriate ARIA roles to custom interface elements that lack semantic HTML equivalents
Set aria-expanded and aria-controls for expandable content like accordions and dropdowns
Use aria-live regions with appropriate politeness settings for dynamic content updates
Implement aria-hidden to hide decorative or duplicative content from screen readers
Apply aria-label or aria-labelledby for elements without visible text labels
Use aria-describedby to associate descriptive text with form inputs or complex elements
Implement aria-current for indicating the current item in a set, navigation, or process
Avoid redundant ARIA that duplicates the semantics of native HTML elements

Guidelines for Astro

Leverage View Transitions API for smooth page transitions (use ClientRouter)
Use content collections with type safety for blog posts, documentation, etc.
Leverage Server Endpoints for API routes
Use zod for input validation in API routes
Implement middleware for request/response modification
Use image optimization with the Astro Image integration
Implement hybrid rendering with server-side rendering where needed
Use Astro.cookies for server-side cookie management
Leverage import.meta.env for environment variables

Guidelines for React

Use functional components with hooks instead of class components
Never use "use client" and other Next.js directives as we use React with Astro
Implement React.memo() for expensive components that render often with the same props
Utilize React.lazy() and Suspense for code-splitting and performance optimization
Use the useCallback hook for event handlers passed to child components to prevent unnecessary re-renders
Prefer useMemo for expensive calculations to avoid recomputation on every render
Implement useId() for generating unique IDs for accessibility attributes
Consider using the new useOptimistic hook for optimistic UI updates in forms
Use useTransition for non-urgent state updates to keep the UI responsive

AI Rules for 10xCards

Tech Stack

Astro 5
TypeScript 5
React 19
Tailwind 4
Shadcn/ui

Project Structure

When introducing changes to the project, always follow the directory structure below:

./src - source code
./src/layouts - Astro layouts
./src/pages - Astro pages
./src/pages/api - API endpoints
./src/middleware/index.ts - Astro middleware
./src/db - Supabase clients and types
./src/components - Client-side components written in Astro (static) and React (dynamic)
./src/components/ui - Client-side components from Shadcn/ui
./src/assets - static internal assets
./public - public assets

When modifying the directory structure, always update this section.

Coding practices

Guidelines for clean code

Use feedback from linters to improve the code when making changes.
Prioritize error handling and edge cases.
Handle errors and edge cases at the beginning of functions.
Use early returns for error conditions to avoid deeply nested if statements.
Place the happy path last in the function for improved readability.
Avoid unnecessary else statements; use if-return pattern instead.
Use guard clauses to handle preconditions and invalid states early.
Implement proper error logging and user-friendly error messages.
Consider using custom error types or error factories for consistent error handling.

Frontend

General Guidelines

Use Astro components (.astro) for static content and layout
Implement framework components in React only when interactivity is needed

Guidelines for Styling

Tailwind

Use the @layer directive to organize styles into components, utilities, and base layers
Use arbitrary values with square brackets (e.g., w-[123px]) for precise one-off designs
Implement the Tailwind configuration file for customizing theme, plugins, and variants
Leverage the theme() function in CSS for accessing Tailwind theme values
Implement dark mode with the dark: variant
Use responsive variants (sm:, md:, lg:, etc.) for adaptive designs
Leverage state variants (hover:, focus-visible:, active:, etc.) for interactive elements

Guidelines for Accessibility

ARIA Best Practices

Use ARIA landmarks to identify regions of the page (main, navigation, search, etc.)
Apply appropriate ARIA roles to custom interface elements that lack semantic HTML equivalents
Set aria-expanded and aria-controls for expandable content like accordions and dropdowns
Use aria-live regions with appropriate politeness settings for dynamic content updates
Implement aria-hidden to hide decorative or duplicative content from screen readers
Apply aria-label or aria-labelledby for elements without visible text labels
Use aria-describedby to associate descriptive text with form inputs or complex elements
Implement aria-current for indicating the current item in a set, navigation, or process
Avoid redundant ARIA that duplicates the semantics of native HTML elements

Guidelines for Astro

Leverage View Transitions API for smooth page transitions (use ClientRouter)
Use content collections with type safety for blog posts, documentation, etc.
Leverage Server Endpoints for API routes
Use zod for input validation in API routes
Implement middleware for request/response modification
Use image optimization with the Astro Image integration
Implement hybrid rendering with server-side rendering where needed
Use Astro.cookies for server-side cookie management
Leverage import.meta.env for environment variables

Guidelines for React

Use functional components with hooks instead of class components
Never use "use client" and other Next.js directives as we use React with Astro
Implement React.memo() for expensive components that render often with the same props
Utilize React.lazy() and Suspense for code-splitting and performance optimization
Use the useCallback hook for event handlers passed to child components to prevent unnecessary re-renders
Prefer useMemo for expensive calculations to avoid recomputation on every render
Implement useId() for generating unique IDs for accessibility attributes
Consider using the new useOptimistic hook for optimistic UI updates in forms
Use useTransition for non-urgent state updates to keep the UI responsive

AI Rules for 10xCards

AI Rules for 10xCards

Tech Stack

Project Structure

Coding practices

Guidelines for clean code

Frontend

General Guidelines

Guidelines for Styling

Tailwind

Guidelines for Accessibility

ARIA Best Practices

Guidelines for Astro

Guidelines for React

Related Skills

Markdown Converter

Nano Banana Pro

1password

AI Rules for 10xCards

Tech Stack

Project Structure

Coding practices

Guidelines for clean code

Frontend

General Guidelines

Guidelines for Styling

Tailwind

Guidelines for Accessibility

ARIA Best Practices

Guidelines for Astro

Guidelines for React