A Yew/Rust/WASM proof-of-concept demonstrating HTML5 semantic layouts with dynamic CSS theme switching.
- HTML5 semantic layout elements (header, nav, main, section, article, aside, footer)
- Dynamic CSS theme switching via dropdown selector
- Nine distinct themes ranging from minimal to 3D perspective
- Pure Rust/WASM implementation with minimal JavaScript
- Claude Code skills for AI-assisted theme development
Clean, minimal light theme with system fonts and subtle styling.
Clean, minimal dark theme with comfortable contrast.
Modern light theme with indigo accents, soft shadows, and smooth animations.
Modern dark theme with deep purple palette and glow effects.
Radical light theme with animated gradients, rotated text, and bounce effects.
Neon cyberpunk theme with glowing effects, scanlines, and glitch animations.
Retro CRT terminal theme with green phosphor glow, scanlines, and monospace typography.
Immersive light theme with CSS perspective, depth layers, and spatial animations.
Deep ethereal dark theme with glowing depth effects and 3D transforms.
- Rust (latest stable)
- Trunk (
cargo install trunk)
# Development server with hot reload
trunk serve
# Production build
trunk build --releaseOpen http://localhost:8080 and use the theme dropdown to switch between themes.
styles-poc/
+-- Cargo.toml # Rust dependencies
+-- build.rs # Build info injection
+-- index.html # Trunk entry point
+-- favicon.ico # Site favicon
+-- src/
| +-- main.rs # App entry point and theme logic
| +-- lorem.rs # Lorem ipsum content
| +-- components/
| +-- mod.rs # Component exports
| +-- header.rs # Header with theme selector
| +-- main_content.rs # Main content sections
| +-- sidebars.rs # Nav and Aside components
| +-- footer.rs # Footer with build info
+-- styles/
| +-- simple-light.css # Minimal light theme
| +-- simple-dark.css # Minimal dark theme
| +-- improved-light.css # Modern light theme
| +-- improved-dark.css # Modern dark theme
| +-- wild-light.css # Experimental light theme
| +-- wild-dark.css # Experimental dark theme
| +-- terminal-dark.css # Retro terminal theme
| +-- 3d-light.css # 3D perspective light theme
| +-- 3d-dark.css # 3D perspective dark theme
+-- images/
| +-- screenshot{1-9}.png # Theme screenshots
+-- documentation/
| +-- prd.md # Product requirements
| +-- architecture.md # System architecture
| +-- design.md # UI/UX design
| +-- plan.md # Implementation plan
| +-- status.md # Project status
| +-- process.md # Development process
+-- docs/ # GitHub Pages build output
+-- .claude/
+-- skills/ # Claude Code skills
This project includes four Claude Code skills for AI-assisted CSS theme development. These skills provide context and patterns that help Claude Code create consistent, high-quality themes.
Location: .claude/skills/ui-styling/
Purpose: Creates modern, polished CSS themes with professional styling.
Files:
The main skill definition file containing:
- Skill metadata (name, description)
- Project context for the Yew/WASM app
- CSS custom properties convention
- Step-by-step theming instructions
- Theme style ideas (modern, bold, minimal, retro, corporate)
- File naming conventions
- Code examples for common patterns
A comprehensive CSS patterns reference including:
Color Palettes:
- Soft Neutrals (indigo primary)
- Ocean Blues
- Forest Greens
- Warm Sunset
- Deep Purple (dark)
- Midnight (dark)
Typography Stacks:
- Modern Sans-Serif (Inter)
- Elegant Serif (Merriweather)
- Technical/Code (JetBrains Mono)
- Friendly Rounded (Nunito)
Effects:
- Shadow systems (subtle, colored, inset)
- Animation patterns (fade, slide, pulse)
- Border styles (subtle, gradient, accent)
- Interactive states (hover, focus, active)
- Glassmorphism and Neumorphism
- Gradient text effects
Accessibility:
- Reduced motion media queries
- High contrast support
- System theme detection
Location: .claude/skills/wild-ui-styling/
Purpose: Creates radical, experimental CSS themes with bold animations and unconventional styling.
Files:
The skill definition for experimental themes:
- Guidelines for bold, attention-grabbing design
- Animation-first approach
- Transform and rotation techniques
- Performance considerations for animations
A reference for wild CSS effects including:
Gradient Backgrounds:
- Animated shifting gradients
- Mesh gradients with multiple radial stops
- Diagonal stripe patterns
- Conic gradient bursts
Text Rotations:
- Tilted headings (-3deg to -5deg)
- Dramatic tilt with layered shadows
- Perspective transforms
- Hover rotation effects
Animations:
- Fade-in variations (up, scale, staggered)
- Slide-in from all directions
- Bounce effects with cubic-bezier
- Floating/hovering elements
- Pulse and glow effects
- Rainbow border cycling
- Spin animations
Neon Effects:
- Cyberpunk color palettes
- Vaporwave pastels
- Sunset fire gradients
- Electric ocean blues
- Neon glow shadows
- Glitch/flicker effects
Wild Hover States:
- Shake on hover
- Glitch distortion
- Neon flicker
Location: .claude/skills/retro-ui-styling/
Purpose: Creates vintage/nostalgic CSS themes inspired by different computing eras.
Files:
The skill definition for retro themes:
- Guidelines for era-specific design (Terminal, DOS, Windows 95, Early Mac)
- CRT effects and scanlines
- Authentic color palettes (phosphor green, amber, DOS blue)
- Monospace typography patterns
A reference for retro CSS effects including:
Terminal Color Palettes:
- Classic Green Phosphor (P1)
- Amber Phosphor (P3)
- White Phosphor (P4)
DOS/Windows Palettes:
- Classic DOS Blue
- DOS BIOS style
- Windows 95 system colors
CRT Effects:
- Scanline overlays
- Phosphor glow and text bloom
- CRT flicker animations
- Screen curvature effects
3D Effects (Windows 95):
- Beveled buttons (outset/inset)
- Title bar gradients
- System gray panels
Retro Typography:
- Terminal monospace fonts
- DOS/BIOS style fonts
- Windows 95 Tahoma
- Early Mac Chicago/Geneva
Location: .claude/skills/3d-ui-styling/
Purpose: Creates immersive CSS themes with 3D perspective effects, vanishing points, depth-based sizing, and interactive carousel-like transitions without WebGL or Three.js.
Files:
The skill definition for 3D perspective themes:
- CSS perspective and transform-style guidelines
- Vanishing point positioning techniques
- Depth layer management with translateZ
- Font sizing for depth perception
- Carousel and interactive 3D effects
- SVG integration for 3D objects
- Performance considerations for 3D transforms
A reference for CSS 3D effects including:
Perspective Setup:
- Basic perspective containers
- Off-center vanishing points
- Two-point perspective simulation
- Transform-style preserve-3d
Depth Layers:
- translateZ positioning
- Scale compensation for distance
- Atmospheric perspective (opacity/blur)
- Depth-based shadows
Font Depth Effects:
- Size-based depth scaling
- Dynamic font sizing with CSS variables
- Opacity gradients for receding text
3D Carousel:
- Circular item distribution with rotateY
- Vertical carousel with rotateX
- Size/opacity changes based on position
- Pause-on-hover interactions
Mouse-Driven Effects:
- Tilt cards on mouse move
- Parallax depth layers
- Scroll-based parallax
- Mouse position tracking
SVG 3D Integration:
- Perspective grid (converging lines)
- Isometric cubes and shapes
- 3D extruded text shadows
- Animated isometric grids
Card Effects:
- 3D flip on hover
- Spring effect transitions
- Depth-based layered shadows
3D Color Palettes:
- Cool Depth (blues)
- Warm Depth (oranges)
- Ethereal (purples)
- Matrix (greens)
Accessibility:
- Reduced motion support
- High contrast mode adjustments
When working with Claude Code in this project:
-
For modern themes: Ask Claude to "create a new theme" or "improve the styling" - it will automatically use the ui-styling skill patterns.
-
For experimental themes: Ask for "wild", "radical", "cyberpunk", or "animated" themes - Claude will use the wild-ui-styling skill.
-
For retro themes: Ask for "terminal", "retro", "DOS", "Windows 95", or "vintage" themes - Claude will use the retro-ui-styling skill.
-
For 3D themes: Ask for "3D", "perspective", "depth", "carousel", or "spatial" themes - Claude will use the 3d-ui-styling skill.
-
Adding new themes:
- Create CSS file in
styles/directory - Add option to dropdown in
src/components/header.rs - Follow the CSS custom properties convention from the skills
- Create CSS file in
- Yew 0.21 - Rust framework for WebAssembly
- wasm-bindgen - Rust/JavaScript interop
- web-sys - Web API bindings
- Trunk - WASM build tool
- CSS Custom Properties - Theming system
Copyright (c) 2025 Michael A Wright
MIT License - see LICENSE for details.