skills.rest
roberto-mello
roberto-melloCOMMUNITY
Explore all skills by this author →
Website𝕏@robertobmelloGitHub

frontend-design

Transform vague frontend requirements into production-grade UI implementations.

50|2|Updated Feb 8, 2026
Search Tags:#typography#ui#accessibility#aesthetic#motion#design-systems#frontend-design
One-click install
npx skills add https://github.com/roberto-mello/beads-compound-plugin --skill frontend-design-roberto-mello
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/roberto-mello/beads-compound-plugin/tree/main/plugins/beads-compound/gemini/skills/frontend-design
Command: npx skills add https://github.com/roberto-mello/beads-compound-plugin --skill frontend-design-roberto-mello

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distills vague frontend requirements into distinctive, production-grade interfaces that align with a clear aesthetic direction.

Core Features & Use Cases

  • Generates bold, visually polished interfaces with strong typography, color, motion, and accessibility.
  • Supports outputs across HTML/CSS/JS, React, Vue, and other frameworks while maintaining a cohesive design system.
  • Use Case: when building a web app, landing page, or component library that needs a unique, memorable look beyond generic AI aesthetics.

Quick Start

Describe a bold, branded frontend landing page and generate the initial HTML/CSS/JS scaffolding.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I turn vague frontend requirements into production-grade UI?▼

To transform vague frontend requirements into production-grade UI, this Skill distills abstract concepts into cohesive interfaces with strong typography, color, motion, and accessibility constraints, delivering validated design decisions and ready-to-use code.

Can I generate React and Vue components with a cohesive design system?▼

Yes, you can generate React and Vue components with a cohesive design system. This Skill supports outputs across React, Vue, and vanilla HTML/CSS/JS, enforcing design-direction constraints while maintaining a unique, memorable aesthetic across frameworks.

What's the best way to build a web app with a bold aesthetic and accessibility?▼

The best way to build a web app with a bold aesthetic and accessibility is to apply this Skill, which enforces typography, color, motion, and accessibility constraints to deliver pixel-perfect polish and production-ready code.

Does this frontend design approach enforce accessibility and motion constraints?▼

Yes, this frontend design approach strictly enforces accessibility and motion constraints alongside typography and color rules. It validates design decisions to ensure the final interface is both distinctive and compliant with accessibility standards.

How do I create a branded landing page that avoids generic AI aesthetics?▼

To create a branded landing page that avoids generic AI aesthetics, describe your bold frontend vision to generate initial HTML/CSS/JS scaffolding. This Skill ensures a distinctive, visually polished look with strong typography and cohesive design.

Related Skills

Explore More Design & Creative Skills→
Owl-ListenerOwl-Listener
234

design-strategy

Synthesize discovery and research into stakeholder-aligned strategic documents with experience maps and metrics.

Community
Advanced
chendongqichendongqi
110

frontend-design

Generates frontend interfaces with HTML/CSS/JS across React, Vue, Angular, or vanilla JS.

Community
Advanced
vijaychandar186vijaychandar186

frontend-design

Convert frontend briefs into responsive React or HTML/CSS interfaces with cohesive design systems.

Community
Intermediate
bonnguyenitcbonnguyenitc
19

frontend-design

Create distinctive frontend interfaces with design tokens and responsive layouts.

Community
Advanced