frontend-design-fix-html

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 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 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.