Modern Frontend Design

This is a comprehensive frontend design system for building 2026-era interfaces that look like well-funded startups, not generic templates. It enforces a 12-step design process starting with OKLCH color tokens, covers modern patterns like liquid glass surfaces and native CSS scroll-driven animations, and includes a niche-specific design table mapping product types to visual directions. The skill references current high-end designs from Linear, Vercel, and Perplexity, and prioritizes new CSS features like View Transitions and anchor positioning over JavaScript libraries. Use it when you want to skip the generic Bootstrap aesthetic and ship something that actually looks premium. It's opinionated about what modern means, which is exactly what you want from a design system.

Install to Claude Code

npx -y skills add deveshpunjabi/modern-frontend-skill --skill modern-frontend-design --agent claude-code