Welcome to the Astro-Basics Guide

Section titled “Welcome to the Astro-Basics Guide”

This documentation provides comprehensive guidance for using the astro-basics component library and development framework. Whether you’re building a new project or integrating with existing applications, this guide will help you get the most out of our tools.

Getting Started

Learn how to install and configure astro-basics in your project. Get up and running in minutes with our quick start guide.

Components

Explore our collection of reusable Astro and React components. Each component is designed for flexibility and ease of use.

API Reference

Detailed API documentation for all components, utilities, and configuration options available in the library.

Database Switching

Switch between Supabase and Turso databases with a single command. Features automatic backups, real-time switching, and zero breaking changes.

MCP Servers

Discover how to use Model Context Protocol (MCP) servers to extend Claude’s capabilities with 10+ integrated development tools.

Design Tokens

Comprehensive design tokens extracted from Figma. Use colors, spacing, and typography tokens across your components with full TypeScript support and W3C DTCG format.

Role Guard System

Unified role-based visibility system supporting both Supabase and Clerk roles with server-side security, auto-caching, and zero client JavaScript. Includes dedicated page-level protection with hierarchical privilege escalation.

Key Features

Section titled “Key Features”
  • 🚀 Server-Side Rendering: Built on Astro with SSR support for optimal performance
  • ⚛️ React Integration: Seamless integration with React components for interactive elements
  • 🔐 Authentication Ready: Pre-configured Clerk integration for user management
  • 📱 PWA Support: Progressive Web App capabilities out of the box
  • 🎨 Design Tokens: Figma-extracted tokens in SCSS, TypeScript, JSON, and CSS formats
  • 🔄 Database Switching: Seamless switching between Supabase and Turso with one command
  • 🧪 Testing Suite: Comprehensive unit and E2E testing setup
  • 🤖 MCP Integration: 10+ Model Context Protocol servers for enhanced development workflow
  • 🎨 Design-to-Code: NEW! Automated Figma integration with code generation and design token sync
Section titled “Quick Links”

Enhanced Development Workflow

Section titled “Enhanced Development Workflow”

Astro-basics includes comprehensive Model Context Protocol (MCP) integration, providing Claude with direct access to 10+ specialized development tools:

  • 🚀 Astro Docs: Search official Astro documentation and examples
  • 🗃️ Supabase: Database operations, migrations, and project management
  • 🎭 Playwright: Browser automation and comprehensive E2E testing
  • 🔐 Clerk: User authentication and organization management
  • 🎨 Figma: NEW! Complete design-to-code generation, design token extraction, and asset management
  • 📚 Context7: Access any library documentation in real-time
  • 🌐 Netlify: Deployment automation and serverless functions
  • 💻 IDE Tools: VS Code diagnostics and Jupyter notebook execution

This integration enables seamless workflows from research and design to development, testing, and deployment—all within your conversation with Claude.

✨ Featured Integration: Figma MCP Server

Section titled “✨ Featured Integration: Figma MCP Server”

Transform your design workflow with automated code generation directly from Figma designs:

  • Code Generation: Convert Figma components to production-ready Astro/React code
  • Design Token Sync: Extract variables and sync with your SCSS architecture
  • Asset Pipeline: Export optimized images and create icon libraries
  • Component Mapping: Link Figma designs to existing codebase components

Explore Figma Integration → | Complete MCP Guide →

Project Architecture

Section titled “Project Architecture”

The astro-basics project is designed as both a component library and a demonstration site, showcasing best practices for modern web development with Astro.

Core Technologies

Section titled “Core Technologies”
  • Astro: Static site generator with server-side rendering
  • React: Interactive components and client-side functionality
  • TypeScript: Type-safe development experience
  • SCSS: Advanced styling with design system support
  • Clerk: Authentication and user management
  • Database Switching: Unified abstraction layer supporting Supabase and Turso with seamless switching

Ready to get started? Head over to our Installation Guide to begin building with astro-basics.