skills.rest
csim-sg
csim-sgCOMMUNITY
Explore all skills by this author →
Website𝕏@monkeymon4GitHub

frontend-design

Design and implement frontend interfaces with cohesive aesthetic direction.

Updated Jan 18, 2026
Search Tags:#design#React#frontend#UI#CSS#aesthetics
One-click install
npx skills add https://github.com/csim-sg/yacc --skill frontend-design-csim-sg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/csim-sg/yacc/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/csim-sg/yacc --skill frontend-design-csim-sg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides designers and developers in crafting distinctive, production-grade frontend interfaces, ensuring visual clarity and cohesive aesthetics for real-world projects.

Core Features & Use Cases

  • Design Direction: Establish a bold, cohesive visual direction (typography, color, motion) across components, pages, and apps.
  • Implementation Guidance: Provide concrete code patterns (HTML/CSS/JS, React, Vue) aligned with the chosen aesthetic.
  • Use Case: Imagine building a dashboard with a unique, high-end aesthetic; this Skill yields a ready-to-use component structure and styling guidelines.

Quick Start

Start by defining the aesthetic direction and brand constraints, then implement a small component set (e.g., header, card, and color system) to demonstrate the look and feel.

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 frontend with a cohesive aesthetic direction?▼

Building a frontend with a cohesive aesthetic requires specifying design direction, code patterns, typography, color, motion, accessibility, and responsive behavior. This ensures visual clarity and production-grade interfaces across React, Vue, or vanilla HTML.

Can I use this to generate React and Vue UI components?▼

Yes, you can generate React and Vue UI components. It provides concrete code patterns aligned with your chosen aesthetic, applying to building web components, pages, or small apps across React, Vue, or vanilla HTML/CSS.

What is the best way to establish a design system for a web app?▼

The best way to establish a web app design system is to define the aesthetic direction and brand constraints, then implement a small component set like a header, card, and color system to demonstrate the look and feel.

Does this approach work with vanilla HTML and CSS or only frameworks?▼

This approach works with vanilla HTML and CSS as well as frameworks. It guides the implementation of distinctive, production-grade frontend interfaces across React, Vue, or vanilla HTML/CSS with a cohesive visual direction.

Are accessibility and responsive behavior included in frontend design guidance?▼

Yes, accessibility and responsive behavior are included in frontend design guidance. It specifies requirements for design direction, code patterns, typography, color, motion, accessibility, and responsive behavior to be followed in implementation.

Related Skills

Explore More Design & Creative Skills→
bketelsenbketelsen
1

frontend-design

Generate distinctive frontend interfaces with intentional typography, color, motion, and composition.

Community
Advanced
KhoiwallKhoiwall

mockup-to-code

Convert UI mockups into React, Vue, or plain HTML code.

Community
Advanced
davidbeglenboyledavidbeglenboyle
2

frontend-design

Generate production-grade HTML/CSS/JS frontend interfaces from design briefs.

Community
Advanced
j-mckerracherj-mckerracher

frontend-design

Create distinctive frontend interfaces with HTML, CSS, JavaScript, React, or Vue.

Community
Advanced