KoCoder
6d6dcb66a1
All checks were successful
Build and Push Docker Image / build (push) Successful in 3m6s
58 lines
1.9 KiB
Plaintext
58 lines
1.9 KiB
Plaintext
// Solid.js with Tailwind CSS .cursorrules
|
|
|
|
// Prefer functional components
|
|
|
|
const preferFunctionalComponents = true;
|
|
|
|
// Solid.js and Tailwind CSS best practices
|
|
|
|
const solidjsTailwindBestPractices = [
|
|
"Use createSignal() for reactive state",
|
|
"Implement Tailwind CSS classes for styling",
|
|
"Utilize TypeScript's strict mode",
|
|
"Utilize @apply directive in CSS files for reusable styles",
|
|
"Implement responsive design using Tailwind's responsive classes",
|
|
"Use Tailwind's CSS in /src/styles.css for global styles",
|
|
"Implement dark mode using Tailwind's dark variant",
|
|
];
|
|
|
|
// Additional instructions
|
|
|
|
const additionalInstructions = `
|
|
|
|
1. Use .tsx extension for files with JSX
|
|
2. Implement strict TypeScript checks
|
|
3. Implement proper Tailwind CSS purging for production builds
|
|
4. Utilize TanStack Router for routing when applicable
|
|
5. Use type-safe context with createContext
|
|
6. Implement proper typing for event handlers
|
|
7. Follow TypeScript best practices and naming conventions
|
|
8. Use type assertions sparingly and only when necessary
|
|
9. Use Tailwind's @layer directive for custom styles
|
|
10. Implement utility-first CSS approach
|
|
11. Follow both Solid.js and Tailwind naming conventions
|
|
12. Use JIT (Just-In-Time) mode for faster development
|
|
`;
|
|
We use Sentry for watching for errors in our deployed application, as well as for instrumentation of our application.
|
|
|
|
## Error collection
|
|
|
|
Error collection is automatic and configured in `src/router.tsx`.
|
|
|
|
## Instrumentation
|
|
|
|
We want our server functions intstrumented. So if you see a function name like `createServerFn`, you can instrument it with Sentry. You'll need to import `Sentry`:
|
|
|
|
```tsx
|
|
import * as Sentry from '@sentry/browser'
|
|
```
|
|
|
|
And then wrap the implementation of the server function with `Sentry.startSpan`, liks so:
|
|
|
|
```tsx
|
|
Sentry.startSpan({ name: 'Requesting all the pokemon' }, async () => {
|
|
// Some lengthy operation here
|
|
await fetch('https://api.pokemon.com/data/')
|
|
})
|
|
```
|