Astro-Basics Guide

Build modern web applications with our comprehensive component library and utilities

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 Integration

NEW! Transform Figma designs into production-ready code with automated component generation, design token extraction, and asset management.

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

🚀 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
🎨 Customizable Styling: SCSS-based theming system with design tokens
🔄 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

Quick Links

Installation Guide
Component Library
Database Switching - Switch providers with one command
Database Troubleshooting - Comprehensive problem resolution
Role Guard System - Unified role-based access control
Page-Level Protection - Secure entire pages with hierarchical roles
API Documentation
MCP Servers Guide
NEW! Figma Integration
GitHub Repository

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

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

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

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.