frontend-design-fix-vue

This Claude Skill automatically improves generic React component designs by applying aesthetic upgrades across typography, color, motion, spatial composition, and backgrounds. It analyzes existing components to identify bland patterns, then systematically enhances them using Anthropic's design framework. Use this skill when you need to quickly transform basic React UIs into visually distinctive interfaces without manual design work.

This skill transforms generic HTML/CSS designs by applying aesthetic upgrades across typography, color, motion, spatial composition, and backgrounds. It analyzes existing code to identify bland patterns and systematically enhances them using Anthropic's design framework. Use it when you need to quickly elevate basic frontend designs into more visually distinctive interfaces.

This skill automatically upgrades generic Svelte component designs by applying aesthetic improvements across five key dimensions: typography, color, motion, spatial composition, and backgrounds. It analyzes existing components, identifies design anti-patterns, and systematically transforms them into more visually distinctive interfaces. Use this when you need to quickly enhance the visual appeal of bland Svelte components within your project.

This skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.