frontend-design

Design production-grade frontend interfaces with HTML/CSS/JS or modern frameworks.

6|Updated Mar 24, 2019
One-click install
npx skills add https://github.com/rafifos/dotfiles --skill frontend-design-rafifos
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/rafifos/dotfiles/tree/main/dot_agents/skills/frontend-design
Command: npx skills add https://github.com/rafifos/dotfiles --skill frontend-design-rafifos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics and deliver polished, executable UI code.

Core Features & Use Cases

  • Frontend Architecting: Establishes a bold aesthetic direction and produces production-ready UI code across HTML/CSS/JS or frameworks.
  • Implementation Variety: Supports HTML/CSS/JS, React, Vue, or other modern frontend stacks with cohesive design systems.
  • Design Guidance: Provides typography, color, motion, and layout guidelines to ensure a consistent visual language.
  • Use Case: Example: build a landing page with a unique visual language and responsive components.

Quick Start

Describe your frontend goal and I will deliver a production-ready, aesthetically cohesive implementation in your chosen tech stack.

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 UI that avoids generic AI aesthetics?

To build production-grade frontend UI with a distinctive aesthetic, provide your frontend goal to receive executable UI code and cohesive design guidance. This includes establishing typography, color systems, and motion across your chosen tech stack.

Can I generate React components with a cohesive visual identity for my web application?

Yes, you can generate React components with a cohesive visual identity. This skill supports modern frameworks like React and Vue, delivering production-ready UI code with established typography, color, and layout guidelines.

What is the best way to design a responsive landing page with a unique visual language?

The best way to design a responsive landing page with a unique visual language is to specify your frontend goal. You will receive a production-ready implementation with cohesive design systems, ensuring bold aesthetics and polished UI code.

Does this frontend design approach work with plain HTML, CSS, and JavaScript?

Yes, this frontend design approach works with plain HTML, CSS, and JavaScript. It supports framework-agnostic implementation alongside modern frontend stacks like React and Vue, ensuring cohesive design systems across various technologies.

How do I establish a bold aesthetic direction for my web application dashboard?

To establish a bold aesthetic direction for your web application dashboard, apply the provided design guidance. It delivers production-ready UI code, satisfying requirements for typography, color systems, motion, and responsive layouts.

What design guidelines are included for creating a consistent visual language in frontend development?

Design guidelines for creating a consistent visual language include comprehensive rules for typography, color systems, motion, and layout. These ensure your components, pages, and dashboards maintain a distinctive and polished aesthetic.