skills.rest
patrickhaahr
patrickhaahrCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Build production-grade frontend interfaces with HTML/CSS/JS, React, Vue, or SolidJS.

Updated Jun 15, 2025
Search Tags:#design#React#frontend#components#UI#aesthetics#HTML-CSS
One-click install
npx skills add https://github.com/patrickhaahr/dotfiles --skill frontend-design-patrickhaahr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/patrickhaahr/dotfiles/tree/main/opencode/.config/opencode/skills/frontend-design
Command: npx skills add https://github.com/patrickhaahr/dotfiles --skill frontend-design-patrickhaahr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides the creation of distinctive, production-grade frontend interfaces with a clear aesthetic direction, enabling teams to transform requirements into polished UI and code rather than generic templates.

Core Features & Use Cases

  • Frontend Direction: Establish a bold aesthetic direction and translate it into working code across HTML/CSS/JS, React, Vue, or SolidJS.
  • Implementation Quality: Deliver production-grade, visually striking interfaces with careful typography, color, motion, and accessibility considerations.
  • Use Case: When tasked with building a component, page, dashboard, or application, this skill ensures a cohesive, high-quality frontend experience.

Quick Start

Design a production-grade frontend component that follows a bold, distinctive aesthetic direction and aligns with the user's requirements.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create production-grade frontend components with a bold aesthetic?▼

To build production-grade React UI components with a bold aesthetic, you must enforce explicit design thinking across typography, color, motion, and accessibility constraints, translating requirements into polished code.

What is the best way to establish a distinctive frontend design direction for a web application?▼

A distinctive frontend design direction requires defining a bold aesthetic that guides building web pages and dashboards, ensuring a cohesive and visually striking experience across the application.

Can I use this approach to build frontend interfaces with Vue or SolidJS?▼

Yes, you can build frontend interfaces using Vue or SolidJS. This approach supports translating a bold aesthetic direction into working code across HTML/CSS/JS, React, Vue, and SolidJS frameworks.

Does building production-ready frontend UI require explicit accessibility constraints?▼

Yes, building production-ready frontend UI requires explicit accessibility constraints. Delivering polished, production-grade interfaces demands careful consideration of typography, color, motion, and accessibility.

Why do my generic frontend templates lack a distinctive aesthetic?▼

Generic frontend templates lack a distinctive aesthetic because they miss an explicit, bold design direction. Transforming requirements into polished UI requires enforcing specific typography, color, and motion decisions rather than defaults.

Related Skills

Explore More Design & Creative Skills→
chflechfle
3

sw-boilerplate-ui

Scaffold UI foundation files from requirements/tech-stack.yaml for detected frontend stacks.

Community
Intermediate
Phife726Phife726

frontend-design

Design and implement production-grade frontend interfaces with accessible, responsive HTML/CSS/JS or framework-based code.

Community
Advanced
HCMUTE-RTICHCMUTE-RTIC

full-stack-orchestration-full-stack-feature

Orchestrate full-stack feature development across backend, frontend, and infrastructure layers.

Official
Advanced
BluebagAIBluebagAI
28

frontend-design

Generate reusable HTML/CSS/JS assets for distinctive frontend interfaces.

Official
Advanced