frontend-design_skill

Overview

This skill builds distinctive, production-grade frontend interfaces with a clear aesthetic point-of-view and working code (HTML/CSS/React). It focuses on interactive web UI—components, dashboards, landing pages, and visual posters—delivering visually striking, usable results rather than generic, templated outputs. Use it when you need an interface that is memorable, cohesive, and ready to integrate into a real project.

How this skill works

You provide the scope: component, page, or app, plus purpose, audience, technical constraints, and preferred frameworks (plain HTML/CSS/JS, React, or Vue). I pick a bold aesthetic direction, define typography, color, motion, and spatial composition, then generate production-ready code and implementation notes. The output includes structured markup, responsive styles, and interactive behavior with attention to accessibility and implementation details.

When to use it

• Designing interactive websites, landing pages, or marketing microsites
• Building production-ready React components and UI libraries
• Creating dashboards and data-driven interfaces with refined visuals
• Developing visually impactful posters or hero pages for campaigns
• Prototyping interactive UI interactions, micro-animations, and transitions

Best practices

• Provide clear purpose, audience, and constraints so the aesthetic and technical choices align
• Specify framework and build targets (React version, bundler, CSS approach) to optimize code output
• Accept a single, decisive aesthetic direction rather than mixed styles
• Ask for accessibility considerations (contrast, keyboard focus, semantic markup) early
• Request iterative refinements: visual polish, motion tuning, and responsiveness adjustments

Example use cases

• A bold product landing page with dramatic typography, layered backgrounds, and staggered entrance animations
• A compact React data card set with asymmetric layout, bespoke typography, and accessible interactions
• An interactive dashboard with clear visual hierarchy, custom charts, and subtle motion to guide attention
• A promotional poster-style hero section that blends geometric textures, grain, and a memorable color accent
• A reusable component library (buttons, cards, navigation) themed for a specific brand personality