How do I install the Frontend Design skill?

Run npx skillmds@latest add majiayu000/frontend-design-44 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Frontend Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend Design?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend Design by majiayu000 — Agent Skill

Name: Frontend Design
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

Frontend Design Skill

Overview

This skill provides universal patterns for front-end design, UI/UX, and usability. It is technology-agnostic and focuses on principles, layout, accessibility, and user experience for any web or mobile interface.

When to Use

Designing or reviewing user interfaces (web/mobile)
Creating or maintaining design systems and style guides
Improving accessibility, usability, or visual consistency
Planning responsive/adaptive layouts

Critical Patterns

Layout & Spacing

Use a consistent spacing system (tokens, scale)
Align elements to a grid or baseline
Group related content visually

Color & Contrast

Ensure sufficient contrast for text and UI elements
Use color intentionally for meaning, not decoration
Provide alternatives for color-only cues

Typography

Limit font families and sizes for clarity
Use hierarchy (headings, body, captions) for structure
Ensure readable line length and spacing

Accessibility

Use semantic HTML or native components
Provide ARIA labels and roles where needed
Ensure keyboard and screen reader navigation

Responsiveness

Design for multiple breakpoints and device types
Use fluid layouts and flexible images
Test with real content and edge cases

Decision Tree

New component? → Follow design tokens and spacing system
Accessibility needed? → Use semantic elements and ARIA
Responsive? → Use media queries or adaptive layouts
Visual bug? → Check contrast, spacing, and alignment

Edge Cases

Color contrast for vision impairments
Touch target sizing for mobile
Internationalization (RTL, long text)
Overlapping or hidden content on small screens

Practical Examples

Before (inconsistent spacing)

Elements are randomly spaced, making the UI look cluttered.

After (consistent spacing)

All elements use an 8px spacing scale, aligned to a grid, improving clarity and balance.

Before (poor contrast)

Light gray text on white background.

After (accessible contrast)

Text uses #222 on #fff, passing WCAG AA contrast.

References

Use with conventions, a11y, and technical-communication for best results.

---name: frontend-design-44description: Front-end design patterns and best practices. UI/UX principles, layout, color, typography, and interaction. Trigger: When designing user interfaces, creating design systems, or improving usability.--- # Frontend Design Skill ## Overview This skill provides universal patterns for front-end design, UI/UX, and usability. It is technology-agnostic and focuses on principles, layout, accessibility, and user experience for any web or mobile interface. ## When to Use - Designing or reviewing user interfaces (web/mobile) - Creating or maintaining design systems and style guides - Improving accessibility, usability, or visual consistency - Planning responsive/adaptive layouts ## Critical Patterns ### Layout & Spacing - Use a consistent spacing system (tokens, scale) - Align elements to a grid or baseline - Group related content visually ### Color & Contrast - Ensure sufficient contrast for text and UI elements - Use color intentionally for meaning, not decoration - Provide alternatives for color-only cues ### Typography - Limit font families and sizes for clarity - Use hierarchy (headings, body, captions) for structure - Ensure readable line length and spacing ### Accessibility - Use semantic HTML or native components - Provide ARIA labels and roles where needed - Ensure keyboard and screen reader navigation ### Responsiveness - Design for multiple breakpoints and device types - Use fluid layouts and flexible images - Test with real content and edge cases ## Decision Tree - New component? → Follow design tokens and spacing system - Accessibility needed? → Use semantic elements and ARIA - Responsive? → Use media queries or adaptive layouts - Visual bug? → Check contrast, spacing, and alignment ## Edge Cases - Color contrast for vision impairments - Touch target sizing for mobile - Internationalization (RTL, long text) - Overlapping or hidden content on small screens ## Practical Examples ### Before (inconsistent spacing) > Elements are randomly spaced, making the UI look cluttered. ### After (consistent spacing) > All elements use an 8px spacing scale, aligned to a grid, improving clarity and balance. ### Before (poor contrast) > Light gray text on white background. ### After (accessible contrast) > Text uses #222 on #fff, passing WCAG AA contrast. ## References - Use with conventions, a11y, and technical-communication for best results.

Frequently asked questions

Frontend Design