frontend-design-fix-react

This skill automatically enhances generic Vue component designs by applying systematic improvements across typography, color, motion, spatial composition, and backgrounds. It analyzes existing Vue files to identify bland patterns and transforms them into distinctive interfaces using Anthropic's design framework. Use it when you need to quickly upgrade the visual aesthetics of your Vue components beyond basic styling.

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.