Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Cursor rules for JavaScript development with Astro and Tailwind CSS integration · amariahak | DecimalAI

amariahak/Cursor rules for JavaScript development with Astro and Tailwind CSS integration

NewSkillScoreMaintained

Cursor rules for JavaScript development with Astro and Tailwind CSS integration.

Frontendby amariahak

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/amariahak-cursor-rules-for-javascript-development-with-astro-and-tailwind-css-integration/SKILL.md

decimalai skills pull amariahak-cursor-rules-for-javascript-development-with-astro-and-tailwind-css-integration --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/amariahak-cursor-rules-for-javascript-development-with-astro-and-tailwind-css-integration/SKILL.md https://app.decimal.ai/s/amariahak-cursor-rules-for-javascript-development-with-astro-and-tailwind-css-integration/SKILL.md

Raw file: /s/amariahak-cursor-rules-for-javascript-development-with-astro-and-tailwind-css-integration/SKILL.md ↗ · machine-readable summary at /s/amariahak-cursor-rules-for-javascript-development-with-astro-and-tailwind-css-integration.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

23 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 55d ago

No measurable change+35% tokens0% turns87% of whole cases pass with skill (20/23)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-03	✗→✓	▲ Improved	6%	0%
case-22	✓→✗	▼ Worse	66%	0%
case-04	✓→✓	＝ Same ✓	35%	0%
case-05	✓→✓	＝ Same ✓	140%	0%
case-06	✓→✓	＝ Same ✓	58%	0%

Showing 5 of 23 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/1/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

amariahak / atlarix-skills

skills/acr-javascript-astro-tailwind-css-cursorrules-prompt-f/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/1/2026Version v1

Skill contents

SKILL.md

Cursor rules for JavaScript development with Astro and Tailwind CSS integration

When to use this skill

Cursor rules for JavaScript development with Astro and Tailwind CSS integration.

Source

Synced from https://github.com/PatrickJS/awesome-cursorrules/tree/main/rules/javascript-astro-tailwind-css-cursorrules-prompt-f.mdc.

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 environment variable handling for different environments.
Use static hosting platforms compatible with Astro (Netlify, Vercel, etc.).
Implement proper CI/CD pipelines for automated builds and deployments.

Styling with Tailwind CSS

Integrate Tailwind CSS with Astro @astrojs/tailwind

Tailwind CSS Best Practices

Use Tailwind utility classes extensively in your Astro components.
Leverage Tailwind's responsive design utilities (sm:, md:, lg:, etc.).
Utilize Tailwind's color palette and spacing scale for consistency.
Implement custom theme extensions in tailwind.config.cjs when necessary.
Never use the @apply directive

Testing

Implement unit tests for utility functions and helpers.
Use end-to-end testing tools like Cypress for testing the built site.
Implement visual regression testing if applicable.

Accessibility

Ensure proper semantic HTML structure in Astro components.
Implement ARIA attributes where necessary.
Ensure keyboard navigation support for interactive elements.

Key Conventions

Follow Astro's Style Guide for consistent code formatting.
Use TypeScript for enhanced type safety and developer experience.
Implement proper error handling and logging.
Leverage Astro's RSS feed generation for content-heavy sites.
Use Astro's Image component for optimized image delivery.

Performance Metrics

Prioritize Core Web Vitals (LCP, FID, CLS) in development.
Use Lighthouse and WebPageTest for performance auditing.
Implement performance budgets and monitoring.

Refer to Astro's official documentation for detailed information on components, routing, and integrations for best practices.

Illustrative Want to see what amariahak/Cursor rules for JavaScript development with Astro and Tailwind CSS integration would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/4/2026, 08:25 UTC · 23 cases

Lift

0%

87% vs 87%

Agent turns

0%

1.0 vs 1.0

Tokens

+35%

2,484.09 vs 1,839.09

fail → pass · 1pass → pass · 19fail → fail · 2pass → fail · 1

