🚀 Widgli Skeleton Kit

Overview

The latest release is a massive evolution of the Widgli Skeleton ecosystem, transforming it into a comprehensive, enterprise-grade monorepo that serves as the foundation for modern business management applications. This release introduces cutting-edge technologies, advanced architectural patterns, and a complete design system that rivals industry leaders.

🎯 What's New

🏗️ Revolutionary Monorepo Architecture

Turborepo v2 + pnpm Workspace

• Lightning-fast builds with intelligent caching
• Optimized package management with pnpm
• Advanced task orchestration and dependency management
• Zero-config workspace setup with TypeScript strict mode

Modern Package Structure

widgli/
├── apps/                    # Applications
│   ├── widgli/             # Main Payload CMS application
│   ├── design-system/      # Component documentation & showcase
│   ├── storybook/          # Component development environment
│   └── package-testing/    # Multi-framework testing (Astro)
├── packages/               # Shared packages
│   ├── cms/               # Payload CMS configuration
│   ├── design-system/     # Core component library
│   ├── themes/            # Design tokens & CSS utilities
│   ├── ui/                # Marketing & SaaS components
│   └── types/             # Shared TypeScript definitions
└── tooling/               # Development tools & configs

🎨 Next-Generation Design System

Tailwind CSS v4 Architecture

• CSS-in-JS approach with design tokens
• Advanced CSS custom properties system
• Container queries and modern CSS features
• Zero-config setup with @theme directive

Component Variants with CVA

• Type-safe component variants using Class Variance Authority
• Consistent API patterns across all components
• Advanced theming and customization capabilities

Comprehensive UI Library

• Core UI: 50+ foundational components (Button, Input, Dialog, etc.)
• Marketing UI: 400+ marketing-specific components
• SaaS UI: Billing, authentication, and dashboard components
• Icons: 50+ optimized SVG icons with multiple styles

🗄️ Enterprise-Grade CMS

Payload CMS 3.55 Integration

• 100+ collections covering complete business workflows
• Advanced scheduling and calendar management
• Multi-tenant architecture with role-based permissions
• Real-time collaboration and live preview

Key Collections Include:

• User Management: Users, Teams, Profiles, Memberships
• Scheduling: Event Types, Bookings, Availability, Calendars
• Automation: Workflows, AI Phone, Tasks, Notifications
• Content: Pages, Posts, Docs, Case Studies, Partners
• Platform: Features, Billing, API Keys, Webhooks
• Security: OAuth, Audit Logs, Rate Limiting

🚀 Performance & Developer Experience

Next.js 15.5 with Turbopack

• Lightning-fast development with Turbopack
• Advanced webpack optimizations
• Intelligent package import optimization
• Persistent caching for faster rebuilds

TypeScript Strict Mode

• 100% type coverage across all packages
• Advanced type generation and distribution
• Zero any types in production code
• Comprehensive type safety

Modern Development Tools

• ESLint 9 with custom rules
• Prettier with import sorting
• Vitest for testing
• Playwright for E2E testing
• Changesets for version management

🎭 Multi-Framework Support

Framework Agnostic Design

• React 19.1.1 with concurrent features
• Next.js 15.5 for web applications
• Astro 5.13.5 for static sites
• Storybook 9.1.2 for component development

Universal Component System

• Headless components for maximum flexibility
• Framework-specific optimizations
• Consistent API across all frameworks

🔧 Technical Highlights

Advanced Build System

• Turborepo v2 with intelligent caching
• pnpm workspace with optimized dependencies
• Cross-package type generation
• Automated import map generation

Design Token System

@theme {
  --color-widgli-primary: hsl(var(--widgli-primary));
  --spacing-widgli-md: var(--widgli-spacing-md);
  --text-widgli-lg: var(--widgli-font-size-lg);
  --radius-widgli-md: var(--widgli-radius-md);
}

Component Architecture

const buttonVariants = cva('inline-flex items-center justify-center gap-2', {
  variants: {
    variant: {
      default: 'bg-widgli-primary text-widgli-primary-foreground',
      outline: 'border border-widgli-border bg-transparent',
    },
    size: {
      default: 'h-10 px-4 py-2',
      sm: 'h-9 rounded-widgli-sm px-3',
    },
  },
});

CMS Collection Example

export const Users: CollectionConfig = {
  slug: 'users',
  auth: true,
  fields: [
    {
      name: 'name',
      type: 'text',
      required: true,
    },
    {
      name: 'email',
      type: 'email',
      required: true,
      unique: true,
    },
    // ... 50+ more fields
  ],
};

📦 Package Ecosystem

@widgli/design-system (v0.2.0)

• Core component library with 50+ components
• CVA-based variant system
• TypeScript-first API
• Zero dependencies on external UI libraries

@widgli/themes (v0.2.0)

• Design token system with CSS custom properties
• Tailwind CSS v4 integration
• Advanced typography and spacing scales
• Dark mode support

@widgli/cms (v0.0.1)

• Complete Payload CMS configuration
• 100+ collections for business management
• Multi-tenant architecture
• Advanced permissions and security

@widgli/ui (Marketing & SaaS)

• 400+ marketing components
• Billing and subscription management
• Authentication flows
• Dashboard components

🚀 Getting Started

Installation

# Clone the repository
git clone https://github.com/widgli/skeleton-kit.git
cd skeleton-kit

# Install dependencies
pnpm install

# Start development
pnpm dev

Available Scripts

# Development
pnpm dev                    # Start all apps in development
pnpm widgli:dev            # Start main application only

# Building
pnpm build                 # Build all packages
pnpm build:widgli         # Build main application
pnpm build:design-system  # Build design system

# Quality Assurance
pnpm typecheck            # Type check all packages
pnpm lint                 # Lint all packages
pnpm test                 # Run all tests

🎯 Use Cases

Business Management Applications

• Complete scheduling and calendar management
• User and team management with advanced permissions
• Billing and subscription handling
• Content management and marketing automation

Design System Development

• Component library with comprehensive documentation
• Multi-framework support for maximum flexibility
• Advanced theming and customization
• Professional-grade design tokens

Enterprise Applications

• Multi-tenant architecture
• Advanced security and audit logging
• Scalable content management
• Real-time collaboration features

🔮 What's Next

This release establishes the foundation for:

• Advanced AI integration capabilities
• Enhanced real-time collaboration features
• Expanded multi-tenant support
• Advanced analytics and reporting
• Mobile application support

📊 Metrics

• 100+ CMS Collections
• 400+ UI Components
• 50+ Design System Components
• 4 Supported Frameworks
• 100% TypeScript Coverage
• 0 External UI Dependencies

🎉 Conclusion

The next branch represents a quantum leap in the Widgli ecosystem, providing developers with a comprehensive, enterprise-grade foundation for building modern business applications. With its advanced architecture, cutting-edge technologies, and comprehensive component system, this release positions Widgli as a leader in the business management software space.

Ready to build the future? The next branch is your gateway to creating powerful, scalable, and beautiful business applications with the Widgli ecosystem.

Built with ❤️ by the Widgli Team