skills.rest
billh93
billh93COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate production-grade frontend interfaces from user requirements.

Updated Nov 15, 2025
Search Tags:#design#ui#accessibility#frontend#react#css#component
One-click install
npx skills add https://github.com/billh93/snchz --skill frontend-design-billh93
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/billh93/snchz/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/billh93/snchz --skill frontend-design-billh93

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers struggle to consistently deliver distinctive, production-grade frontend interfaces that are visually cohesive and energetic; this skill streamlines that process.

Core Features & Use Cases

  • Generate code for HTML/CSS/JS or React/Vue components.
  • Establish a cohesive visual system with typography, color, motion, and accessibility.
  • Use Case: build a landing page, dashboard, or component library with polished UI.

Quick Start

Describe the frontend goal and I will generate production-grade UI code, style systems, and component implementations.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-grade React components from UI requirements?▼

Generate production-grade React components by describing your UI goal to receive ready-to-use frontend artifacts. The output includes complete component implementations, cohesive visual systems, and architecture with developer handoff in mind.

How do I build a cohesive visual system for a web dashboard?▼

Build a cohesive visual system by specifying your dashboard requirements to generate integrated typography, color, motion, and accessibility standards. This delivers a polished UI with visually cohesive and energetic frontend interfaces.

Can I generate HTML and CSS code for a landing page without existing design files?▼

Yes, you can generate HTML and CSS code for a landing page by simply describing your frontend goal. The skill produces distinctive, production-grade frontend interfaces complete with style systems and component implementations.

Does this approach support Vue and other frontend frameworks?▼

Yes, this approach supports Vue and other frontend frameworks. It applies to building web components, pages, dashboards, or posters across React, Vue, HTML/CSS, and other frameworks to deliver ready-to-use frontend artifacts.

What is the best way to ensure accessibility is included in frontend component code?▼

The best way to ensure accessibility is to generate frontend component code that establishes a cohesive visual system with accessibility built in. This approach delivers production-grade interfaces with architecture and aesthetics in mind.

Related Skills

Explore More Design & Creative Skills→
samhvw8samhvw8
10

planning

Create detailed technical implementation plans for features and system architectures.

Community
Advanced
ViktorHoferViktorHofer
5

msbuild-including-generated-files

Integrate MSBuild-generated files into the build pipeline.

Community
Intermediate
thapaliyabikendrathapaliyabikendra
24

react-development-patterns

Extract React 18+ development patterns for type-safe, accessible UI components.

Community
Intermediate
tobilafinhangittobilafinhangit
2

figma-design-references

Convert Figma design frames to static HTML/CSS files.

Community
Intermediate