skills.rest
rizaldiem
rizaldiemCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create production-ready frontend interfaces with deliberate typography, color systems, and motion.

Updated Apr 5, 2026
Search Tags:#typography#design#frontend#react#ui-design#aesthetics#html-css
One-click install
npx skills add https://github.com/rizaldiem/digital-invitation-web_V2 --skill frontend-design-rizaldiem
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/rizaldiem/digital-invitation-web_V2/tree/main/.windsurf/skills/frontend-design
Command: npx skills add https://github.com/rizaldiem/digital-invitation-web_V2 --skill frontend-design-rizaldiem

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes the barrier between concept and polished UI by guiding the creation of distinctive, production-grade frontend interfaces and components that avoid generic AI-generated aesthetics.

Core Features & Use Cases

  • Design Thinking & Direction: Helps choose a clear, bold aesthetic direction (tone, purpose, constraints) before coding.
  • Production-Grade Implementation: Produces working HTML/CSS/JS or framework code with deliberate typography, color systems, motion, spatial composition, and accessible practices.
  • Use Cases: Building landing pages, dashboards, React components, HTML/CSS layouts, posters, and restyling existing interfaces to match a specific audience or brand.

Quick Start

Use the frontend-design skill to build a production-ready React landing page for a boutique design studio with a luxury, editorial aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create React components that avoid generic AI-generated aesthetics?▼

Yes, you can generate production-grade HTML and CSS layouts for landing pages. The skill produces cohesive code with deliberate typography, motion, and accessible implementation that fits framework constraints and specific audience needs.

What's the best way to style a dashboard UI for a specific target audience?▼

The best way to style a dashboard UI is to define a clear aesthetic direction with tone and constraints before coding. This approach yields production-ready code with deliberate spatial composition and accessible implementation tailored to your audience.

Does this approach work for restyling existing web interfaces rather than starting from scratch?▼

Yes, this approach works for restyling existing web interfaces. You can apply deliberate typography, color systems, and motion to existing UIs to match a specific brand purpose or audience without needing a full rebuild.

Can I use this to build a frontend design system with accessible HTML and CSS?▼

Yes, you can build a frontend design system with accessible HTML and CSS. This skill produces cohesive, production-ready code featuring deliberate typography, color systems, and motion that adheres to accessible implementation practices.

What aesthetic limitations exist when generating frontend UI components automatically?▼

The main limitation of automated frontend UI generation is the risk of generic, AI-driven aesthetics. This skill overcomes that by enforcing deliberate design thinking, ensuring distinctive visual direction and cohesive spatial composition before code generation.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
traylinxtraylinx
2

frontend-design

Create production-grade frontend interfaces with design tokens and responsive layouts.

Official
Advanced
wjyugutouwjyugutou

web-design-guidelines

Automate UI code review against Web Interface Guidelines for accessibility and consistency.

Community
Intermediate
bonnguyenitcbonnguyenitc
19

frontend-design

Create distinctive frontend interfaces with design tokens and responsive layouts.

Community
Advanced