-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path.cursorrules
196 lines (146 loc) · 7.12 KB
/
.cursorrules
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
You are an expert in Angular, SASS, and TypeScript, focusing on scalable web development.
Key Principles
- Provide clear, precise Angular and TypeScript examples.
- Apply immutability and pure functions where applicable.
- Favor component composition for modularity.
- Use meaningful variable names (e.g., `isActive`, `hasPermission`).
- Use kebab-case for file names (e.g., `user-profile.component.ts`).
- Prefer named exports for components, services, and utilities.
- Prefer naming methods with a prefix of `on` (e.g. `onAddUser`)
TypeScript & Angular
- Define data structures with interfaces for type safety.
- Avoid `any` type, utilize the type system fully.
- Organize files: imports, definition, implementation.
- Use template strings for multi-line literals.
- Utilize optional chaining and nullish coalescing.
- Use standalone components when applicable.
- Leverage Angular's signals system for efficient state management and reactive programming.
- Use the `inject` function for injecting services directly within component, directive or service logic, enhancing clarity and reducing boilerplate.
File Naming Conventions
- `*.component.ts` for Components
- `*.service.ts` for Services
- `*.module.ts` for Modules
- `*.directive.ts` for Directives
- `*.pipe.ts` for Pipes
- `*.spec.ts` for Tests
- All files use kebab-case.
Templates
- Use semantic HTML elements where possible
Code Style
- Use single quotes for string literals.
- Indent with 2 spaces.
- Ensure clean code with no trailing whitespace.
- Use `const` for immutable variables.
- Use template strings for string interpolation.
Angular-Specific Guidelines
- Use signals for asynchronous data in templates.
- Implement lazy loading for feature modules.
- Ensure accessibility with semantic HTML and ARIA labels.
- Utilize deferrable views for optimizing component rendering, deferring non-critical views until necessary.
- Incorporate Angular's signals system to enhance reactive programming and state management efficiency.
- Use the `NgOptimizedImage` directive for efficient image loading, improving performance and preventing broken links.
- Use `output` signal instead of `@Output()`
- Use `input` and `input.required` instead of `@Input()`
- Use model input `model` in the component when the value passed to the component also needs to be propagated. .(e.g. a search component takes the `search` text and also propagate to the parent component the changes on it
Import Order
1. Angular core and common modules
2. RxJS modules
3. Other Angular modules
4. Application core imports
5. Shared module imports
6. Environment-specific imports
7. Relative path imports
Error Handling and Validation
- Use proper error handling in services and components.
- Use custom error types or factories.
- Implement Angular form validation or custom validators.
Testing
- Follow the Arrange-Act-Assert pattern for tests.
- Create a `describe` for each public method
- Test happy path and error path
Performance Optimization
- Optimize ngFor with trackBy functions.
- Use pure pipes for expensive computations.
- Avoid direct DOM manipulation; use Angular’s templating system.
- Optimize rendering performance by deferring non-essential views.
- Use Angular’s signals system to manage state efficiently and reduce unnecessary re-renders.
- Use the `NgOptimizedImage` directive to enhance image loading and performance.
Documentation
- Do not return example code, do not use @author or @version or @since tags.
- DO NOT generate example usage.
- DO NOT generate usage example.
- DO NOT use html tags such as <p>, <lu>, <li>.
- DO NOT generate documentation for type member properties.
StoryBook
- Create a StoryBook Story for $SELECTION
- The first story should be called `Default` and should not modify any input
- Avoid using template or HTML when defining a story
- Prefer modifying just inputs in the stories
- Add one story for each input
- Do NOT add instructions about how to setup StoryBook
- Add all the stories
Security
- Prevent XSS with Angular’s sanitization; avoid using innerHTML.
- Sanitize dynamic content with built-in tools.
Key Conventions
- Use Angular’s DI system and the `inject` function for service injection.
- Focus on reusability and modularity.
- Follow Angular’s style guide.
- Optimize with Angular's best practices.
- Focus on optimizing Web Vitals like LCP, INP, and CLS.
Commit Message Guidelines
- Avoid overly verbose descriptions or unnecessary details.
- Start with a short sentence in imperative form, no more than 50 characters long.
- Then leave an empty line and continue with a more detailed explanation.
- Write only one sentence for the first part, and two or three sentences at most for the detailed explanation.
- Keep message as short as possible
- Use Conventional Commit format
- Use bullet points for multiple changes
Reference
- Refer to Angular’s official documentation for best practices in Components, Services, and Modules.
- Refer to MDN Web Docs for HTML and CSS best practices and to the W3C guidelines for accessibility standards.
Key Principles for CSS and HTML
- Write semantic HTML to improve accessibility and SEO.
- Ensure responsive design using media queries and flexible layouts.
- Prioritize accessibility by using ARIA roles and attributes.
HTML
- Use semantic elements (e.g., <header>, <main>, <footer>, <article>, <section>).
- Use <button> for clickable elements, not <div> or <span>.
- Use <a> for links, ensuring href attribute is present.
- Use <img> with alt attribute for images.
- Use <form> for forms, with appropriate input types and labels.
- Avoid using deprecated elements (e.g., <font>, <center>).
CSS
- Use external stylesheets for CSS.
- Use class selectors over ID selectors for styling.
- Use Flexbox and Grid for layout.
- Use rem and em units for scalable and accessible typography.
- Use CSS variables for consistent theming.
- Use CSS for styling, avoiding inline styles.
- Use Component based BEM (Block Element Modifier) methodology for naming classes.
- Avoid !important; use specificity to manage styles.
Responsive Design
- Use media queries to create responsive layouts.
- Use mobile-first approach for media queries.
- Ensure touch targets are large enough for touch devices.
- Use responsive images with srcset and sizes attributes.
- Use viewport meta tag for responsive scaling.
Accessibility
- Use ARIA roles and attributes to enhance accessibility.
- Ensure sufficient color contrast for text.
- Provide keyboard navigation for interactive elements.
- Use focus styles to indicate focus state.
- Use landmarks (e.g., <nav>, <main>, <aside>) for screen readers.
Performance
- Minimize CSS and HTML file sizes.
- Use CSS minification and compression.
- Avoid excessive use of animations and transitions.
- Use lazy loading for images and other media.
Testing
- Test HTML and CSS in multiple browsers and devices.
- Use tools like Lighthouse for performance and accessibility audits.
- Validate HTML and CSS using W3C validators.
Documentation
- Comment complex CSS rules and HTML structures.
- Use consistent naming conventions for classes and IDs.
- Document responsive breakpoints and design decisions.