skills.rest
bibekshrestha77
bibekshrestha77COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide frontend UI decisions across components, color palettes, typography, and motion.

Updated Aug 23, 2026
Search Tags:#typography#accessibility#color#ux#design-system#motion#frontend-design
One-click install
npx skills add https://github.com/bibekshrestha77/VehicleRent --skill frontend-design-bibekshrestha77
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/bibekshrestha77/VehicleRent/tree/main/VehicleRentingSystem/.agent/skills/frontend-design
Command: npx skills add https://github.com/bibekshrestha77/VehicleRent --skill frontend-design-bibekshrestha77

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Frontend-design provides structured guidance for making consistent, accessible, and visually compelling web interfaces by applying design-thinking principles across UI components, color systems, typography, motion, and accessibility.

Core Features & Use Cases

  • Systematic approach to UI decisions including component composition, layout strategies, color and typography choices, and motion guidelines.
  • Supports design systems, component libraries, design reviews, and sprint planning by providing reusable rules and templates.
  • Example: Given a new dashboard, generate a cohesive visual system including color palette, typography scale, and motion guidelines.

Quick Start

Describe a ready-to-implement UI plan for a single dashboard page using the design system guidelines, including palette, typography scale, layout, and motion cues.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a cohesive visual system for a web UI dashboard?▼

A frontend design system ensures consistent web UI by providing structured rules for component composition, color palettes, typography scales, and motion guidelines. It guides layout strategies while satisfying UX psychology and accessibility requirements across all components.

How do I build an accessible color palette and typography scale for a component library?▼

Design an accessible component library by applying structured rules for color palettes, typography scales, and motion guidelines. The system provides templates and checklists ensuring UI components satisfy accessibility requirements and UX psychology across the entire component library.

Can I use structured design rules for UI prototyping and sprint planning?▼

Yes, structured design rules support UI prototyping and sprint planning by providing reusable templates and checklists for component composition and layout strategies. This streamlines design reviews and prototyping workflows while maintaining accessibility and UX psychology standards.

What's the best way to guide frontend design decisions across multiple UI components?▼

Guide frontend design decisions by applying a systematic approach to component composition, layout strategies, color, typography, and motion. This ensures visually compelling web interfaces while satisfying accessibility and performance requirements across all UI components.

Does this approach to frontend design work without external design dependencies?▼

Yes, this frontend design approach works without external dependencies. It provides structured rules, templates, and checklists internally to guide UI decisions across color systems, typography, motion, and accessibility without requiring additional design tools or libraries.

Related Skills

Explore More Design & Creative Skills→
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced
hjemmesidekongenhjemmesidekongen
1

design-to-code-patterns

Translate design specifications into frontend code components using design tokens.

Community
Advanced
TututuzzzzzzTututuzzzzzz

frontend-design

Generate production-grade Flutter UI starter code and design notes from user goals.

Community
Intermediate
thgtertothgterto

frontend-design

Apply structured guidelines for color, typography, motion, and accessibility in UI design.

Community
Advanced