moai-adk 0.25.4__py3-none-any.whl → 0.32.8__py3-none-any.whl

moai_adk/templates/.claude/skills/moai-library-shadcn/modules/shadcn-theming.md

@@ -0,0 +1,373 @@
+name: moai-library-shadcn-theming
+description: shadcn/ui theme system and design token customization
+
+## Theme System Implementation
+
+### Advanced Theme Provider
+
+```typescript
+// Advanced theme system with CSS variables and dark mode
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+interface ThemeProviderProps {
+ children: React.ReactNode;
+ defaultTheme?: Theme;
+ storageKey?: string;
+ attribute?: string;
+ enableSystem?: boolean;
+}
+
+interface ThemeProviderState {
+ theme: Theme;
+ setTheme: (theme: Theme) => void;
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState | undefined>(undefined);
+
+export function ThemeProvider({
+ children,
+ defaultTheme = "system",
+ storageKey = "ui-theme",
+ attribute = "class",
+ enableSystem = true,
+ ...props
+}: ThemeProviderProps) {
+ const [theme, setTheme] = useState<Theme>(() => {
+ if (typeof window !== "undefined") {
+ return (localStorage.getItem(storageKey) as Theme) || defaultTheme;
+ }
+ return defaultTheme;
+ });
+
+ useEffect(() => {
+ const root = window.document.documentElement;
+
+ root.classList.remove("light", "dark");
+
+ if (theme === "system" && enableSystem) {
+ const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+ .matches
+ ? "dark"
+ : "light";
+
+ root.classList.add(systemTheme);
+ return;
+ }
+
+ root.classList.add(theme);
+ }, [theme, enableSystem, attribute]);
+
+ const value = {
+ theme,
+ setTheme: (theme: Theme) => {
+ localStorage.setItem(storageKey, theme);
+ setTheme(theme);
+ },
+ };
+
+ return (
+ <ThemeProviderContext.Provider {...props} value={value}>
+ {children}
+ </ThemeProviderContext.Provider>
+ );
+}
+
+export const useTheme = () => {
+ const context = useContext(ThemeProviderContext);
+
+ if (context === undefined)
+ throw new Error("useTheme must be used within a ThemeProvider");
+
+ return context;
+};
+```
+
+### Design Token Configuration
+
+```typescript
+// Theme configuration with design tokens
+export const theme = {
+ light: {
+ background: "hsl(0 0% 100%)",
+ foreground: "hsl(240 10% 3.9%)",
+ card: "hsl(0 0% 100%)",
+ cardForeground: "hsl(240 10% 3.9%)",
+ popover: "hsl(0 0% 100%)",
+ popoverForeground: "hsl(240 10% 3.9%)",
+ primary: "hsl(240 9% 10%)",
+ primaryForeground: "hsl(0 0% 98%)",
+ secondary: "hsl(240 4.8% 95.9%)",
+ secondaryForeground: "hsl(240 3.8% 46.1%)",
+ muted: "hsl(240 4.8% 95.9%)",
+ mutedForeground: "hsl(240 3.8% 46.1%)",
+ accent: "hsl(240 4.8% 95.9%)",
+ accentForeground: "hsl(240 5.9% 10%)",
+ destructive: "hsl(0 72.22% 50.59%)",
+ destructiveForeground: "hsl(0 0% 98%)",
+ border: "hsl(240 5.9% 90%)",
+ input: "hsl(240 5.9% 90%)",
+ ring: "hsl(240 5.9% 10%)",
+ },
+ dark: {
+ background: "hsl(240 10% 3.9%)",
+ foreground: "hsl(0 0% 98%)",
+ card: "hsl(240 10% 3.9%)",
+ cardForeground: "hsl(0 0% 98%)",
+ popover: "hsl(240 10% 3.9%)",
+ popoverForeground: "hsl(0 0% 98%)",
+ primary: "hsl(0 0% 98%)",
+ primaryForeground: "hsl(240 9% 10%)",
+ secondary: "hsl(240 3.7% 15.9%)",
+ secondaryForeground: "hsl(0 0% 98%)",
+ muted: "hsl(240 3.7% 15.9%)",
+ mutedForeground: "hsl(240 5% 64.9%)",
+ accent: "hsl(240 3.7% 15.9%)",
+ accentForeground: "hsl(0 0% 98%)",
+ destructive: "hsl(0 62.8% 30.6%)",
+ destructiveForeground: "hsl(0 0% 98%)",
+ border: "hsl(240 3.7% 15.9%)",
+ input: "hsl(240 3.7% 15.9%)",
+ ring: "hsl(240 4.9% 83.9%)",
+ },
+};
+
+// Apply theme CSS variables
+export function applyThemeCSS() {
+ const root = document.documentElement;
+ 
+ Object.entries(theme.light).forEach(([key, value]) => {
+ root.style.setProperty(`--${key}`, value);
+ });
+}
+```
+
+### CSS Variables in globals.css
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 240 10% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 240 10% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 240 10% 3.9%;
+ --primary: 240 9% 10%;
+ --primary-foreground: 0 0% 98%;
+ --secondary: 240 4.8% 95.9%;
+ --secondary-foreground: 240 3.8% 46.1%;
+ --muted: 240 4.8% 95.9%;
+ --muted-foreground: 240 3.8% 46.1%;
+ --accent: 240 4.8% 95.9%;
+ --accent-foreground: 240 5.9% 10%;
+ --destructive: 0 72.22% 50.59%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 5.9% 90%;
+ --input: 240 5.9% 90%;
+ --ring: 240 5.9% 10%;
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 240 10% 3.9%;
+ --foreground: 0 0% 98%;
+ --card: 240 10% 3.9%;
+ --card-foreground: 0 0% 98%;
+ --popover: 240 10% 3.9%;
+ --popover-foreground: 0 0% 98%;
+ --primary: 0 0% 98%;
+ --primary-foreground: 240 9% 10%;
+ --secondary: 240 3.7% 15.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 240 3.7% 15.9%;
+ --muted-foreground: 240 5% 64.9%;
+ --accent: 240 3.7% 15.9%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 3.7% 15.9%;
+ --input: 240 3.7% 15.9%;
+ --ring: 240 4.9% 83.9%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
+```
+
+### Custom Brand Theme
+
+```typescript
+// Create custom brand theme
+export function createBrandTheme(brandColors: {
+ primary: string;
+ secondary: string;
+ accent: string;
+}) {
+ return {
+ light: {
+ ...theme.light,
+ primary: brandColors.primary,
+ secondary: brandColors.secondary,
+ accent: brandColors.accent,
+ },
+ dark: {
+ ...theme.dark,
+ primary: brandColors.primary,
+ secondary: brandColors.secondary,
+ accent: brandColors.accent,
+ },
+ };
+}
+
+// Apply custom brand theme
+export function applyBrandTheme(brandTheme: typeof theme) {
+ const root = document.documentElement;
+ const currentTheme = root.classList.contains("dark") ? "dark" : "light";
+ 
+ Object.entries(brandTheme[currentTheme]).forEach(([key, value]) => {
+ root.style.setProperty(`--${key}`, value);
+ });
+}
+```
+
+### Theme Toggle Component
+
+```typescript
+// Theme toggle component
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useTheme } from "@/components/theme-provider";
+
+export function ThemeToggle() {
+ const { setTheme } = useTheme();
+
+ return (
+ <DropdownMenu>
+ <DropdownMenuTrigger asChild>
+ <Button variant="outline" size="icon">
+ <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+ <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+ <span className="sr-only">Toggle theme</span>
+ </Button>
+ </DropdownMenuTrigger>
+ <DropdownMenuContent align="end">
+ <DropdownMenuItem onClick={() => setTheme("light")}>
+ Light
+ </DropdownMenuItem>
+ <DropdownMenuItem onClick={() => setTheme("dark")}>
+ Dark
+ </DropdownMenuItem>
+ <DropdownMenuItem onClick={() => setTheme("system")}>
+ System
+ </DropdownMenuItem>
+ </DropdownMenuContent>
+ </DropdownMenu>
+ );
+}
+```
+
+### Tailwind Configuration
+
+```javascript
+// tailwind.config.js
+/ @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: ["class"],
+ content: [
+ './pages//*.{ts,tsx}',
+ './components//*.{ts,tsx}',
+ './app//*.{ts,tsx}',
+ './src//*.{ts,tsx}',
+ ],
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: 0 },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: 0 },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate")],
+}
+```
+
+---
+
+Last Updated: 2025-11-26
+Related: [Main Skill](../SKILL.md), [shadcn Components](shadcn-components.md)

moai_adk/templates/.claude/skills/moai-library-shadcn/reference.md

@@ -0,0 +1,74 @@
+## API Reference
+
+### Core shadcn/ui Operations
+- `create_component(variant_config, props)` - Create new component
+- `customize_theme(theme_config, colors)` - Customize theme
+- `install_component(component_name)` - Install new component
+- `setup_design_system(tokens, branding)` - Set up design system
+- `optimize_components(performance_config)` - Optimize component performance
+
+### Context7 Integration
+- `get_latest_shadcn_docs()` - shadcn/ui docs via Context7
+- `analyze_component_patterns()` - Component patterns via Context7
+- `optimize_theme_system()` - Theme optimization via Context7
+
+## Best Practices (November 2025)
+
+### DO
+- Use TypeScript for type safety and better developer experience
+- Implement proper accessibility with ARIA attributes
+- Customize themes using CSS variables for consistency
+- Optimize component performance with memoization and lazy loading
+- Use form validation with proper error handling
+- Implement responsive design with Tailwind CSS
+- Use Radix UI primitives for accessible components
+- Test components across different browsers and devices
+
+### DON'T
+- Skip TypeScript type definitions and validations
+- Ignore accessibility requirements and WCAG compliance
+- Override component styles without understanding the CSS structure
+- Forget to implement proper error handling and validation
+- Skip performance optimization for large datasets
+- Use inline styles instead of Tailwind CSS classes
+- Forget to implement proper keyboard navigation
+- Skip component testing and user experience validation
+
+## Works Well With
+
+- `moai-domain-frontend` (Frontend development patterns)
+- `moai-baas-foundation` (Enterprise UI architecture)
+- `moai-security-api` (UI security implementation)
+- `moai-essentials-perf` (Performance optimization)
+- `moai-foundation-trust` (Accessibility and compliance)
+- `moai-domain-backend` (Backend integration)
+- `moai-baas-vercel-ext` (Frontend deployment)
+- `moai-domain-testing` (Component testing strategies)
+
+## Changelog
+
+- .0 (2025-11-13): Complete Enterprise rewrite with 40% content reduction, 4-layer Progressive Disclosure structure, Context7 integration, November 2025 shadcn/ui ecosystem updates, and advanced component patterns
+- v2.0.0 (2025-11-11): Complete metadata structure, component patterns, theme system
+- v1.0.0 (2025-11-11): Initial shadcn/ui component library
+
+---
+
+End of Skill | Updated 2025-11-13
+
+## Design System Integration
+
+### Enterprise Features
+- Comprehensive component library with enterprise-grade features
+- Advanced theming system with brand customization
+- Performance optimization for large-scale applications
+- Accessibility compliance with WCAG 2.1 AA standards
+
+### Modern Development
+- TypeScript-first development with full type safety
+- Modern React patterns with hooks and server components
+- Tailwind CSS integration for consistent styling
+- Framer Motion for smooth animations and transitions
+
+---
+
+End of Enterprise shadcn/ui Component Library Expert

moai_adk/templates/.claude/skills/moai-platform-baas/README.md

@@ -0,0 +1,186 @@
+# moai-platform-baas: Comprehensive BaaS Integration Hub
+
+A unified skill for managing 9 major Backend-as-a-Service (BaaS) providers with AI-powered provider selection, cross-provider integration patterns, and automated migration assistance.
+
+## Supported Providers
+
+### Authentication (3 providers)
+- Auth0: Enterprise SSO with 50+ connections, B2B SaaS features
+- Clerk: Modern authentication with WebAuthn, organizations, and beautiful UI
+- Firebase Auth: Google ecosystem integration with mobile-first design
+
+### Database (4 providers)
+- Supabase: PostgreSQL 16+ with RLS, real-time subscriptions, Edge Functions
+- Neon: Serverless PostgreSQL with auto-scaling and instant branching
+- Convex: Real-time reactive backend with optimistic updates and database branching
+- Firebase Firestore: Mobile-first with offline sync and Google integration
+
+### Deployment (2 providers)
+- Vercel: Edge deployment optimization with Next.js performance
+- Railway: Full-stack containers with multi-region support
+
+## Quick Start
+
+### AI Provider Selection
+```bash
+# Use the AI provider selector
+python scripts/provider-selector.py '{
+ "requirements": ["scalable", "real-time", "enterprise"],
+ "tech_stack": "Next.js",
+ "team_size": 5,
+ "budget": "$500/month"
+}'
+```
+
+### Template Configuration
+```bash
+# Copy the stack template
+cp templates/stack-config.yaml my-project-config.yaml
+
+# Edit with your provider choices and configuration
+vim my-project-config.yaml
+```
+
+### Basic Usage with Claude Code
+```markdown
+Use the skill: Skill("moai-platform-baas")
+
+Example prompts:
+- "Set up Clerk authentication with Next.js"
+- "Migrate from Auth0 to Clerk with user data preservation"
+- "Configure Supabase with Row-Level Security for multi-tenant app"
+- "Optimize BaaS costs for my current setup"
+- "Create Vercel + Clerk + Supabase integration for real-time app"
+```
+
+## File Structure
+
+```
+moai-platform-baas/
+ SKILL.md # Main skill documentation (275 lines)
+ README.md # This file - project overview
+ reference.md # Comprehensive provider documentation (500+ lines)
+ examples.md # Production-ready implementation examples (1000+ lines)
+ scripts/
+ provider-selector.py # AI-powered provider selection tool
+ templates/
+ stack-config.yaml # Stack configuration template
+```
+
+## Key Features
+
+### AI Provider Selection
+- Automated provider recommendations based on project requirements
+- Weighted scoring across 9 providers
+- Cost optimization analysis
+- Performance considerations
+
+### Cross-Provider Integration
+- Seamless integration patterns between providers
+- Environment variable management
+- Webhook configuration
+- Real-time data synchronization
+
+### Migration Support
+- Step-by-step migration guides
+- Data transformation scripts
+- User migration between auth providers
+- Database migration with schema preservation
+
+### Production Patterns
+- Enterprise security configurations
+- Multi-region deployment strategies
+- Cost optimization engine
+- Compliance frameworks (GDPR, HIPAA)
+
+### Context7 Integration
+- Latest API documentation for all providers
+- Real-time updates on provider features
+- Best practices and optimization patterns
+
+## Provider Selection Matrix
+
+| Use Case | Authentication | Database | Deployment | Cost Range |
+|----------|----------------|----------|------------|------------|
+| Enterprise SaaS | Auth0 | Supabase | Vercel | $800-1200/mo |
+| Modern Web App | Clerk | Neon | Vercel | $200-400/mo |
+| Real-time Platform | Clerk | Convex | Vercel | $300-600/mo |
+| Mobile App | Firebase Auth | Firestore | Vercel | $150-350/mo |
+| Cost-Optimized | Clerk | Neon | Railway | $100-250/mo |
+
+## Advanced Features
+
+### Migration Engine
+```python
+# Example: Auth0 to Clerk migration
+from moai_baas_unified import AuthMigration
+
+migration = AuthMigration()
+result = await migration.migrate_from_auth0_to_clerk({
+ "auth0_config": {...},
+ "clerk_config": {...}
+})
+```
+
+### Cost Optimization
+```python
+# Example: Cost analysis and optimization
+from moai_baas_unified import BaaSCostOptimizer
+
+optimizer = BaaSCostOptimizer()
+analysis = await optimizer.analyze_costs(provider_configs)
+print(f"Potential savings: ${analysis.potential_savings}/month")
+```
+
+### Security Compliance
+```python
+# Example: Configure enterprise security
+from moai_baas_unified import BaaSSecurityFramework
+
+security = BaaSSecurityFramework()
+config = security.configure_enterprise_security(["GDPR", "HIPAA"])
+```
+
+## Integration Examples
+
+See [examples.md](examples.md) for complete production-ready examples:
+
+1. Enterprise SaaS: Auth0 + Supabase + Vercel
+2. Modern Web App: Clerk + Neon + Vercel 
+3. Real-time Platform: Clerk + Convex + Vercel
+
+## Reference Documentation
+
+See [reference.md](reference.md) for:
+- Complete provider API documentation
+- Context7 integration mappings
+- Migration scripts and templates
+- Cost analysis tables
+- Security compliance matrices
+
+## Works Well With
+
+- `moai-context7-integration` - Latest provider documentation
+- `moai-domain-frontend` - Frontend integration patterns
+- `moai-domain-backend` - Backend architecture patterns
+- `moai-security-api` - Security best practices
+- `moai-foundation-trust` - Quality validation
+
+## Contributing
+
+This skill follows MoAI-ADK standards:
+- Progressive disclosure architecture
+- 500-line limit for main SKILL.md
+- Comprehensive examples and reference documentation
+- Context7 integration for latest patterns
+
+## License
+
+Part of MoAI-ADK project. See main project license for details.
+
+---
+
+Status: Production Ready (Enterprise) 
+Last Updated: 2025-11-25 
+Providers Covered: 9 major BaaS services 
+Generated with: MoAI-ADK Skill Factory v2.0