frontend-design

Create production-grade frontend interfaces with defined aesthetic direction.

5|Updated Feb 4, 2026
One-click install
npx skills add https://github.com/szeyu/open-ssyok-finance --skill frontend-design-szeyu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/szeyu/open-ssyok-finance/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/szeyu/open-ssyok-finance --skill frontend-design-szeyu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to design and implement at scale; this skill guides crafting polished UIs with a clear aesthetic direction.

Core Features & Use Cases

  • Aesthetic-led design: Develop visually striking interfaces with a strong point of view and accessible typography.
  • End-to-end delivery: Produce code-ready components, layouts, and pages across frameworks (React, Vue, HTML/CSS/JS).
  • Use Case: Create a landing page, dashboard, or component library that stands out and meets accessibility guidelines.

Quick Start

Describe your frontend requirements (framework, pages or components, and aesthetic direction) and I'll produce production-grade, ready-to-ship code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a production-grade frontend UI that meets accessibility guidelines?

Building production-grade frontend UI requires defining an aesthetic direction, accessible typography, color systems, and responsive behavior to generate ready-to-ship components. You receive end-to-end design-to-code workflows across HTML/CSS/JS or modern frameworks like React and Vue.

What's the best way to create a distinctive landing page with a strong aesthetic direction?

Creating a distinctive landing page involves specifying your aesthetic requirements and framework to produce visually striking, code-ready interfaces. You get production-grade layouts with a clear design point of view and accessible typography that stand out immediately.

Can I generate responsive UI components for React or Vue using this approach?

Yes, you can generate responsive UI components for React or Vue by specifying your framework and component requirements. This approach produces code-ready, ready-to-deploy components with defined responsive behavior and accessible typography across modern frameworks.

How do I design a dashboard interface that is both visually striking and accessible?

Designing a visually striking, accessible dashboard requires defining your color systems, typography, and layout requirements to produce production-grade code. You receive ready-to-ship dashboard pages with strong aesthetic direction that meet accessibility guidelines.

Does this approach work for building an entire component library from scratch?

Yes, this approach works for building an entire component library by defining your aesthetic direction, framework, and component specifications. You receive production-grade, ready-to-deploy components with consistent color systems, typography, and responsive behavior across your library.

Why does my frontend design lack a clear aesthetic direction and accessible typography?

Frontend design lacks a clear aesthetic direction and accessible typography when color systems and responsive behavior are not systematically defined. Defining these requirements upfront produces distinctive, production-grade interfaces with a strong point of view that meets accessibility guidelines.