Per-case results (23)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I am building a blog section for my web application using Astro and Tailwind CSS. Can you write a page component that dynamically generates static post pages based on route parameters, renders post metadata, and includes a interactive React feedback form widget at the bottom that only hydrates when the user scrolls down to it? Please output the complete component code styled with responsive utility classes according to best practices.	fail→fail	23,623	27,334	+16%	1	1	0%	5,445	5,691	+5%	0	0	—
case-02 I need a code template for a product catalog page in an Astro project styled with Tailwind CSS. Please provide the Astro component file that accepts catalog data via props, sets up canonical SEO metadata tags in the head section, and styles the grid cards cleanly using pure utility classes.	fail→fail	31,784	18,030	-43%	1	1	0%	4,182	5,033	+20%	0	0	—
case-03 I am writing a custom card component in my Astro web app with Tailwind CSS. I want to keep the template HTML clean, so I plan to group utility classes under custom CSS classes in the <style> block using @apply. Show me how to style this card component with hover states and responsive paddings.	fail→pass	12,986	14,903	+15%	1	1	0%	2,703	2,868	+6%	0	0	—
case-04 I am creating a nested documentation routing structure in an Astro project where pages can be nested deeply (e.g., /docs/getting-started, /docs/api/v1/endpoints). What file path and name should I use under src/pages/docs/ for this catch-all dynamic route, and how should static paths be exported?	pass→pass	9,653	7,535	-22%	1	1	0%	1,840	2,483	+35%	0	0	—
case-05 I have a non-critical chat widget component built in Vue that appears near the bottom of an Astro landing page. It should not block initial page rendering and only needs to hydrate when the browser main thread is idle. Provide the Astro template markup attaching the appropriate hydration directive.	pass→pass	4,253	3,997	-6%	1	1	0%	725	1,743	+140%	0	0	—
case-06 I have an interactive header navigation component built in React that provides a mobile drawer menu right away. Which hydration directive should I attach to this component in Astro so it is interactive immediately when the page loads?	pass→pass	6,550	3,511	-46%	1	1	0%	1,034	1,636	+58%	0	0	—
case-07 I want to handle non-existent URLs on my static Astro website. What file name and location under src/ should I create to display a custom 404 error page?	pass→pass	4,831	4,580	-5%	1	1	0%	866	1,738	+101%	0	0	—
case-08 I am configuring an Astro project to work with Tailwind CSS. Show me the project configuration file astro.config.mjs with the standard Astro Tailwind integration attached.	pass→pass	4,198	3,252	-23%	1	1	0%	801	1,657	+107%	0	0	—
case-09 I need to import all Markdown files located in src/posts/ within an Astro component frontmatter script without installing additional npm packages. What built-in Astro function should I call to load these local files?	pass→pass	4,014	3,388	-16%	1	1	0%	682	1,599	+134%	0	0	—
case-10 I am building a marketing product page in Astro. Show me how to fetch product data at build time to maintain static generation and minimize client-side JavaScript execution.	pass→pass	13,366	9,572	-28%	1	1	0%	2,552	3,112	+22%	0	0	—
case-11 Write an Astro component for an Author Profile card that accepts name, bio, and avatarUrl as component props. Ensure type safety using standard TypeScript definitions in the frontmatter.	pass→pass	7,192	5,590	-22%	1	1	0%	1,583	2,094	+32%	0	0	—
case-12 I am creating an SEO head layout component in Astro. How should I generate and render the canonical link element in the head section using Astro runtime helpers?	pass→pass	10,939	8,961	-18%	1	1	0%	2,113	2,865	+36%	0	0	—
case-13 I need to add component-specific CSS styling for a feature section in an Astro project without creating global style side effects. Where should these CSS rules be defined within the file?	pass→pass	7,032	4,695	-33%	1	1	0%	1,312	1,939	+48%	0	0	—
case-14 I am setting up a fresh Astro web repository with Tailwind CSS integration. List the recommended directory and file layout for organizing components, layouts, pages, styles, static public assets, and config.	pass→pass	16,044	7,451	-54%	1	1	0%	2,443	2,509	+3%	0	0	—
case-15 Write an Astro card container template using Tailwind CSS that displays 1 grid column on mobile devices, 2 columns on medium screens, and 4 columns on large screens.	pass→pass	8,885	5,638	-37%	1	1	0%	2,004	2,226	+11%	0	0	—
case-16 I want to set up structured content collection schemas for blog posts in my Astro site. Where should the collection schema file be located and what Astro utility defines the collection?	pass→pass	8,193	4,438	-46%	1	1	0%	1,065	1,874	+76%	0	0	—
case-17 Show me how to import and display an optimized banner image hero.png located in src/assets/ using Astro's built-in image handling component.	pass→pass	8,236	6,028	-27%	1	1	0%	1,761	2,247	+28%	0	0	—
case-18 I have a React search input component SearchBar and a Vue filter widget CategoryFilter. How do I import and render both inside a single Astro page component?	pass→pass	10,279	6,740	-34%	1	1	0%	1,988	2,385	+20%	0	0	—
case-19 Inside an Astro dynamic route file src/pages/products/[id].astro, how do you extract the id parameter inside the component script frontmatter?	pass→pass	5,946	5,029	-15%	1	1	0%	1,066	2,067	+94%	0	0	—
case-20 I want to generate an RSS XML feed for my blog in Astro at /rss.xml. Show me how to set up the feed handler using Astro's RSS helper package.	pass→pass	10,736	7,643	-29%	1	1	0%	2,079	2,646	+27%	0	0	—
case-21 I am building a pure React single-page application using Vite (without Astro). How do I configure the official Tailwind CSS Vite plugin inside vite.config.ts?	pass→pass	7,704	6,475	-16%	1	1	0%	1,488	2,323	+56%	0	0	—
case-22 I am writing a backend API service with Node.js and Express. Provide a TypeScript route handler for POST requests to /api/feedback that parses JSON body data and responds with HTTP status 201.	pass→fail	7,435	10,835	+46%	1	1	0%	1,423	2,360	+66%	0	0	—
case-23 Write a standalone React custom hook named useDebounce that accepts a value and delay parameter and returns the debounced value.	pass→pass	6,134	4,792	-22%	1	1	0%	1,144	2,039	+78%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of 0 percentage points is the difference between those two pass rates over the 23 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 87%
Pass rate with the skill: 87%
Cases attempted: 23
Cases counted toward lift: 23
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/4/2026, 08:25 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-03

Prompt

I am writing a custom card component in my Astro web app with Tailwind CSS. I want to keep the template HTML clean, so I plan to group utility classes under custom CSS classes in the <style> block using @apply. Show me how to style this card component with hover states and responsive paddings.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signalsno signals yet

BenchmarkRun a verified benchmark with positive lift

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+44% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

No signals yet — run a benchmark or collect evaluated traces to earn a score.

Verified on gemini-3.6-flash · re-tested 54 days ago

Other measured skills in the registry, with their headline benchmark lift.