Master responsive layout design using modern CSS (Flexbox, Grid), mobile-first approach, and breakpoint strategies. Create layouts that adapt beautifully across all devices while maintaining accessibility and performance. Includes container queries, aspect ratios, and advanced responsive patterns.
Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
Framework-agnostic guide for implementing stable, semantic selectors in any web application. Solves the dynamic class name problem caused by CSS-in-JS, CSS Modules, and build tools. Includes patterns for React, Angular, Vue, Svelte, Next.js, Astro, and more. Future-proofed for Computer User Agents (CUA) and AI-powered automation tools. Provides TypeScript patterns, naming taxonomies, and enterprise-scale conventions.
Teach and apply Effect-TS practices (effect, @effect/schema, @effect/platform) for architecture, typed errors, Layers, dependency injection, resource safety, testing, and migration from async/await/Promise. Use when a user asks how to use Effect, requests best practices, wants to refactor to Effect, or needs mapping from platform modules to Node/Bun/Browser APIs.
Practical guidelines for implementing React 19 components with TypeScript
Provides custom React hooks patterns and best practices specific to Bellog. Triggers when creating custom hooks or implementing interactive features.
Configure routing with lazy loading, implement route guards, set up preloading strategies, optimize change detection, analyze bundles, and implement performance optimizations.
Apply consistent theming with Tailwind CSS 4, including dark mode support and design tokens. Use when styling components, fixing dark mode issues, or adjusting visual design.
Build and refactor UI in this repo using Chakra UI v2 + Emotion and the repo theme (`app/theme.ts`). Use for Chakra component usage, responsive layout, a11y, theme tokens/semanticTokens, component variants, and UI polish.
Generate Leaf templates (Views) for FOSMVVM WebApps. Use when creating HTML views that render ViewModels - both full-page templates and fragments for HTML-over-the-wire updates.
UI component library reference for Composable Svelte. Use when implementing designs, choosing components, styling layouts, or working with shadcn-svelte components. Covers component props, variants, accessibility patterns, visual composition, and when to use which component. For specialized components see composable-svelte-graphics (3D), composable-svelte-code (editors/media), composable-svelte-charts (visualization), composable-svelte-maps (geospatial).
Complete design system reference for full-stack applications. Covers colors, typography, spacing, component patterns (shadcn/ui), effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
Enforces functional TypeScript patterns with Effect ecosystem. Use when (1) writing TypeScript functions or modules, (2) defining types or schemas, (3) handling errors or async operations, (4) structuring files with section separators, or (5) creating factories, dispatch tables, or Effect pipelines.
[Design System] Validate UI component usage against design system specifications. Use when (1) checking component variants/sizes are valid, (2) verifying required props are present, (3) detecting deprecated component usage, (4) finding disallowed prop combinations, (5) user asks to 'check component usage', 'validate variants', 'audit design system compliance', or 'find component inconsistencies'.
Enforces project caching conventions when implementing cache layers using React cache(), Next.js unstable_cache, Upstash Redis, and Cloudinary. This skill ensures consistent patterns for cache keys, tags, TTL configuration, cache invalidation, and domain-specific CacheService helpers.
Zustand patterns for predictable client-side state management
Reusable component patterns for Maud including the Render trait, function components, parameterized components, layout composition, partials, and component organization. Use when building reusable UI elements, creating component libraries, structuring templates, or implementing design systems with type-safe components.
Comprehensive testing guidelines for React 19 applications with TypeScript
Generate FOSMVVM Form Specifications (Fields protocols) with validation and localization. Use when defining user input contracts for forms, request bodies, or any ValidatableModel.
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
Use when implementing state management with PlatformVmStore for complex components requiring reactive state, effects, and selectors.
[Extends frontend-developer] Angular 21 specialist. Use for Angular-specific features: Signals, zoneless change detection, NgRx SignalStore, standalone components, Signal Forms, Angular Aria. Invoke alongside frontend-developer for Angular projects.
