skills.rest
gjkeller
gjkellerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-ux

Design and implement user interfaces with HTML, CSS, and JavaScript.

2|Updated Jan 20, 2026
Search Tags:#design#ui#frontend#aesthetic#ux#visual
One-click install
npx skills add https://github.com/gjkeller/doctor-ralph --skill frontend-ui-ux-gjkeller
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/gjkeller/doctor-ralph/tree/main/inspiration/code-yeongyu-oh-my-opencode/src/features/builtin-skills/frontend-ui-ux
Command: npx skills add https://github.com/gjkeller/doctor-ralph --skill frontend-ui-ux-gjkeller

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating visually appealing and engaging user interfaces when traditional design mockups are unavailable, leveraging a designer's intuition and coding skills.

Core Features & Use Cases

  • Aesthetic Direction: Defines and executes a distinct visual style (e.g., brutalist, minimalist, maximalist).
  • Pixel-Perfect Implementation: Translates aesthetic vision into production-grade code (HTML/CSS/JS, React, Vue, Angular).
  • Use Case: A developer needs to build a new feature's front-end but has no design assets. This Skill can generate a unique, cohesive, and visually striking interface based on a chosen aesthetic direction and the problem's context.

Quick Start

Use the frontend-ui-ux skill to design and implement a new landing page with a brutalist aesthetic.

Frequently Asked Questions about frontend-ui-ux

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

FAQPage Schema
How do I build a visually appealing front-end interface without design mockups?▼

Build visually appealing front-end interfaces without mockups by defining an aesthetic direction like brutalist or minimalist, then translating that vision into production-grade HTML, CSS, and JS code.

Can I generate UI code for React or Vue using a specific visual style?▼

Generate UI code for React, Vue, or Angular by defining a distinct visual style like maximalist or minimalist, producing cohesive interfaces with tailored typography, color, and motion.

What is the best way to implement cohesive typography and color in a new user interface?▼

Implement cohesive typography and color in a new user interface by establishing a distinct aesthetic direction first, ensuring spatial composition and visual elements align across the entire front-end.

Does this approach work for creating a landing page with a brutalist aesthetic?▼

This approach works for creating landing pages with a brutalist aesthetic by applying your chosen visual direction to generate emotionally engaging, pixel-perfect front-end code without needing explicit design assets.

How do you translate aesthetic direction into production-grade front-end code?▼

Translate aesthetic direction into production-grade front-end code by focusing on typography, color, motion, and spatial composition to create memorable interfaces using frameworks like React, Vue, or Angular.

When do I need to use an aesthetic-driven approach for user experience design?▼

Use an aesthetic-driven approach for user experience design when traditional mockups are unavailable, relying on visual direction and coding skills to craft emotionally engaging and cohesive interfaces.

Related Skills

Explore More Design & Creative Skills→
JiaxuanZou0714JiaxuanZou0714
5

teach-impeccable

Gather design context and persist it into a CLAUDE.md file.

Community
Basic
maplin-comaplin-co

mockup-to-code

Convert UI mockups and design files into React, Vue, or HTML/CSS code.

Official
Advanced
decentpastedecentpaste
232

frontend-design

Generate HTML/CSS/JS code and design blueprints for custom frontend interfaces.

Official
Advanced
tyronerosstyroneross
1

mockup-gallery-bridge

Synchronize design mockup metadata with implementation build targets.

Community
Advanced