Skills
.Work. You
Rest

frontend-design-fundamentals

Community

Build beautiful, consistent UI foundations.

Design & Creative#typography#design#accessibility#frontend#ui-design#spacing#color-contrast
Authorphananhtuan09
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: frontend-design-fundamentals
Download link: https://github.com/phananhtuan09/ai-agent-workflow/archive/main.zip#frontend-design-fundamentals

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.