skills.rest
Jackliu-miaozi
Jackliu-miaoziCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate frontend interfaces with design systems and implementation-ready code samples.

Updated Jan 7, 2026
Search Tags:#design#accessibility#frontend#react#vue#design-system#ui-components
One-click install
npx skills add https://github.com/Jackliu-miaozi/murmur-protocol --skill frontend-design-jackliu-miaozi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Jackliu-miaozi/murmur-protocol/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/Jackliu-miaozi/murmur-protocol --skill frontend-design-jackliu-miaozi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams and developers create distinctive, production-grade frontend interfaces with a refined aesthetic, reducing design dead-ends and ensuring consistent quality across projects.

Core Features & Use Cases

  • Design-forward frontend components and pages with a polished, production-ready aesthetic
  • Provide typography, color systems, spacing, and accessibility guidance for consistent UI
  • Generate implementation-ready code samples (HTML/CSS/JS or framework-specific) and a cohesive design direction for dashboards, websites, landing pages, or apps

Quick Start

Design a production-ready hero section component in React with a bold aesthetic, including CSS variables, accessible markup, and sample content.

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 UI components with a strong aesthetic?▼

To build production-grade frontend UI, this Skill generates distinctive web components, pages, and dashboards across frameworks like React and Vue. It provides ready-to-run code samples alongside a cohesive design direction to ensure a polished aesthetic.

Can I generate a complete design system with color tokens and typography for my web app?▼

Yes, generating a complete design system is supported. This Skill outputs typography, color tokens, spacing, and accessibility guidance, ensuring your web app maintains consistent UI quality and a refined aesthetic across all components.

Does this Skill work with both React and Vue for creating landing pages?▼

Yes, it works with React, Vue, and standard HTML/CSS/JS. You can generate implementation-ready code samples for landing pages, marketing artifacts, and dashboards, adapting the distinctive aesthetic direction to your chosen framework.

What's the best way to ensure accessibility and responsive behavior in my frontend design?▼

The best way to ensure accessibility and responsive behavior is to apply the generated design system tokens directly. This Skill satisfies accessibility requirements and responsive behavior constraints by embedding them into the ready-to-run code samples.

How do I create a production-ready hero section component in React?▼

To create a production-ready hero section in React, this Skill provides accessible markup, CSS variables, and sample content. It outputs a bold, design-forward component with a cohesive aesthetic direction ready for immediate implementation.

What limitations should I expect when generating frontend design code?▼

Limitations include relying on your existing development environment to run the generated code samples. While this Skill provides the aesthetic direction and design tokens, you must integrate the HTML/CSS/JS or framework-specific components into your project manually.

Related Skills

Explore More Design & Creative Skills→
OneWave-AIOneWave-AI
245

screenshot-to-code

Convert UI screenshots into responsive HTML, CSS, React, or Vue code.

Official
Advanced
sbsbhongsbsbhong

zustand

Adapt Zustand state management to json-render's StateStore for React Native JSON UI components.

Community
Intermediate
sarimofficialsarimofficial

Dockerfile Generator

Generate multi-stage Dockerfiles for Next.js frontends and FastAPI backends.

Community
Intermediate
HouseGarofaloHouseGarofalo
3

radix-ui

Provide unstyled, accessible React component primitives for custom UI.

Official
Intermediate