skills.rest
bamecho
bamechoCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS and React or Vue.

1|Updated Nov 21, 2025
Search Tags:#design#accessibility#frontend#react#vue#component#aesthetics
One-click install
npx skills add https://github.com/bamecho/my-claude-skills --skill frontend-design-bamecho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/bamecho/my-claude-skills/tree/main/skill-en/frontend-design
Command: npx skills add https://github.com/bamecho/my-claude-skills --skill frontend-design-bamecho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides designers and developers to craft distinctive, production-grade frontend interfaces that avoid generic AI slop aesthetics and ensure real working code with meticulous attention to aesthetic detail.

Core Features & Use Cases

  • Produce production-grade HTML/CSS/JS code that is accessible, performant, and visually striking.
  • Implement component-based architectures (React, Vue, or vanilla) aligned with a bold aesthetic direction.
  • Establish design tokens, scalable typography, color systems, and responsive layouts for reusable UI across projects.
  • Use Case: create a featured landing page or a reusable UI component library with a unique visual language.

Quick Start

Provide a production-grade frontend component or page that matches the specified 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 production-grade frontend components that avoid generic AI aesthetics?▼

Build distinctive frontend interfaces by applying production-grade HTML/CSS/JS patterns, establishing bold aesthetic directions, and implementing polished interaction design with meticulous attention to visual detail.

Can I use this to generate a reusable React or Vue component library?▼

Yes, you can generate a reusable component library using React or Vue, establishing scalable typography, color systems, and design tokens to ensure consistent UI across multiple projects.

What is the best way to ensure accessibility when coding custom web interfaces?▼

The best way to ensure accessibility is applying production-grade frontend patterns that natively integrate semantic HTML/CSS/JS, ensuring your distinctive web components are accessible and performant.

Does this approach support responsive layouts and design tokens for UI pages?▼

Yes, this approach supports establishing design tokens, scalable typography, color systems, and responsive layouts to produce visually striking and reusable frontend pages or full applications.

Related Skills

Explore More Design & Creative Skills→
LiinkiingLiinkiing
6

frontend-design

Generate production-grade HTML/CSS/JS or React/Vue frontend interfaces.

Community
Basic
szeyuszeyu
5

frontend-design

Create production-grade frontend interfaces with defined aesthetic direction.

Community
Advanced
nhonvonhonvo

state-management-expert

Design scalable React state management architectures with Redux Toolkit, Zustand, Jotai, TanStack Query, and Context API.

Community
Advanced
mainliufengmainliufeng
1

frontend-design

Generate production-grade frontend interfaces with HTML/CSS/JS or React/Vue components.

Community
Advanced