skills.rest
vibery-studio
vibery-studioOFFICIAL
Explore all skills by this author →
GitHub

frontend-design

Design production-grade frontend interfaces with cohesive aesthetics in React, Vue, or HTML/CSS.

3|1|Updated Dec 21, 2025
Search Tags:#design#frontend#react#web-development#ui-ux#component-based#aesthetics
One-click install
npx skills add https://github.com/vibery-studio/templates --skill frontend-design-vibery-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/vibery-studio/templates/tree/main/skills/frontend-design
Command: npx skills add https://github.com/vibery-studio/templates --skill frontend-design-vibery-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with high design quality. This skill guides designers and developers to craft web components, pages, artifacts, posters, or applications with polished aesthetics, avoiding generic AI visuals and ensuring cohesive design language.

Core Features & Use Cases

  • Guided aesthetic direction: selects a bold, cohesive visual direction (typography, color, motion) and applies it across components.
  • Component-based implementations: produces reusable UI blocks (buttons, cards, layouts) and page templates (landing pages, dashboards, UIs) in HTML/CSS/JS, React, or Vue.
  • Accessibility and polish: enforces accessible color contrast, keyboard navigation, and refined micro-interactions for a premium feel.
  • Use Case: build a marketing landing page with a distinctive hero, navigation, and responsive grid that scales across devices.

Quick Start

Implement a production-grade frontend interface following the defined 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 design production-grade frontend interfaces with cohesive aesthetics?▼

To design production-grade frontend interfaces, this skill guides you in selecting a bold visual direction for typography, color, and motion, then applying it across reusable UI components to avoid generic AI visuals.

Can I build React components and Vue page templates using this frontend design skill?▼

Yes, you can build React components and Vue page templates. This skill produces reusable UI blocks like buttons and cards, alongside page templates such as landing pages and dashboards in React, Vue, or vanilla HTML/CSS.

What's the best way to ensure accessible color contrast in web UI layouts?▼

The best way to ensure accessible color contrast in web UI layouts is to follow this skill's enforced accessibility standards, which validate color contrast ratios, support keyboard navigation, and refine micro-interactions for premium feel.

How do I create a responsive grid for a marketing landing page with a distinctive hero section?▼

You can create a responsive marketing landing page by applying this skill's component-based approach. It helps you build distinctive hero sections, navigation bars, and responsive grids that scale across multiple devices.

Why do my generated web components often look generic, and how can I improve them?▼

Generated web components look generic due to a lack of cohesive design language. This skill improves them by applying guided aesthetic direction, ensuring your web components achieve distinctive, production-grade frontend design quality.

Related Skills

Explore More Design & Creative Skills→
jwyniajwynia

frontend-design

Analyze CSS/HTML foundations and generate design tokens, palettes, typography, and component templates.

Community
Advanced
vobasevobase
59

polish

Inspect UI components, layouts, and accessibility for pre-release polish issues.

Official
Intermediate
hdkz-devhdkz-dev

accessibility-ally

Audit web applications for semantic HTML, keyboard navigation, and color contrast issues.

Community
Intermediate
deomiarndeomiarn

frontend-design

Generate production-grade frontend interfaces from high-level briefs.

Community
Intermediate