skills.rest
marianban
marianbanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate production-ready HTML/CSS/JS or React components from frontend briefs.

Updated Jan 24, 2026
Search Tags:#typography#accessibility#react#ui-design#frontend-design#color-themes#html-css-js
One-click install
npx skills add https://github.com/marianban/fuzzy-guacamole --skill frontend-design-marianban
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/marianban/fuzzy-guacamole/tree/main/.codex/skills/frontend-design
Command: npx skills add https://github.com/marianban/fuzzy-guacamole --skill frontend-design-marianban

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distills vague frontend briefs into production-grade, visually distinctive interfaces with a clear aesthetic direction.

Core Features & Use Cases

  • Define a bold, cohesive design direction and translate it into production-ready HTML/CSS/JS or React components.
  • Generate polished UI layouts, pages, dashboards, and UI artefacts that align with branding and accessibility standards.
  • Use case: you provide requirements for a landing page or component, and this skill outputs ready-to-implement UI code with typography, color, motion, and responsive behavior.

Quick Start

Provide your frontend goal, target audience, and preferred aesthetic, and ask me to generate production-ready HTML/CSS/JS or React components.

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 briefs into production-ready React components?▼

To turn vague frontend briefs into production-ready React components, you provide your goal, target audience, and aesthetic. The skill outputs cohesive HTML/CSS/JS or React UI code with defined typography, color, motion, and responsive behavior.

What is the best way to generate a UI layout with cohesive typography and color themes?▼

The best way to generate a UI layout with cohesive typography and color themes is to define a bold aesthetic direction first. This translates branding and accessibility constraints directly into polished, production-grade frontend code.

Can I use this to build accessible HTML CSS JS dashboards?▼

Yes, you can build accessible HTML/CSS/JS dashboards by providing your frontend requirements. It generates polished UI layouts, pages, and dashboards that align with branding and accessibility standards.

How does this approach handle frontend accessibility and motion guidelines?▼

This approach handles frontend accessibility and motion guidelines by applying them as core constraints during generation. It ensures the resulting HTML/CSS/JS or React code satisfies requirements for branding, accessibility, and performance.

Do I need existing design assets to generate distinctive frontend UI?▼

You do not need existing design assets to generate distinctive frontend UI. You simply provide your frontend goal, target audience, and preferred aesthetic to distill those inputs into a clear design direction and ready-to-implement code.

Related Skills

Explore More Design & Creative Skills→
sandrasocialsandrasocial
1

impeccable

Generate production-grade frontend interfaces from explicit design context.

Community
Advanced
joyz0joyz0

frontend-design

Create production-ready web interfaces with HTML/CSS/JS or React components.

Community
Advanced
magic3007magic3007
10

frontend-design

Translate frontend requirements into production-ready UI with code samples.

Community
Advanced
Lincode-hormonyLincode-hormony
13

frontend-design

Generate production-grade HTML/CSS/JS frontend components with bold aesthetics and accessible color systems.

Community
Advanced