diff --git a/.cursor/rules/css-style.mdc b/.cursor/rules/css-style.mdc new file mode 100644 index 0000000..28935d7 --- /dev/null +++ b/.cursor/rules/css-style.mdc @@ -0,0 +1,62 @@ +--- +description: whenever any *.css file is changed +globs: +alwaysApply: false +--- +## Introduction + +These guidelines establish consistent CSS coding practices, ensuring maintainable and responsive styles across the website. + +## Guidelines + +### CSS Variables +- Define colors and typography in `:root` +```css +:root { + --primary-color: #007bff; + --font-family-base: 'Arial', sans-serif; + --spacing-unit: 1rem; +} +``` + +### Responsive Design +- Use mobile-first approach for media queries +- Implement breakpoints at: + - 500px (mobile) + - 768px (tablet portrait) + - 900px (tablet landscape) + - 1300px (desktop) + - 1700px (large desktop) + +### Units and Measurements +- Use `rem` units for font sizes and spacing +- Use relative units for flexible layouts +- Use percentages for fluid widths + +### Example Media Query Structure +```css +/* Mobile first base styles */ +.component { + width: 100%; +} + +/* Tablet portrait */ +@media (min-width: 768px) { + .component { + width: 50%; + } +} + +/* Desktop */ +@media (min-width: 1300px) { + .component { + width: 33.33%; + } +} +``` + +## Common Pitfalls +- Using pixel units instead of relative units +- Not following mobile-first approach +- Hardcoding colors and typography instead of using CSS variables +- Inconsistent breakpoint usage \ No newline at end of file diff --git a/.cursor/rules/general-code-style.mdc b/.cursor/rules/general-code-style.mdc new file mode 100644 index 0000000..ff8cf81 --- /dev/null +++ b/.cursor/rules/general-code-style.mdc @@ -0,0 +1,45 @@ +--- +description: +globs: +alwaysApply: true +--- +## Introduction + +These guidelines establish fundamental coding standards that apply across all file types in the project, ensuring consistency and maintainability. + +## Guidelines + +### Indentation and Formatting +- Use 2-space indentation consistently across all files +- Maintain consistent spacing around operators and blocks +- Follow language-specific formatting conventions + +### Code Organization +- Follow DRY (Don't Repeat Yourself) principles +- Reuse components, variables, and styles where possible +- Keep related code grouped together logically + +### Documentation +- Add comments for complex logic +- Write self-documenting code where possible +- Use clear, descriptive names for variables, functions, and components + +## Examples + +```javascript +// Good - Self-documenting code with clear naming +const calculateTotalPrice = (basePrice, taxRate) => { + return basePrice * (1 + taxRate); +}; + +// Bad - Unclear naming and unnecessary comments +const calc = (p, t) => { + // multiply price by tax + return p * (1 + t); +}; +``` + +## Common Pitfalls +- Inconsistent indentation across different file types +- Code duplication instead of component reuse +- Over-commenting obvious code while under-documenting complex logic \ No newline at end of file diff --git a/.cursor/rules/html-markdown-style.mdc b/.cursor/rules/html-markdown-style.mdc new file mode 100644 index 0000000..8e4e7aa --- /dev/null +++ b/.cursor/rules/html-markdown-style.mdc @@ -0,0 +1,44 @@ +--- +description: +globs: +alwaysApply: true +--- + ## Introduction + +These guidelines ensure consistent and semantic markup across HTML templates and Markdown content files, promoting accessibility and maintainability. + +## Guidelines + +### HTML Structure +- Use semantic HTML elements appropriately + - `
` for page headers + - `