skills.rest
jrizo0
jrizo0COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-grade HTML/CSS/JS, React, or Vue frontend interfaces with distinctive aesthetics.

Updated Apr 23, 2023
Search Tags:#design#creative coding#web development#frontend#UI#aesthetics
One-click install
npx skills add https://github.com/jrizo0/Machfiles --skill frontend-design-jrizo0
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jrizo0/Machfiles/tree/main/opencode/.config/opencode/skill/frontend-design
Command: npx skills add https://github.com/jrizo0/Machfiles --skill frontend-design-jrizo0

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill tackles the challenge of creating visually striking, production-ready frontend interfaces that break away from generic AI aesthetics and deliver a memorable user experience.

Core Features & Use Cases

  • Aesthetic Direction: Guides the user in defining a bold, conceptual design direction (e.g., brutalist, retro-futuristic, organic).
  • Production-Grade Code: Generates functional HTML/CSS/JS, React, or Vue code with meticulous attention to detail.
  • Visual Refinement: Focuses on unique typography, cohesive color palettes, impactful motion, and unconventional spatial composition.
  • Use Case: Build a unique landing page for a new SaaS product that embodies a "luxury tech" aesthetic, using custom fonts, subtle animations, and an asymmetrical layout.

Quick Start

Use the frontend-design skill to build a new web component with a brutalist aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate a frontend UI that avoids generic AI aesthetics?▼

To generate a frontend UI that avoids generic AI aesthetics, define a bold conceptual direction such as brutalist or retro-futuristic, then apply unique typography, cohesive color palettes, and unconventional spatial composition to produce distinctive, production-grade code.

Can I generate React and Vue code for unique web interfaces?▼

Yes, you can generate functional React and Vue code for unique web interfaces. The skill implements production-grade frontend code with meticulous attention to aesthetic details, impactful motion, and creative visual choices.

What's the best way to build a brutalist landing page with custom web typography?▼

The best way to build a brutalist landing page with custom web typography is to define a bold conceptual design direction, then generate functional HTML, CSS, and JS code featuring cohesive color palettes and unconventional spatial composition.

Does this approach work for creating polished UI components with impactful motion?▼

Yes, this approach works for creating polished UI components with impactful motion. It focuses on visual refinement through unique typography, cohesive color palettes, and meticulous attention to aesthetic details and creative choices.

How do I define a bold conceptual design direction for a SaaS landing page?▼

To define a bold conceptual design direction for a SaaS landing page, select a specific aesthetic like luxury tech or organic, then generate production-grade frontend code implementing custom fonts, subtle animations, and asymmetrical layouts for a memorable user experience.

Related Skills

Explore More Design & Creative Skills→
samChang72samChang72
1

frontend-design

Design and implement custom web interfaces with HTML, CSS, JavaScript, React, and Vue.

Community
Advanced
biztechprogrammingbiztechprogramming
2

appdeploy

Detect web app types and recommend hosting platforms for deployment.

Community
Advanced
twofoldtech-dakotatwofoldtech-dakota
2

fullstack-modern

Coordinate React or Vue frontends with GraphQL and REST APIs in Next.js-style apps.

Community
Advanced
letsur-devletsur-dev

frontend-design

Generate production-grade frontend interfaces with HTML/CSS/JavaScript or React.

Official
Advanced