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.