skills.rest
falconnt
falconntCOMMUNITY
Explore all skills by this author →
Website𝕏@pkeldersGitHub

designing-frontends

Generate structured design guidance for HTML/CSS/JS or React/Vue frontends.

3|Updated Jan 22, 2026
Search Tags:#design#frontend#components#UI#guidance#aesthetics#production-grade
One-click install
npx skills add https://github.com/falconnt/windsurf-skills --skill designing-frontends
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designing-frontends
Source: https://github.com/falconnt/windsurf-skills/tree/main/designing-frontends
Command: npx skills add https://github.com/falconnt/windsurf-skills --skill designing-frontends

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to create distinctive, production-grade interfaces that balance aesthetics with maintainability. This skill provides a structured approach to crafting high-quality frontend designs from concept to implementation.

Core Features & Use Cases

  • Distinctive design direction: Establish a clear aesthetic concept and translate it into code.
  • Production-ready UI: Deliver polished components and layouts ready for deployment.
  • Use Case: Build a marketing homepage with a bold visual identity and accessible UI across devices.

Quick Start

Start by defining a bold design direction, then translate it into a reusable component system with accessible CSS and semantic HTML. For example, describe a base layout, typography scale, color system, and motion guidelines for a single page.

Frequently Asked Questions about designing-frontends

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

FAQPage Schema
How do I build a production-grade frontend with a distinctive visual identity?▼

To build a production-grade frontend, establish a bold aesthetic concept and translate it into a reusable component system with accessible CSS, semantic HTML, and clear typography and color constraints.

What is the best way to structure frontend design guidance for a marketing site or dashboard?▼

Frontend design guidance is structured by defining a base layout, typography scale, color system, and motion guidelines to ensure a polished UI across different contexts like marketing sites and dashboards.

Can I use this approach to generate UI components for React or Vue?▼

Yes, this approach enforces a thorough implementation plan that supports generating UI components and pages using HTML, CSS, JavaScript, or frameworks like React and Vue.

How do I create a reusable component system with accessible CSS and semantic HTML?▼

Create a reusable component system by defining a clear design direction, establishing typography and color constraints, and applying motion and layout principles directly to your HTML, CSS, and JS code.

Why does my frontend UI lack a polished and distinctive aesthetic?▼

Your frontend UI may lack polish because it is missing a structured design direction that enforces a clear aesthetic concept, typography scale, color system, and defined motion principles.

Do I need to define a color system and typography scale before building web components?▼

Yes, defining a color system and typography scale beforehand ensures your web components maintain a strong visual identity and production-grade aesthetics across all devices.

Related Skills

Explore More Design & Creative Skills→
HieubkavHieubkav

Frontend Responsive

Implement responsive mobile-first layouts with fluid containers, breakpoints, and touch targets.

Community
Basic
angelriera-devangelriera-dev

frontend-design

Translate user goals into frontend design plans and UI components.

Community
Advanced
VYRE-StudiosVYRE-Studios

frontend-design

Design responsive, accessible UI components with semantic HTML and WCAG AA compliance.

Official
Intermediate
BankrBotBankrBot
80

Bankr Dev - Project Templates

Scaffold Bankr API projects from predefined templates for bots, services, dashboards, and CLIs.

Official
Intermediate