skills.rest
phananhtuan09
phananhtuan09COMMUNITY
Explore all skills by this author →
GitHub

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

1|Updated Oct 30, 2025
Search Tags:#typography#design#accessibility#frontend#ui-design#spacing#color-contrast
One-click install
npx skills add https://github.com/phananhtuan09/ai-agent-workflow --skill frontend-design-fundamentals
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-fundamentals
Source: https://github.com/phananhtuan09/ai-agent-workflow/tree/main/.claude/skills/frontend-design-fundamentals
Command: npx skills add https://github.com/phananhtuan09/ai-agent-workflow --skill frontend-design-fundamentals

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Core design principles ensure UI implementations are beautiful, professional, and consistent, reducing drift in spacing, typography, color usage, and visual hierarchy across projects.

Core Features & Use Cases

  • Consistent spacing scale to create predictable layouts and rhythm
  • Typography hierarchy and accessible color contrast for readable UI
  • Design thinking and best practices for responsive, modern interfaces
  • Use Case: when implementing a new UI screen, apply these fundamentals to align components, grids, and visuals with the brand

Quick Start

Apply frontend-design-fundamentals to implement a responsive UI dashboard with consistent spacing, typography, and accessible color contrast.

Frequently Asked Questions about frontend-design-fundamentals

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

FAQPage Schema
How do I standardize UI visuals and ensure accessibility across frontend components?▼

To standardize UI visuals and ensure accessibility, apply consistent spacing scales, typography hierarchy, and WCAG-compliant color contrast rules to align components and enforce visual consistency across your frontend project.

What's the best way to implement a responsive UI dashboard with accessible color contrast?▼

The best way to implement a responsive UI dashboard with accessible color contrast is to apply standardized design guidelines and typography hierarchy, ensuring predictable layouts and visual rhythm across all interface elements.

Why does my frontend UI have inconsistent spacing and visual hierarchy across different screens?▼

Inconsistent spacing and visual hierarchy usually occur when frontend implementations lack standardized design guidelines, requiring a consistent spacing scale and typography rules to reduce drift across components and screens.

Can I use frontend design fundamentals to enforce WCAG-compliant color usage in my layouts?▼

Yes, you can apply these frontend design fundamentals to enforce WCAG-compliant color usage, ensuring your UI implementations maintain accessible color contrast and readable typography across responsive layouts.

Does applying a consistent spacing scale actually improve frontend UI consistency?▼

Applying a consistent spacing scale directly improves frontend UI consistency by creating predictable layouts and visual rhythm, reducing design drift across components and ensuring professional, standardized interfaces.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
0xRayAI0xRayAI

frontend-ui-ux-engineer

Apply UI/UX design principles and WCAG 2.1 AA accessibility guidelines to web interfaces.

Official
Intermediate
therealityreporttherealityreport

audit-responsive-accessibility

Audit generated UI for WCAG compliance across article and brand pages.

Community
Intermediate
Shaarav4795Shaarav4795

refactoring-ui

Audit web UI design against grayscale-first, constraint-based design principles.

Community
Advanced