skills.rest
MomoDaviluke
MomoDavilukeCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Standardize frontend design workflows for cohesive UIs.

2|Updated Mar 3, 2026
Search Tags:#typography#ui#accessibility#frontend#color#responsive-design#design-guidelines
One-click install
npx skills add https://github.com/MomoDaviluke/star-citizen-promotion --skill frontend-design-momodaviluke
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/MomoDaviluke/star-citizen-promotion/tree/main/.agents/skills/superdesign
Command: npx skills add https://github.com/MomoDaviluke/star-citizen-promotion --skill frontend-design-momodaviluke

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design guidelines provide a structured approach for building cohesive, modern interfaces, reducing visual drift and design debt across pages and apps.

Core Features & Use Cases

  • Design Workflow: a repeatable process for layout, theming, animation, and implementation.
  • Theme Guidelines: color tokens, typography rules, spacing scales, and accessibility considerations.
  • Implementation Notes: practical rules for applying design system assets in code and components.
  • Use Case: ideal for landing pages, dashboards, admin panels, and component libraries to ensure consistency.

Quick Start

Begin by drafting a layout using the ASCII wireframe from the Design Workflow, then apply the theme tokens and typography rules to implement a cohesive UI.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create consistent frontend design guidelines for a dashboard and component library?▼

To create consistent frontend design guidelines for a dashboard and component library, standardize layout, color, typography, and motion rules. This reduces visual drift and design debt across pages by applying structured theme tokens and accessibility checks.

What's the best way to standardize typography and color tokens for cohesive UIs?▼

The best way to standardize typography and color tokens for cohesive UIs is to define theme guidelines using a structured design workflow. This ensures consistent spacing scales and accessibility considerations across landing pages and admin panels.

Can I use a structured design workflow to build accessible landing pages?▼

Yes, you can use a structured design workflow to build accessible landing pages by drafting an ASCII wireframe layout, then applying color tokens, typography rules, and accessibility checks before finalizing implementation notes.

Why does visual drift happen in frontend design and how do I reduce it?▼

Visual drift happens in frontend design when pages lack standardized theme guidelines for layout, color, and typography. You can reduce this design debt by applying a repeatable workflow with structured tokens and motion rules across all interfaces.

Do I need implementation notes to apply a design system in code components?▼

Yes, you need implementation notes to apply a design system in code components because they provide practical rules for translating layout wireframes, theme tokens, and animation guidelines into functional, cohesive UI elements.

Related Skills

Explore More Design & Creative Skills→
ProyectoG007ProyectoG007

frontend-design

Provide frontend design guidelines for layouts, themes, and animations.

Community
Intermediate
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
racciolyraccioly

frontend-design

Apply frontend-design principles to guide web UI improvements.

Community
Advanced
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate