skills.rest
penghang1223
penghang1223COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Define frontend design guidelines for theming, layout, responsiveness, and accessibility.

1|1|Updated Mar 25, 2026
Search Tags:#typography#accessibility#frontend#color#ui-design#design-systems
One-click install
npx skills add https://github.com/penghang1223/niannian-workspace --skill frontend-design-penghang1223
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/penghang1223/niannian-workspace/tree/main/skills/superdesign
Command: npx skills add https://github.com/penghang1223/niannian-workspace --skill frontend-design-penghang1223

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a cohesive set of frontend design guidelines to help teams create consistent, accessible, and visually appealing user interfaces across products.

Core Features & Use Cases

  • Design System Foundations: Establish color palettes, typography scales, spacing rules, and component patterns to ensure consistency across pages and apps.
  • Practical Playbooks: Workflows for layout, theming, animation, and responsive behavior that translate into actionable design decisions.
  • Use Case: When building a dashboard, apply these guidelines to ensure a cohesive look and predictable interactions, reducing design debt and ramp time for new components.

Quick Start

Follow the workflow to outline a layout, define a theme, and implement the UI according to the guidelines.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I establish a frontend design system for consistent UI components?▼

To establish a frontend design system, define foundational color palettes, typography scales, and spacing rules. This creates a cohesive set of guidelines ensuring visual consistency across landing pages, dashboards, and UI components.

What are the best practices for building accessible and responsive web layouts?▼

Building accessible and responsive web layouts requires applying specific responsive patterns and accessibility checks. Following frontend design guidelines ensures modern interfaces adapt predictably across devices while meeting necessary accessibility standards.

Can I use these design guidelines for both landing pages and dashboards?▼

Yes, you can use these design guidelines for both landing pages and dashboards. The guidelines are applicable to any frontend design task, providing actionable workflows for layout, theming, and responsive behavior across diverse UI formats.

How does theming work within modern UI design guidelines?▼

Theming works by defining a structured color system that translates into actionable design decisions. Applying these frontend guidelines helps establish a cohesive look and predictable interactions, effectively reducing design debt across your product.

What do I need to define before implementing a new UI component?▼

Before implementing a new UI component, you need to define color systems, typography scales, and spacing rules. Establishing these design system foundations ensures consistency and reduces ramp time for building modern, accessible UIs.

Related Skills

Explore More Design & Creative Skills→
AesopScottAesopScott
1

phase-alignment

Establish the MAPS lifecycle structure by agreeing on phase names, order, and scope.

Community
Advanced
guideopsguideops

contemporary

Generate design system guidelines with modern minimalist and WCAG 2.2 AA accessibility standards.

Community
Advanced
erichowenserichowens
181

windows-3-1-web-designer

Convert modern web interfaces into Windows 3.1 aesthetics with beveled borders and system-gray palettes.

Community
Advanced
zeroix07zeroix07

visual-design-foundations

Generate accessible design token systems with typography scales and 8-point spacing grids.

Community
Intermediate