astro-navigation
Astro Navigation Skill
Purpose
Provides navigation patterns for lead generation sites. Mobile-first, accessible, conversion-focused. Implements header, footer, mobile menu, breadcrumbs, and skip links with proper keyboard navigation and screen reader support.
Core Rules
- Mobile-first — Design for 375px, enhance for desktop
- Phone prominent — Click-to-call in header on mobile
- CTA visible — Primary CTA always accessible
- Accessible — Keyboard navigable, screen reader friendly
- Fast — No layout shift on menu toggle
- Sticky elements — Header fixed top, mobile CTA bar fixed bottom
- Active states — Indicate current page in navigation
- Skip link — Allow keyboard users to skip to main content
- Escape key — Close mobile menu with Escape
- Safe areas — Account for iOS notch/safe areas
More from soborbo/claudeskills
astro-seo
SEO markup patterns for Astro lead generation sites. Meta tags, Open Graph, Schema.org, sitemap, robots. Use for all SEO implementation.
37astro-architecture
Technical architecture for Astro lead generation websites. Use when setting up new projects, configuring build tools, or establishing project foundations. For images use astro-images skill. For SEO use astro-seo skill.
20astro-performance
Core Web Vitals and performance optimization for Astro sites. LCP preloading, font strategy, image patterns, critical path, third-party scripts, Cloudflare Tag Gateway. Use for performance tuning.
18astro-animations
Animation patterns for Astro sites. Scroll animations, micro-interactions, transitions, loading states. Performance-focused, accessibility-aware.
17astro-a11y
Accessibility patterns for Astro lead generation sites. WCAG 2.1 AA compliance, screen readers, keyboard navigation, focus management, ARIA. Use for all accessibility implementation.
14astro-images
Width-based responsive image patterns for Astro. Local processing, AVIF/WebP/JPG, face-focus, OG generation. Includes Picture and FixedImage components.
14