skills.rest
alunadev
alunadevCOMMUNITY
Explore all skills by this author →
Website𝕏@adrianlunadiazGitHub

design-guide

Provide modern UI design guidelines for React and HTML/CSS interfaces.

3|Updated Jan 20, 2026
Search Tags:#typography#design system#color palette#frontend development#ui guidelines#css best practices
One-click install
npx skills add https://github.com/alunadev/ald-skills --skill design-guide-alunadev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/alunadev/ald-skills/tree/main/skills/design-guide
Command: npx skills add https://github.com/alunadev/ald-skills --skill design-guide-alunadev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive set of guidelines and best practices for creating modern, professional user interfaces, ensuring consistency, clean aesthetics, and excellent user experience across all digital products.

Core Features & Use Cases

  • Design Principles: Outlines core tenets like Clean & Minimal, Neutral Color Palette, Consistent Spacing, and Typography.
  • Component Patterns: Offers CSS examples for common UI elements like Buttons, Cards, Forms, and Layouts.
  • Style Guides: Details color systems, typography scales, and responsive breakpoints.
  • Use Case: When designing a new dashboard or refactoring existing React components, consult this guide to ensure adherence to established design standards for spacing, colors, and typography.

Quick Start

Apply the design-guide principles to ensure consistent spacing and typography in the new user profile component.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I maintain consistent spacing and typography in a React component library?▼

Maintain consistent spacing and typography in a React component library by applying standardized design system guidelines that enforce uniform spacing scales, typography rules, and neutral color palettes across all interface elements.

What are the best practices for building a clean and minimal UI for web pages?▼

Best practices for building a clean and minimal UI involve adhering to core design tenets like consistent spacing, neutral color palettes, and structured typography scales, ensuring professional aesthetics and accessibility standards across web pages.

Can I use these UI guidelines for refactoring existing HTML and CSS?▼

Yes, you can use these UI guidelines to refactor existing HTML and CSS, as they provide CSS examples for common elements like Buttons, Cards, and Forms to ensure components adhere to modern design standards.

Does this design system approach support mobile-first development?▼

Yes, this design system approach supports mobile-first development by defining responsive breakpoints and adhering to mobile-first principles, ensuring professional interfaces adapt cleanly across all digital products.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
chicongstchicongst
2

ui-design

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

Community
Intermediate
george-popescugeorge-popescu

frontend-standards

Define frontend development standards for component architecture, accessibility, and responsive design.

Community
Intermediate
Itinerant18Itinerant18

ui-ux-pro-max

Generate design systems and accessibility guidelines for web and mobile applications.

Community
Advanced