website-development_skill

Overview

This skill provides patterns and actionable guidance for building, styling, and adjusting website components, layouts, and interactive elements for the Beluga AI v2 documentation site. It focuses on Astro + Starlight, Tailwind-driven styling, component structure, and build configuration to deliver accessible, performant docs UI. Use this skill for implementation work only — not for writing documentation content.

How this skill works

I inspect the site structure, component conventions, and config files to recommend or produce Astro components (.astro) and client-side React only when interactivity is required. I provide Tailwind-based styling, custom plugin placement, Starlight overrides, responsive and accessible markup, and build adjustments (Vite/Tailwind/TypeScript) to meet performance and theming goals. I also outline where to place config (sidebar, theme, locales) and how to wire overrides into astro.config.mjs.

When to use it

• Creating or modifying page layouts, headers, footers, or sidebars
• Building interactive UI patterns (tabs, accordions, search, theme switcher) that need client behavior
• Customizing or overriding Starlight components with minimal replacement
• Implementing Tailwind utilities, custom plugins, or global styles
• Optimizing images, view transitions, or build performance (Vite/Sharp)

Best practices

• Use Astro components by default; only use React with client:* directives for interactive widgets
• Keep overrides minimal — extend Starlight components instead of full replacements
• Import using path aliases (@/ or ~/) to keep imports consistent across the codebase
• Organize styles in src/styles/ and use Tailwind utilities; put project utilities in src/tailwind-plugin/
• Respect dark/light variants and accessibility (keyboard focus, ARIA, semantic HTML)
• Avoid client-side JS when server-rendered Astro is sufficient to reduce bundle size

Example use cases

• Add a responsive hero section using an Astro component and Tailwind utilities
• Create a theme switcher that persists user preference using a small client-side React component
• Override Starlight’s NavLink to inject custom analytics attributes while preserving original behavior
• Add a custom Tailwind plugin for the docs grid and include it in the Tailwind config
• Optimize docs images with Sharp and configure view transitions via astro-vtbot