skills.rest
MagicWifiMoney
MagicWifiMoneyCOMMUNITY
Explore all skills by this author →
𝕏@giebzGitHub

frontend-design

Generate frontend interfaces with typography, color, motion, and accessibility guidelines.

Updated Aug 27, 2026
Search Tags:#design#ui#frontend#css#aesthetics#motion
One-click install
npx skills add https://github.com/MagicWifiMoney/openclaw-starter-kit --skill frontend-design-magicwifimoney
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/MagicWifiMoney/openclaw-starter-kit/tree/main/skills-custom/frontend-design
Command: npx skills add https://github.com/MagicWifiMoney/openclaw-starter-kit --skill frontend-design-magicwifimoney

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps design production-grade frontend interfaces that avoid generic AI aesthetics and deliver polished, ready-to-implement UI.

Core Features & Use Cases

  • Production-grade frontend implementation: build robust, maintainable interfaces that scale.
  • Aesthetic guidelines and constraints: typography, color systems, motion, accessibility.
  • Use Case: when starting a new web app, dashboard, or UI component, provide requirements and receive a ready-design plan and code scaffolding.

Quick Start

Specify your frontend requirements and constraints to generate a ready-to-implement design.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-grade frontend interfaces that avoid generic AI aesthetics?▼

To build production-grade frontend interfaces, specify your visual identity and performance constraints to receive a ready-to-implement design plan and code scaffolding that adheres to bold aesthetic guidelines.

What's the best way to create a cohesive UI color system and typography for a new web app?▼

Creating a cohesive UI color system and typography requires applying specific aesthetic constraints and guidelines during your frontend design phase to ensure a bold, maintainable visual identity across components.

Can I use this frontend design approach for dashboards and UI components?▼

Yes, this frontend design approach works for building new web apps, dashboards, and UI components, providing robust, maintainable interfaces that scale and meet cross-platform compatibility requirements.

Does production-grade frontend design require accessibility and motion guidelines?▼

Production-grade frontend design requires strict adherence to accessibility and motion guidelines alongside typography and color systems to ensure cross-platform compatibility and a cohesive user experience.

How do I start designing a new web page with a clearly defined visual identity?▼

Start designing a new web page by specifying your frontend requirements and performance constraints, which generates a ready-to-implement design plan and code scaffolding for your defined visual identity.

Why does my AI-generated UI component lack a polished, production-ready aesthetic?▼

AI-generated UI lacks a polished aesthetic when it ignores defined typography, color systems, and motion constraints; applying production-grade frontend design guidelines ensures cohesive, bold visual implementation.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
congthang12312congthang12312

mobile-development

Guide mobile app design and implementation across React Native, Flutter, Swift, and Kotlin.

Community
Advanced
hybrid-npmhybrid-npm
17

frontend-design

Generate production-grade frontend interfaces with structured design workflows.

Official
Advanced
tenzirtenzir
2

styling-tenzir-ui

Provide Tenzir design system tokens and CSS component specifications for UI styling.

Official
Basic