skills.rest
PlazaCC
PlazaCCOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

Create production-grade frontend interfaces with CSS variable theming and accessibility.

2|Updated Apr 11, 2026
Search Tags:#typography#design#ui#frontend#react#css#aesthetics
One-click install
npx skills add https://github.com/PlazaCC/antes-da-tela --skill frontend-design-plazacc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/PlazaCC/antes-da-tela/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/PlazaCC/antes-da-tela --skill frontend-design-plazacc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps teams and creators avoid generic, cookie-cutter UI outputs by producing distinctive, production-grade frontend interfaces that are visually memorable and technically robust. It bridges the gap between creative direction and implementable code, turning high-level aesthetic decisions into cohesive, accessible, and deployable UI artifacts.

Core Features & Use Cases

  • Intent-driven design: Choose and commit to a bold aesthetic direction (e.g., brutalist, editorial, luxury) and execute it consistently across layout, typography, color, and motion.
  • Production-grade code: Deliver working HTML/CSS/JS or framework components (React/Vue) with CSS variables, responsive rules, and accessibility considerations.
  • Visual systems: Provide refined typography pairing, cohesive color tokens, motion patterns, and background/texture treatments that create atmosphere and depth.
  • Use cases: Design landing pages, dashboards, component libraries, promotional posters, or restyle existing interfaces to a unique brand voice.

Quick Start

Design a polished React landing page for a boutique coffee roaster with a refined luxury aesthetic, using custom typography, CSS variable theming, responsive layout, subtle motion, and accessibility best practices.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a React landing page that doesn't look like generic AI output?▼

To create a React landing page that avoids generic AI aesthetics, apply an intent-driven design approach using bold aesthetic directions like brutalist or luxury, supported by custom typography pairing, cohesive color tokens, and subtle motion patterns.

What's the best way to build production-grade frontend interfaces with strong typography?▼

The best way to build production-grade frontend interfaces is to enforce strong typography pairing, CSS variable theming for color systems, responsive layout rules, and accessibility requirements within your HTML/CSS or React components.

Can I use this approach to restyle existing web UIs across desktop and mobile?▼

Yes, you can restyle existing web UIs across desktop and mobile contexts by committing to a distinctive aesthetic direction and applying refined visual systems, including background textures and motion, to create atmosphere and depth.

Does this frontend design method support CSS variable theming and accessibility?▼

This frontend design method supports CSS variable theming and accessibility by delivering working code with defined color tokens, responsive rules, and deployable UI artifacts that bridge creative direction and technical implementation robustly.

How do I design a dashboard with a cohesive color system and motion patterns?▼

To design a dashboard with a cohesive color system, select a specific aesthetic direction and execute it consistently using CSS variables, refined typography, motion patterns, and background treatments to ensure visual memorability and technical robustness.

Related Skills

Explore More Design & Creative Skills→
MClaudioMClaudio

frontend-design

Generates frontend interfaces from vague UI requests using React or HTML/CSS.

Community
Advanced
thktthkt
11

enhancing-progressively

Solve UI layout and styling challenges with CSS-first progressive enhancement.

Community
Intermediate
ekremmkasapekremmkasap

visual-design-foundations

Establish design tokens, style guides, and dark mode theming for visual systems.

Community
Advanced
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate