frontend-design

Generate production-grade frontend interfaces with HTML/CSS/JS and frameworks.

6|1|Updated Mar 25, 2019

Search Tags:#accessibility #react #css #UI #aesthetic #design-system #frontend-design

Ready to run

npx skills add https://github.com/Stephanvs/dotfiles --skill frontend-design-stephanvs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Stephanvs/dotfiles/tree/main/opencode/skills/frontend-design
Command: npx skills add https://github.com/Stephanvs/dotfiles --skill frontend-design-stephanvs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides the design and implementation of production-grade frontend interfaces with a bold, distinctive aesthetic, ensuring non-generic, highly-polished user experiences.

Core Features & Use Cases

Design Thinking & Aesthetic Direction: define purpose, tone, constraints, and differentiation.
Production-Ready Code: generate real HTML/CSS/JS or framework components (React/Vue) with robust structure.
Polish & Accessibility: typography, color, motion, and accessibility considerations.
Use Case: create a unique admin dashboard with a bold visual identity while maintaining usability.

Quick Start

Provide requirements for a frontend component, page, or app (purpose, audience, constraints). Then generate a complete, production-grade frontend scaffold that follows the chosen aesthetic.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a production-grade frontend that doesn't look generic?▼

Production-grade frontend design requires defining your aesthetic direction, constraints, and audience first, then building with intentional typography, color systems via CSS variables, and deliberate motion. This Skill guides you through establishing a bold visual identity while maintaining accessibility and responsive layouts across HTML/CSS/JS or frameworks like React and Vue.

Can I build accessible, responsive React components with a cohesive design system?▼

Yes. This Skill generates production-ready React components with accessible semantics, responsive layouts, and unified theming through CSS variables. It ensures your components follow a deliberate aesthetic while meeting functional requirements for working code and framework-agnostic integration.

What's the best way to add distinctive micro-interactions and motion to web interfaces?▼

Distinctive micro-interactions require understanding your interface's purpose and tone, then implementing deliberate motion through CSS and JavaScript that reinforces your bold aesthetic. This Skill helps you integrate motion and micro-interactions cohesively across components without sacrificing performance or accessibility.

How do I avoid generic AI aesthetics when building admin dashboards or web applications?▼

Avoid generic aesthetics by defining clear design purpose, audience, and visual constraints upfront, then building with intentional typography choices, custom color palettes, and deliberate UI patterns. This Skill provides a scaffold for creating distinctive admin dashboards and applications that maintain usability while expressing bold visual direction.

Does this approach work with Vue and other frontend frameworks?▼

Yes. This Skill is framework-agnostic and generates production-ready code for React, Vue, and vanilla HTML/CSS/JS. The design principles—responsive layouts, accessible semantics, CSS variables for theming, and deliberate motion—integrate across all these frameworks.

What do I need to know before starting a production frontend design?▼

Start by defining your component or application's purpose, target audience, technical constraints, and desired visual tone. This Skill requires clear requirements but no prerequisites; it generates the complete scaffold including HTML/CSS structure, accessibility markup, and responsive patterns ready for implementation.