Cursor JavaScript 编码规范：来自 PatrickJS/awesome-cursorrules (40k stars) 的 jav，适用于各类文档与内容的智能化处理。
Cursor JavaScript 编码规范：来自 PatrickJS/awesome-cursorrules (40k stars) 的 jav，适用于各类文档与内容的智能化处理。
**文件来源:** PatrickJS/awesome-cursorrules → `rules/javascript-astro-tailwind-css-cursorrules-prompt-f.mdc`
**原仓库:** https://github.com/PatrickJS/awesome-cursorrules
**评分:** ⭐ 仓库 40k stars (社区最权威 Cursor rules 合集)
把 `javascript-astro-tailwind-css-cursorrules-prompt-f.mdc` 这条 Cursor 编码规则打包成可调用的 AI skill,帮你把代码生成统一到一致的标准上。
> Cursor rules for JavaScript development with Astro and Tailwind CSS integration.
globs: **/*
alwaysApply: false
---
You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development.
Key Principles
- Write concise, technical responses with accurate Astro examples.
- Leverage Astro's partial hydration and multi-framework support effectively.
- Prioritize static generation and minimal JavaScript for optimal performance.
- Use descriptive variable names and follow Astro's naming conventions.
- Organize files using Astro's file-based routing system.
Astro Project Structure
- Use the recommended Astro project structure:
- src/
- components/
- layouts/
- pages/
- styles/
- public/
- astro.config.mjs
Component Development
- Create .astro files for Astro components.
- Use framework-specific components (React, Vue, Svelte) when necessary.
- Implement proper component composition and reusability.
- Use Astro's component props for data passing.
- Leverage Astro's built-in components like when appropriate.
Routing and Pages
- Utilize Astro's file-based routing system in the src/pages/ directory.
- Implement dynamic routes using [...slug].astro syntax.
- Use getStaticPaths() for generating static pages with dynamic routes.
- Implement proper 404 handling with a 404.astro page.
Content Management
- Use Markdown (.md) or MDX (.mdx) files for content-heavy pages.
- Leverage Astro's built-in support for frontmatter in Markdown files.
- Implement content collections for organized content management.
Styling
- Use Astro's scoped styling with tags in .astro files.
- Leverage global styles when necessary, importing them in layouts.
- Utilize CSS preprocessing with Sass or Less if required.
- Implement responsive design using CSS custom properties and media queries.
Performance Optimization
- Minimize use of client-side JavaScript; leverage Astro's static generation.
- Use the client:* directives judiciously for partial hydration:
- client:load for immediately needed interactivity
- client:idle for non-critical interactivity
- client:visible for components that should hydrate when visible
- Implement proper lazy loading for images and other assets.
- Utilize Astro's built-in asset optimization features.
Data Fetching
- Use Astro.props for passing data to components.
- Implement getStaticPaths() for fetching data at build time.
- Use Astro.glob() for working with local files efficiently.
- Implement proper error handling for data fetching operations.
SEO and Meta Tags
- Use Astro's <head> tag for adding meta information.
- Implement canonical URLs for proper SEO.
- Use the <SEO> component pattern for reusable SEO setups.
Integrations and Plugins
- Utilize Astro integrations for extending functionality (e.g., @astrojs/image).
- Implement proper configuration for integrations in astro.config.mjs.
- Use Astro's official integrations when available for better compatibility.
Build and Deployment
- Optimize the build process using Astro's build command.
- Implement proper envir
...(完整内容在原仓库)...有问题或建议,在本 skill 下留言。
把 `javascript-astro-tailwind-css-cursorrules-prompt-f.mdc` 这条 Cursor 编码规则打包成可调用的 AI skill,帮你把代码生成统一到一致的标准上。
> Cursor rules for JavaScript development with Astro and Tailwind CSS integration.