allbeingsfuture/skills@frontend-design

What problem does it solve?

This Skill helps teams and creators turn brief frontend requirements into distinctive, production-ready interfaces that avoid generic AI aesthetics and cliché design choices. It reduces the iteration time between concept and working UI by providing a clear aesthetic direction and implementable code.

Core Features & Use Cases

• Design-first implementation: Translates a chosen aesthetic direction into actionable UI decisions and code.
• Production-quality output: Produces working HTML/CSS/JS or framework-specific components (React/Vue) with attention to typography, spacing, accessibility, and animation.
• Aesthetic tooling guidance: Recommends fonts, color systems with CSS variables, motion strategies, and layout compositions to create memorable interfaces.
• Use Cases: Building landing pages, dashboards, React components, HTML/CSS layouts, posters, or restyling an existing UI for brand distinctiveness.

Quick Start

Design a responsive, production-ready landing page focused on bold typography, a cohesive color system using CSS variables, and a memorable hero animation, then deliver working HTML/CSS and React component files.