frontend-design

Generate production-grade frontend interfaces with specified aesthetic direction.

134|8|Updated Mar 13, 2018

Search Tags:#design #frontend #react #components #UI #aesthetics #web

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides the creation of distinctive, production-grade frontend interfaces with high design quality. It helps turn vague requests into polished, ready-to-ship UI code, avoiding generic AI aesthetics.

Core Features & Use Cases

Production-grade UI code: Generate robust, accessible, and responsive components, pages, or entire applications.
Distinctive aesthetics: Apply bold, intentional visual direction aligned with the chosen design language.
Framework-agnostic implementation: Produce HTML/CSS/JS, with support for React, Vue, or vanilla setups.
Use Case: You need a hero section and navigation with a unique brutalist look for a marketing site.

Quick Start

Provide frontend requirements and an aesthetic direction. Example: "Create a responsive React page with a brutalist aesthetic, including header, hero, and CTA."

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 React component with a distinctive design?▼

Create production-grade React components by defining your aesthetic direction first—brutalist, minimal, bold—then build accessible, responsive UI with intentional visual choices. Provide context about purpose and audience to guide component structure and styling.

Can I use this for frontend design across different frameworks like Vue or vanilla JavaScript?▼

Yes, frontend design works framework-agnostic. Generate HTML, CSS, and JavaScript for vanilla setups, or apply the same design principles to React, Vue, or other frameworks while maintaining production-grade code quality and accessibility standards.

What makes a frontend interface avoid looking generic or bland?▼

Avoid generic UI by applying a chosen aesthetic direction with intentional visual decisions—color, typography, spacing, and interaction patterns that reflect your brand or design language. Production-grade frontends combine distinctive aesthetics with accessibility and responsive design.

How do I build a responsive design that works across devices?▼

Build responsive frontends by defining breakpoints, flexible layouts, and mobile-first styling that adapts to different screen sizes. Specify your design constraints and audience when requesting components to ensure responsive behavior meets production standards.

Do I need design skills before creating components with this approach?▼

No prerequisite design skills required. Describe your aesthetic direction—brutalist, minimal, or other visual style—and provide context about purpose and audience. The process guides you toward production-grade UI code with intentional design choices.

What accessibility and performance standards should production frontends meet?▼

Production frontends must satisfy WCAG accessibility guidelines, responsive design across devices, performant code that loads efficiently, and semantic HTML structure. These standards ensure your distinctive UI is usable, fast, and maintains quality across contexts.