skills.rest
Ber-tx
Ber-txCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design frontend interfaces with HTML, CSS, JavaScript, and React/Vue.

Updated May 21, 2026
Search Tags:#code quality#UI/UX#frontend design#web UI#aesthetic design
One-click install
npx skills add https://github.com/Ber-tx/tongue --skill frontend-design-ber-tx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Ber-tx/tongue/tree/main/.github/skills-main/skills/frontend-design
Command: npx skills add https://github.com/Ber-tx/tongue --skill frontend-design-ber-tx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the problem of creating distinctive, high-quality frontend interfaces that stand out from generic "AI slop" aesthetics. It guides the creation of production-grade web components, pages, applications, and more, with a focus on memorable, aesthetically pleasing designs.

Core Features & Use Cases

  • Design Thinking: Offers guidelines for design thinking before coding, including purpose, tone, constraints, and differentiation.
  • Aesthetic Implementation: Guides the creation of visually striking, cohesive UIs with attention to typography, color & theme, motion, spatial composition, and background/visual details.
  • Code Quality: Ensures production-grade, functional code that is both aesthetically pleasing and memorable.

Quick Start

Use the frontend-design skill to build a React component with a retro-futuristic aesthetic that meets technical requirements for performance and accessibility.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create frontend UI designs that avoid generic AI aesthetics?▼

Avoid generic AI aesthetics by applying focused design thinking guidelines for typography, color schemes, motion graphics, and spatial composition before writing HTML, CSS, or JavaScript code.

Can I use this to build web UI components with React or Vue?▼

Yes, you can build production-grade web UI components with React or Vue. The skill requires knowledge of these frontend frameworks and libraries to implement the aesthetic design guidelines.

What's the best way to plan design thinking before coding a web interface?▼

Plan design thinking by defining the interface purpose, tone, constraints, and differentiation before coding. This preparation ensures the final web UI achieves high aesthetic quality and stands out.

Does frontend design focus on code quality or visual aesthetics?▼

Frontend design focuses on both code quality and visual aesthetics. It ensures production-grade, functional code while implementing cohesive typography, color themes, and motion details for memorable results.

Why do my generated web UIs look generic and lack visual details?▼

Generated web UIs look generic without attention to background visual details, spatial composition, and motion graphics. Implementing specific typography and cohesive color themes prevents this standard appearance.

Related Skills

Explore More Design & Creative Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
MrlykMrlyk

frontend-design

Generate production-grade frontend UI components from user requirements.

Community
Advanced
xccssdsdsd-sourcexccssdsdsd-source

review-animations

Review animation and motion code against Emil Kowalski's design standards.

Community
Advanced
goodnessibehgoodnessibeh
1

frontend-design

Create distinctive frontend interfaces with HTML, CSS, JS, React, and Vue.

Community
Advanced