skills.rest
victor-teles
victor-telesCOMMUNITY
Explore all skills by this author →
Website𝕏@engineerdesoftGitHub

frontend-design

Create production-grade frontend interfaces from user requirements in React, Vue, or HTML/CSS.

1|Updated Feb 11, 2026
Search Tags:#design#ui#frontend#react#css#components#aesthetics
One-click install
npx skills add https://github.com/victor-teles/oh-my-query --skill frontend-design-victor-teles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/victor-teles/oh-my-query/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/victor-teles/oh-my-query --skill frontend-design-victor-teles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to craft at scale; this skill guides design and implementation to avoid generic AI aesthetics and deliver polished interfaces.

Core Features & Use Cases

  • Bold aesthetic direction: Define a unique visual language and translate it into reusable UI patterns.
  • End-to-end frontend output: Generate components, pages, dashboards, or complete apps with cohesive styling.
  • Production-ready quality: Emphasizes typography, color systems, motion, and responsive behavior for real-world use.
  • Use Case: When building a marketing site or admin dashboard, use this skill to create a visually distinctive UI that remains accessible and maintainable.

Quick Start

Describe your frontend requirement and receive a ready-to-run, design-forward UI solution.

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 interfaces that avoid generic AI aesthetics?▼

Production-grade frontend interfaces require a bold aesthetic direction with cohesive typography, color systems, and responsive behavior. Defining a unique visual language and translating it into reusable UI patterns prevents generic outputs and ensures polished, distinctive components.

Can I generate complete React dashboards and pages with cohesive styling?▼

Yes, generating complete React dashboards and pages with cohesive styling is supported. The skill produces end-to-end frontend output, translating user requirements into ready-to-run components, pages, or full apps with consistent design systems.

Does this approach work with Vue and HTML/CSS or is it limited to React components?▼

This approach works across React, Vue, and HTML/CSS without limitation. It generates production-ready code output and applies design aesthetics, typography, and responsive behavior uniformly across all three frontend frameworks for components, pages, or complete apps.

What is the best way to create a visually distinctive admin dashboard that stays maintainable?▼

The best way to create a maintainable, visually distinctive admin dashboard is to establish a bold aesthetic direction upfront. Translating that unique visual language into reusable UI patterns ensures the interface remains accessible and maintainable as it scales.

How do I translate user requirements into ready-to-run, design-forward UI solutions?▼

Translating user requirements into design-forward UI solutions involves describing your frontend need and receiving production-ready code. The process emphasizes typography, color systems, motion, and responsive behavior to deliver a cohesive, ready-to-run interface.

Related Skills

Explore More Design & Creative Skills→
Italo520Italo520

frontend-design

Design and implement production-grade frontend interfaces in React, Vue, or HTML/CSS.

Community
Advanced
kivo360kivo360
71

frontend-design

Generate production-grade frontend interfaces from user requirements.

Community
Advanced
adnanmuelleradnanmueller
2

senior-frontend-engineer

Translate design specs and API contracts into Next.js frontend interfaces.

Community
Advanced
wanyusheng63-altwanyusheng63-alt

frontend-design

Create React components, pages, dashboards, and design systems with cohesive typography and color.

Community
Advanced