| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 5 | 0 | 0% |
| Commands | 0 | 0 | 0 | — |
| Section tags | 1 | 3 | 0 | 25% |
What each file covers
Sections
0 shared · 5 only in A · 0 only in B- − TypeScript Best Practices
- − Type Safety & Configuration
- − Type Definitions
- − Advanced Patterns
- − Code Organization
Commands
neither file has anySection tags
1 shared · 3 only in A · 0 only in B- − code-style
- − types
- − docs
- do-not
Line diff
sferg989/fergfo.om · .cursor/rules/ts.mdc
@@ −1 @@
1---
2description:
3globs:
4alwaysApply: true
5---
6# TypeScript Best Practices
7
8## Type Safety & Configuration
9
10- Enable `strict: true` in [tsconfig.json](mdc:tsconfig.json) with additional flags:
11 - `noImplicitAny: true`
12 - `strictNullChecks: true`
13 - `strictFunctionTypes: true`
14 - `strictBindCallApply: true`
15 - `strictPropertyInitialization: true`
16 - `noImplicitThis: true`
17 - `alwaysStrict: true`
18 - `exactOptionalPropertyTypes: true`
19- Never use `// @ts-ignore` or `// @ts-expect-error` without explanatory comments
20- Use `--noEmitOnError` compiler flag to prevent generating JS files when TypeScript errors exist
21
22## Type Definitions
23
24- Do not ever use `any`. Ever. If you feel like you have to use `any`, use `unknown` instead.
25- Explicitly type function parameters, return types, and object literals.
26- Please don't ever use Enums. Use a union if you feel tempted to use an Enum.
27- Use `readonly` modifiers for immutable properties and arrays
28- Leverage TypeScript's utility types (`Partial`, `Required`, `Pick`, `Omit`, `Record`, etc.)
29- Use discriminated unions with exhaustiveness checking for type narrowing
30
31## Advanced Patterns
32
33- Implement proper generics with appropriate constraints
34- Use mapped types and conditional types to reduce type duplication
35- Leverage `const` assertions for literal types
36- Implement branded/nominal types for type-level validation
37## Code Organization
38
39- Organize types in dedicated files (types.ts) or alongside implementations
40- Document complex types with JSDoc comments
41- Create a central `types.ts` file or a `src/types` directory for shared types
42
sferg989/fergfo.om · .cursorrules
@@ +1 @@
1
2 You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development.
3
4 Key Principles
5 - Write concise, technical responses with accurate Astro examples.
6 - Leverage Astro's partial hydration and multi-framework support effectively.
7 - Prioritize static generation and minimal JavaScript for optimal performance.
8 - Use descriptive variable names and follow Astro's naming conventions.
9 - Organize files using Astro's file-based routing system.
10
11 Astro Project Structure
12 - Use the recommended Astro project structure:
13 - src/
14 - components/
15 - layouts/
16 - pages/
17 - styles/
18 - public/
19 - astro.config.mjs
20
21 Component Development
22 - Create .astro files for Astro components.
23 - Use astro components when possible
24 - Implement proper component composition and reusability.
25 - Use Astro's component props for data passing.
26 - Leverage Astro's built-in components like <Markdown /> when appropriate.
27
28 Routing and Pages
29 - Utilize Astro's file-based routing system in the src/pages/ directory.
30 - Implement dynamic routes using [...slug].astro syntax.
31 - Use getStaticPaths() for generating static pages with dynamic routes.
32 - Implement proper 404 handling with a 404.astro page.
33
34
35 Styling
36 - Use Astro's scoped styling with <style> tags in .astro files.
37 - Leverage global styles when necessary, importing them in layouts.
38 - Utilize CSS preprocessing with Sass or Less if required.
39 - Implement responsive design using CSS custom properties and media queries.
40
41 Performance Optimization
42 - Minimize use of client-side JavaScript; leverage Astro's static generation.
43 - Use the client:* directives judiciously for partial hydration:
44 - client:load for immediately needed interactivity
45 - client:idle for non-critical interactivity
46 - client:visible for components that should hydrate when visible
47 - Implement proper lazy loading for images and other assets.
48 - Utilize Astro's built-in asset optimization features.
49
50 Data Fetching
51 - Use Astro.props for passing data to components.
52 - Implement getStaticPaths() for fetching data at build time.
53 - Use Astro.glob() for working with local files efficiently.
54 - Implement proper error handling for data fetching operations.
55
56 SEO and Meta Tags
57 - Use Astro's <head> tag for adding meta information.
58 - Implement canonical URLs for proper SEO.
59 - Use the <SEO> component pattern for reusable SEO setups.
60
61 Integrations and Plugins
62 - Utilize Astro integrations for extending functionality (e.g., @astrojs/image).
63 - Implement proper configuration for integrations in astro.config.mjs.
64 - Use Astro's official integrations when available for better compatibility.
65
66 Build and Deployment
67 - Optimize the build process using Astro's build command.
68 - Implement proper environment variable handling for different environments.
69 - Use static hosting platforms compatible with Astro (Netlify, Vercel, etc.).
70 - Implement proper CI/CD pipelines for automated builds and deployments.
71
72 Styling with Tailwind CSS
73 - Integrate Tailwind CSS with Astro @astrojs/tailwind
74
75 Tailwind CSS Best Practices
76 - Use Tailwind utility classes extensively in your Astro components.
77 - Leverage Tailwind's responsive design utilities (sm:, md:, lg:, etc.).
78 - Utilize Tailwind's color palette and spacing scale for consistency.
79 - Implement custom theme extensions in tailwind.config.cjs when necessary.
80 - Never use the @apply directive
81
82 Testing
83 - Implement unit tests for utility functions and helpers.
84 - Use end-to-end testing tools like Cypress for testing the built site.
85 - Implement visual regression testing if applicable.
86
87 Accessibility
88 - Ensure proper semantic HTML structure in Astro components.
89 - Implement ARIA attributes where necessary.
90 - Ensure keyboard navigation support for interactive elements.
91
92 Key Conventions
93 1. Follow Astro's Style Guide for consistent code formatting.
94 2. Use TypeScript for enhanced type safety and developer experience.
95 3. Implement proper error handling and logging.
96 4. Leverage Astro's RSS feed generation for content-heavy sites.
97 5. Use Astro's Image component for optimized image delivery.
98
99 Performance Metrics
100 - Prioritize Core Web Vitals (LCP, FID, CLS) in development.
101 - Use Lighthouse and WebPageTest for performance auditing.
102 - Implement performance budgets and monitoring.
103
104 Refer to Astro's official documentation for detailed information on components, routing, and integrations for best practices.
105
@@ −1 +1 @@
1−---
2−description:
3−globs:
4−alwaysApply: true
5−---
6−# TypeScript Best Practices
71
8−## Type Safety & Configuration
2+ You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development.
93
10−- Enable `strict: true` in [tsconfig.json](mdc:tsconfig.json) with additional flags:
11− - `noImplicitAny: true`
12− - `strictNullChecks: true`
13− - `strictFunctionTypes: true`
14− - `strictBindCallApply: true`
15− - `strictPropertyInitialization: true`
16− - `noImplicitThis: true`
17− - `alwaysStrict: true`
18− - `exactOptionalPropertyTypes: true`
19−- Never use `// @ts-ignore` or `// @ts-expect-error` without explanatory comments
20−- Use `--noEmitOnError` compiler flag to prevent generating JS files when TypeScript errors exist
4+ Key Principles
5+ - Write concise, technical responses with accurate Astro examples.
6+ - Leverage Astro's partial hydration and multi-framework support effectively.
7+ - Prioritize static generation and minimal JavaScript for optimal performance.
8+ - Use descriptive variable names and follow Astro's naming conventions.
9+ - Organize files using Astro's file-based routing system.
2110
22−## Type Definitions
11+ Astro Project Structure
12+ - Use the recommended Astro project structure:
13+ - src/
14+ - components/
15+ - layouts/
16+ - pages/
17+ - styles/
18+ - public/
19+ - astro.config.mjs
2320
24−- Do not ever use `any`. Ever. If you feel like you have to use `any`, use `unknown` instead.
25−- Explicitly type function parameters, return types, and object literals.
26−- Please don't ever use Enums. Use a union if you feel tempted to use an Enum.
27−- Use `readonly` modifiers for immutable properties and arrays
28−- Leverage TypeScript's utility types (`Partial`, `Required`, `Pick`, `Omit`, `Record`, etc.)
29−- Use discriminated unions with exhaustiveness checking for type narrowing
21+ Component Development
22+ - Create .astro files for Astro components.
23+ - Use astro components when possible
24+ - Implement proper component composition and reusability.
25+ - Use Astro's component props for data passing.
26+ - Leverage Astro's built-in components like <Markdown /> when appropriate.
3027
31−## Advanced Patterns
28+ Routing and Pages
29+ - Utilize Astro's file-based routing system in the src/pages/ directory.
30+ - Implement dynamic routes using [...slug].astro syntax.
31+ - Use getStaticPaths() for generating static pages with dynamic routes.
32+ - Implement proper 404 handling with a 404.astro page.
3233
33−- Implement proper generics with appropriate constraints
34−- Use mapped types and conditional types to reduce type duplication
35−- Leverage `const` assertions for literal types
36−- Implement branded/nominal types for type-level validation
37−## Code Organization
3834
39−- Organize types in dedicated files (types.ts) or alongside implementations
40−- Document complex types with JSDoc comments
41−- Create a central `types.ts` file or a `src/types` directory for shared types
35+ Styling
36+ - Use Astro's scoped styling with <style> tags in .astro files.
37+ - Leverage global styles when necessary, importing them in layouts.
38+ - Utilize CSS preprocessing with Sass or Less if required.
39+ - Implement responsive design using CSS custom properties and media queries.
40+
41+ Performance Optimization
42+ - Minimize use of client-side JavaScript; leverage Astro's static generation.
43+ - Use the client:* directives judiciously for partial hydration:
44+ - client:load for immediately needed interactivity
45+ - client:idle for non-critical interactivity
46+ - client:visible for components that should hydrate when visible
47+ - Implement proper lazy loading for images and other assets.
48+ - Utilize Astro's built-in asset optimization features.
49+
50+ Data Fetching
51+ - Use Astro.props for passing data to components.
52+ - Implement getStaticPaths() for fetching data at build time.
53+ - Use Astro.glob() for working with local files efficiently.
54+ - Implement proper error handling for data fetching operations.
55+
56+ SEO and Meta Tags
57+ - Use Astro's <head> tag for adding meta information.
58+ - Implement canonical URLs for proper SEO.
59+ - Use the <SEO> component pattern for reusable SEO setups.
60+
61+ Integrations and Plugins
62+ - Utilize Astro integrations for extending functionality (e.g., @astrojs/image).
63+ - Implement proper configuration for integrations in astro.config.mjs.
64+ - Use Astro's official integrations when available for better compatibility.
65+
66+ Build and Deployment
67+ - Optimize the build process using Astro's build command.
68+ - Implement proper environment variable handling for different environments.
69+ - Use static hosting platforms compatible with Astro (Netlify, Vercel, etc.).
70+ - Implement proper CI/CD pipelines for automated builds and deployments.
71+
72+ Styling with Tailwind CSS
73+ - Integrate Tailwind CSS with Astro @astrojs/tailwind
74+
75+ Tailwind CSS Best Practices
76+ - Use Tailwind utility classes extensively in your Astro components.
77+ - Leverage Tailwind's responsive design utilities (sm:, md:, lg:, etc.).
78+ - Utilize Tailwind's color palette and spacing scale for consistency.
79+ - Implement custom theme extensions in tailwind.config.cjs when necessary.
80+ - Never use the @apply directive
81+
82+ Testing
83+ - Implement unit tests for utility functions and helpers.
84+ - Use end-to-end testing tools like Cypress for testing the built site.
85+ - Implement visual regression testing if applicable.
86+
87+ Accessibility
88+ - Ensure proper semantic HTML structure in Astro components.
89+ - Implement ARIA attributes where necessary.
90+ - Ensure keyboard navigation support for interactive elements.
91+
92+ Key Conventions
93+ 1. Follow Astro's Style Guide for consistent code formatting.
94+ 2. Use TypeScript for enhanced type safety and developer experience.
95+ 3. Implement proper error handling and logging.
96+ 4. Leverage Astro's RSS feed generation for content-heavy sites.
97+ 5. Use Astro's Image component for optimized image delivery.
98+
99+ Performance Metrics
100+ - Prioritize Core Web Vitals (LCP, FID, CLS) in development.
101+ - Use Lighthouse and WebPageTest for performance auditing.
102+ - Implement performance budgets and monitoring.
103+
104+ Refer to Astro's official documentation for detailed information on components, routing, and integrations for best practices.
42105
