Loading...
Loading...
Back to Rules
Web Development
Astro Tailwind CSS Rules: Boost Performance & SEO in Modern Web Development
Claude Directory November 29, 2025
0 copies 3 downloads
Unlock expert guidelines for Astro framework integrated with Tailwind CSS. Optimize static sites for speed, SEO, and scalability with rewritten best practices for components, routing, styling, and deployment.
Rule Content
Master scalable web apps using Astro and Tailwind CSS by following these optimized rules: - **Core Expertise Focus** - Specialize in JavaScript, TypeScript, and Astro for high-performance sites. - Deliver precise, compact code snippets with real-world Astro implementations. - Emphasize static rendering, partial hydration, and cross-framework compatibility. - **Recommended Project Layout** - Structure projects as: src/ (components/, layouts/, pages/, styles/), public/, astro.config.mjs. - Adopt file-based routing in src/pages/ for intuitive navigation. - **Building Reusable Components** - Develop in .astro files for native components. - Integrate React, Vue, or Svelte islands only when interactivity demands it. - Pass data via props and compose for modularity. - Apply built-ins like <Markdown /> for content rendering. - **Efficient Routing Setup** - Leverage src/pages/ for automatic routes; use [...slug].astro for dynamics. - Generate paths statically with getStaticPaths(). - Add 404.astro for custom error pages. - **Content Handling Strategies** - Store pages in .md or .mdx with frontmatter YAML. - Organize via content collections for scalability. - **Styling Approaches** - Scope styles in <style> within .astro files. - Import global CSS in layouts; support Sass/Less preprocessors. - Build responsive UIs with CSS vars and media queries. - **Tailwind CSS Integration** - Add @astrojs/tailwind via astro.config.mjs. - Apply utility classes liberally in templates. - Use prefixes like sm:, md: for breakpoints. - Extend themes in tailwind.config.cjs; avoid @apply overuse. - **Performance Enhancements** - Favor server-side static builds over client JS. - Apply client:load, client:idle, client:visible directives sparingly. - Lazy-load images; use Astro's image optimization. - **Data Management** - Propagate data with Astro.props. - Fetch at build via getStaticPaths() or Astro.glob(). - Include robust error checks. - **SEO Optimization** - Populate <head> with meta tags and canonical links. - Create reusable <SEO /> components. - **Extensions and Tools** - Configure plugins like @astrojs/image in astro.config.mjs. - Prefer official Astro add-ons. - **Deployment Workflow** - Run astro build for production. - Manage env vars securely. - Deploy to Netlify/Vercel; automate with CI/CD. - **Testing Protocols** - Unit test helpers; E2E with Cypress. - Add visual regression checks. - **Accessibility Standards** - Use semantic HTML and ARIA roles. - Ensure keyboard-friendly interactions. - **Essential Conventions** - Adhere to Astro style guide and TypeScript. - Log errors effectively. - Generate RSS; optimize images with <Image />. - **Monitoring Metrics** - Target Core Web Vitals (LCP, FID, CLS). - Audit via Lighthouse/WebPageTest; set budgets.
Comments
More Rules
View allAI/ML
GLM-4.7 Optimized Config & System Prompt Designer
Expert system prompt for designing high-performance configurations tailored to GLM-4.7's strengths in coding, reasoning, tool use, and multilingual tasks, backed by benchmarks like SWE-bench and τ²-Bench.
C
CommunityAI/ML
GLM-4.7 Open-Source Coding Expert: Optimized System Prompt
Leverage GLM-4.7's top benchmarks in SWE-bench, LiveCodeBench, and more with this system prompt designed for generating clean, secure, open-source-ready code, stunning UIs, and agentic workflows.
C
CommunityAI/ML
GLM-4.7 Optimized Coding Agent
This system prompt transforms an AI into GLM-4.7, a benchmark-leading coding agent excelling in agentic workflows, tool use, multilingual coding, and complex reasoning with verified best practices for production-ready open-source development.
C
CommunityDevOps
Agentic Dev Loop: Autonomous Jira-Driven Coding Agent with GitHub CI Self-Healing
Ralph, a persistent autonomous AI agent, implements Jira tickets through an endless loop until 100% test success, with GitHub PRs, Jules AI reviews, and CI self-healing for reliable development workflows.
C
Claude DirectoryAI/ML
Türk Hukuku Uzmanı AI Agent: Güvenilir Yasal Danışman System Prompt
Claude'u Türk hukuku alanında dünyanın en önde gelen uzmanı olarak yapılandıran, yapılandırılmış yanıtlar, zorunlu uyarılar ve etik sınırlarla donatılmış profesyonel AI agent promptu.
C
CommunityDatabase
PostgreSQL Best Practices: Expert Subagent Guide
Expert subagent providing production-ready PostgreSQL guidance on schema design, query optimization, security, performance tuning, and administration with structured, actionable advice and official references.
C
Claude Directory