skills.rest
g00hyun
g00hyunCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS or modern frameworks.

Updated Aug 23, 2026
Search Tags:#design#ui#frontend#javascript#css#components#aesthetic
One-click install
npx skills add https://github.com/g00hyun/okky-vibe-aaa --skill frontend-design-g00hyun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/g00hyun/okky-vibe-aaa/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/g00hyun/okky-vibe-aaa --skill frontend-design-g00hyun

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive frontend design and implementation that avoid generic AI aesthetics, delivering production-grade interfaces with intentional aesthetics and robust code.

Core Features & Use Cases

  • Frontend aesthetics and typography choices, cohesive color systems, motion/interaction details, and spatial composition aligned with a brand identity.
  • Practical implementation guidance for HTML/CSS/JS or modern frameworks (React, Vue, Svelte) with accessibility and performance in mind.
  • Use Case: Build a signature UI for a product dashboard or marketing site with responsive behavior and accessible components.

Quick Start

Provide a complete frontend design spec and implement production-ready UI code that matches the chosen aesthetic direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a production-grade frontend interface that avoids generic AI aesthetics?▼

You can implement distinctive frontend UI using HTML/CSS/JS or modern frameworks like React, Vue, or Svelte, with guidance on cohesive code structure, accessibility, and responsive behavior.

How do I design a cohesive color system and typography for a product dashboard?▼

Yes, it provides practical implementation guidance for modern frameworks including React, Vue, and Svelte, ensuring accessible components and performance-minded frontend code structure.

Can I use this to implement responsive behavior and accessible components in modern frameworks?▼

You can implement responsive behavior and accessible components in modern frameworks like React, Vue, and Svelte using provided production-ready UI code and practical implementation guidance.

What is the best way to align frontend UI motion and interaction details with brand identity?▼

The best way to align frontend UI motion and interaction details with brand identity is to apply intentional aesthetic choices that deliver cohesive, production-grade interface design.

Do I need specific dependencies to generate production-ready UI code for a marketing site?▼

No specific dependencies are required to generate production-ready UI code for a marketing site; you can use standard HTML/CSS/JS or modern frameworks to build signature interfaces.

Related Skills

Explore More Design & Creative Skills→
HouseGarofaloHouseGarofalo
3

vite

Build frontend applications with Vite for React, Vue, and Svelte.

Official
Intermediate
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
CutTheChexxCutTheChexx

brand-builder

Create cohesive brand identities and scalable design systems for web applications.

Community
Advanced
maplin-comaplin-co

mockup-to-code

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

Official
Advanced