This is a monorepo of six AI agent skills (SKILL.md format) for creative content generation, targeting Claude Code, Cursor, Codex CLI, and other compatible agents. Each skill is a self-contained package with agent instructions, reference libraries, scaffold scripts, and optional companion websites. The skills enable agents to: generate beautiful single-file HTML articles (beautiful-article), create and edit images via GPT-4o (gpt-image-2), retrieve knowledge from local files (kb-retriever), produce deterministic motion-graphics videos with audio (motion-showreel), design polished web pages with anti-AI-cliché rules (web-design-engineer), and build click-driven video presentations with TTS (web-video-presentation). The repository also includes release automation (zero-dependency Node scripts, GitHub Actions), a Claude Code plugin marketplace entry, and two showcase websites (Vite+React+TypeScript). While primarily an application toolkit, it contains structured prompt template libraries and design reference catalogs that resemble curated data assets. The codebase demonstrates high engineering craftsmanship with deterministic rendering pipelines, a session-based audio synthesizer, design token systems, and comprehensive test coverage for the motion-showreel pipeline.
This repository serves as a curated reference guide for web designers and developers seeking to add design flair, user delight, and whimsy to their products. Organized as an extensive markdown document, it provides links and explanations across numerous design categories including CSS frameworks, typography, color theory, layout techniques, icons, animations, and UX improvements. The Spark Joy philosophy emphasizes thoughtful, delightful details that enhance user experience beyond mere functionality. While primarily a collection of external resources, the repository contains original value in its organization, explanations, and reusable code patterns. Most notably, it presents several implementable techniques: a responsive CSS layout system for content breakout, an optimized web font loading strategy, and performance-focused meta tags with resource hints. These components demonstrate practical engineering solutions to common frontend challenges. The repository is actively maintained with recent updates ensuring recommendations remain current. It functions as a valuable reference tool rather than a traditional application, offering designers and developers a comprehensive starting point for exploring modern web design techniques and resources while emphasizing the importance of subtle, joy-inducing details in product design.
CSS Extras is a library of CSS custom functions that leverages the new CSS @function rule to provide advanced styling capabilities. It includes 43+ functions for mathematical operations, color manipulation, typography, layout, spacing, animation, grid systems, filtering, theming, and utility operations. The library uses modern CSS features like color-mix, OKLab/OKLCH color spaces, and CSS logical properties to create sophisticated, theme-aware, and responsive design helpers. It comes with comprehensive documentation, testing utilities, and practical examples.
Simple.css is a classless CSS framework that provides an instant, clean design for any HTML page. The entire repository consists of a single well-crafted CSS file (simple.css) that styles all standard HTML elements—headings, paragraphs, lists, tables, forms, navigation, blockquotes, code blocks—without requiring any CSS classes. It uses CSS custom properties for theming, supports both light and dark modes via the `prefers-color-scheme` media query, employs a responsive CSS Grid layout, and includes accessibility features like focus-visible outlines and proper contrast. The repo also includes a minified version, an older v1 for backward compatibility, and a comprehensive HTML test page to demonstrate all styled elements. It is a self-contained, drop-in solution for quickly improving the appearance of any website or prototype, with no external dependencies.
This repository contains a Tailwind CSS plugin that adds 3D transform capabilities. The plugin provides utility classes for 3D transformations (scale, rotate, translate on X, Y, Z axes) and 3D animations (bounce, spin, bounce-and-spin). It supports both modern CSS properties (rotate, scale, translate) and legacy transform syntax for backward compatibility. The architecture follows Tailwind's plugin pattern, with modular organization separating animations, utilities, and helper functions. The plugin integrates with Tailwind's configuration system to allow customization of values and works by registering utility classes and animations that generate appropriate CSS when processed by Tailwind.