What is JavaScript Astro Tailwind CSS CSS?

JavaScript Astro Tailwind CSS CSS is a free, open-source AI agent skill. You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development.

How do I install JavaScript Astro Tailwind CSS CSS?

Install JavaScript Astro Tailwind CSS CSS with a single command: npx mdskills install PatrickJS/cursor-javascript-astro-tailwind-css. This downloads the skill files into your project and your AI agent picks them up automatically.

What platforms support JavaScript Astro Tailwind CSS CSS?

JavaScript Astro Tailwind CSS CSS works with Cursor. Skills use the open SKILL.md format which is compatible with any AI coding agent that reads markdown instructions.

← Back to rules

JavaScript Astro Tailwind CSS CSS

Name: JavaScript Astro Tailwind CSS CSS: AI Agent Skill
Rating: 6 (1 reviews)
Author: PatrickJS

RulesDesign SystemsIntermediate

You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development.

by @PatrickJS0Updated 2 weeks ago

Add this skill

npx mdskills install PatrickJS/cursor-javascript-astro-tailwind-css

Fork & Edit

Skill Advisor6.0

Comprehensive Astro framework guide with clear conventions and best practices

+Covers extensive Astro concepts from routing to performance optimization
+Provides specific technical guidance on partial hydration and static generation
+Includes practical conventions for styling, testing, and accessibility
-Lacks trigger conditions or workflows to activate these instructions
-Requests shell execution permission without clear use case in the content

SKILL.md

Edit in Browser

1You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development.
2 
3Key Principles
4 
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 
11Astro Project Structure
12 
13- Use the recommended Astro project structure:
14  - src/
15    - components/
16    - layouts/
17    - pages/
18    - styles/
19  - public/
20  - astro.config.mjs
21 
22Component Development
23 
24- Create .astro files for Astro components.
25- Use framework-specific components (React, Vue, Svelte) when necessary.
26- Implement proper component composition and reusability.
27- Use Astro's component props for data passing.
28- Leverage Astro's built-in components like when appropriate.
29 
30Routing and Pages
31 
32- Utilize Astro's file-based routing system in the src/pages/ directory.
33- Implement dynamic routes using [...slug].astro syntax.
34- Use getStaticPaths() for generating static pages with dynamic routes.
35- Implement proper 404 handling with a 404.astro page.
36 
37Content Management
38 
39- Use Markdown (.md) or MDX (.mdx) files for content-heavy pages.
40- Leverage Astro's built-in support for frontmatter in Markdown files.
41- Implement content collections for organized content management.
42 
43Styling
44 
45- Use Astro's scoped styling with tags in .astro files.
46- Leverage global styles when necessary, importing them in layouts.
47- Utilize CSS preprocessing with Sass or Less if required.
48- Implement responsive design using CSS custom properties and media queries.
49 
50Performance Optimization
51 
52- Minimize use of client-side JavaScript; leverage Astro's static generation.
53- Use the client:* directives judiciously for partial hydration:
54  - client:load for immediately needed interactivity
55  - client:idle for non-critical interactivity
56  - client:visible for components that should hydrate when visible
57- Implement proper lazy loading for images and other assets.
58- Utilize Astro's built-in asset optimization features.
59 
60Data Fetching
61 
62- Use Astro.props for passing data to components.
63- Implement getStaticPaths() for fetching data at build time.
64- Use Astro.glob() for working with local files efficiently.
65- Implement proper error handling for data fetching operations.
66 
67SEO and Meta Tags
68 
69- Use Astro's <head> tag for adding meta information.
70- Implement canonical URLs for proper SEO.
71- Use the <SEO> component pattern for reusable SEO setups.
72 
73Integrations and Plugins
74 
75- Utilize Astro integrations for extending functionality (e.g., @astrojs/image).
76- Implement proper configuration for integrations in astro.config.mjs.
77- Use Astro's official integrations when available for better compatibility.
78 
79Build and Deployment
80 
81- Optimize the build process using Astro's build command.
82- Implement proper environment variable handling for different environments.
83- Use static hosting platforms compatible with Astro (Netlify, Vercel, etc.).
84- Implement proper CI/CD pipelines for automated builds and deployments.
85 
86Styling with Tailwind CSS
87 
88- Integrate Tailwind CSS with Astro @astrojs/tailwind
89 
90Tailwind CSS Best Practices
91 
92- Use Tailwind utility classes extensively in your Astro components.
93- Leverage Tailwind's responsive design utilities (sm:, md:, lg:, etc.).
94- Utilize Tailwind's color palette and spacing scale for consistency.
95- Implement custom theme extensions in tailwind.config.cjs when necessary.
96- Never use the @apply directive
97 
98Testing
99 
100- Implement unit tests for utility functions and helpers.
101- Use end-to-end testing tools like Cypress for testing the built site.
102- Implement visual regression testing if applicable.
103 
104Accessibility
105 
106- Ensure proper semantic HTML structure in Astro components.
107- Implement ARIA attributes where necessary.
108- Ensure keyboard navigation support for interactive elements.
109 
110Key Conventions
111 
1121. Follow Astro's Style Guide for consistent code formatting.
1132. Use TypeScript for enhanced type safety and developer experience.
1143. Implement proper error handling and logging.
1154. Leverage Astro's RSS feed generation for content-heavy sites.
1165. Use Astro's Image component for optimized image delivery.
117 
118Performance Metrics
119 
120- Prioritize Core Web Vitals (LCP, FID, CLS) in development.
121- Use Lighthouse and WebPageTest for performance auditing.
122- Implement performance budgets and monitoring.
123 
124Refer to Astro's official documentation for detailed information on components, routing, and integrations for best practices.
125 
126

Full transparency — inspect the skill content before installing.