skills.rest
rafaelminatto1
rafaelminatto1COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create production-grade frontend interfaces with HTML, CSS, and JavaScript.

Updated Sep 2, 2025
Search Tags:#design#ui#accessibility#frontend#css#components#aesthetics
One-click install
npx skills add https://github.com/rafaelminatto1/fisioflow-51658291 --skill frontend-design-rafaelminatto1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/rafaelminatto1/fisioflow-51658291/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/rafaelminatto1/fisioflow-51658291 --skill frontend-design-rafaelminatto1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams create distinctive, production-grade frontend interfaces with a strong design direction, ensuring visuals are purposeful and polished rather than generic.

Core Features & Use Cases

  • Production-grade code: Implement robust, accessible, and responsive UI components using React, Vue, or vanilla JS according to project needs.
  • Distinctive aesthetics: Apply a bold, cohesive design system with typography, color, motion, and layout to avoid generic AI visuals.
  • End-to-end frontend deliverables: From components to pages and style guides, with accessibility and responsive behavior across devices.

Quick Start

Generate a production-grade frontend component following the defined 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 create production-grade frontend interfaces that don't look like generic AI generated UI?▼

Production-grade frontend interfaces require a bold, cohesive design system applying purposeful typography, color, and motion. This skill generates distinctive UI components with polished aesthetics, ensuring visuals are cohesive rather than generic.

Does this frontend design skill work with React, Vue, and vanilla JS?▼

Yes, this frontend design skill supports React, Vue, and vanilla JS. It implements robust, accessible, and responsive UI components according to your specific project needs across these frameworks.

How do I build accessible and responsive web components with a cohesive design system?▼

Building accessible and responsive web components requires applying a cohesive design system with proper HTML, CSS, and JS. This skill ensures production-ready code with accessibility and responsive behavior across all devices.

What is the best way to generate end-to-end frontend deliverables from components to style guides?▼

The best way to generate end-to-end frontend deliverables is applying a cohesive design system across components, pages, and style guides. This skill produces production-ready outputs ensuring accessibility and responsive layouts.

Can I use this for building full web applications or just individual UI components?▼

You can use this skill for both individual UI components and full web applications. It applies a bold, cohesive aesthetic direction to building web components, pages, or complete applications where high design quality is essential.

Why does my frontend UI lack a distinctive aesthetic and look generic?▼

Frontend UI looks generic when lacking a bold, cohesive design direction with purposeful typography, color, and motion. This skill solves that by applying a strong design system to ensure visuals are polished and distinctive.

Related Skills

Explore More Design & Creative Skills→
The-RabakThe-Rabak

frontend-design

Design and implement production-grade frontend interfaces across React, Vue, Angular, Svelte, and vanilla setups.

Community
Advanced
jrmatherlyjrmatherly

web-design-guidelines

Analyze HTML/CSS/JS files for accessibility and design guideline compliance.

Community
Basic
hendrax5hendrax5

phase-6-ui-integration

Implement frontend UI and integrate it with backend APIs.

Community
Intermediate
alter123-zzalter123-zz
18

frontend-design

Generate production-grade frontend interfaces with design systems and accessible components.

Community
Intermediate