skills.rest
jakmaz
jakmazCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Design production-grade frontend interfaces with HTML/CSS, React, and Vue.

12|Updated Nov 6, 2024
Search Tags:#design#ui#frontend#components#aesthetic#web
One-click install
npx skills add https://github.com/jakmaz/dotfiles --skill frontend-design-jakmaz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jakmaz/dotfiles/tree/main/opencode/skill/frontend-design
Command: npx skills add https://github.com/jakmaz/dotfiles --skill frontend-design-jakmaz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Core Features & Use Cases

  • Design-forward interfaces ready for implementation (HTML/CSS, JS frameworks, and design systems)
  • Generate cohesive aesthetics with typography, color, motion, and responsive layouts
  • Use Case: Build a polished landing page or a reusable React component library with accessibility considerations

Quick Start

Describe your frontend requirements (component, page, or UI) and I will generate a production-grade frontend artifact with a bold, cohesive 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?▼

Production-grade frontend interfaces use cohesive typography, color systems, motion, and responsive layouts to deliver implementable code that avoids generic AI aesthetics while honoring accessibility and performance constraints.

Can I generate React components and HTML/CSS layouts with this frontend design approach?▼

React components and HTML/CSS layouts are fully supported, generating production-ready code and design guidance for web components, pages, dashboards, and applications across multiple frameworks.

What's the best way to create a cohesive UI design system for a web application?▼

Creating a cohesive UI design system involves defining typography, color systems, and motion guidelines to generate reusable components with built-in accessibility considerations and responsive layouts.

Does this frontend design approach work with Vue and other JavaScript frameworks?▼

Vue and other JavaScript frameworks like React are supported alongside standard HTML/CSS/JS, delivering implementable code and design guidance while maintaining accessibility and performance constraints.

Do I need to specify accessibility and performance constraints when building web components?▼

Specifying accessibility and performance constraints is not required separately; production-grade web components are generated with these considerations built in by default alongside typography and responsive layouts.

How do I design a polished landing page with bold aesthetic direction?▼

Designing a polished landing page with bold aesthetic direction involves describing your frontend requirements to receive implementable code featuring cohesive typography, color systems, motion, and responsive layouts.

Related Skills

Explore More Design & Creative Skills→
AdamAugustinskyAdamAugustinsky
1

frontend-design

Generate accessible, responsive frontend interfaces with HTML/CSS/JS or React or Vue.

Community
Advanced
ky-zoky-zo

frontend-design

Generate production-grade frontend interfaces with typography, color, spacing, and responsive layouts.

Community
Advanced
sami-abdulsami-abdul
3

frontend-design

Outline and implement bold frontend design systems with typography, color, motion, and CSS.

Community
Advanced
Nhqvu2005Nhqvu2005
54

template-marketplace

Generate project scaffolds from pre-built templates for web apps, APIs, and mobile apps.

Community
Intermediate