skills.rest
LPDigital-Agent
LPDigital-AgentOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

Defines typography, color, motion, spacing, and accessibility requirements for frontend components.

Updated Aug 23, 2026
Search Tags:#design#frontend#components#UI#web-development#aesthetics
One-click install
npx skills add https://github.com/LPDigital-Agent/galderma-demo-trackwise --skill frontend-design-lpdigital-agent
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/LPDigital-Agent/galderma-demo-trackwise/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/LPDigital-Agent/galderma-demo-trackwise --skill frontend-design-lpdigital-agent

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams overcome the challenge of inconsistent frontend design by offering a structured approach to creating distinctive, production-grade interfaces that align with brand, accessibility, and performance goals.

Core Features & Use Cases

  • Aesthetic Direction: Establish a bold, cohesive visual direction across components, pages, and applications.
  • Implementation Guidelines: Provide concrete frontend patterns, typography choices, color systems, motion strategies, and layout principles to accelerate development.
  • Use Case: When starting a new dashboard or product page, use this Skill to define typography scale, color tokens, motion cues, and component layout before coding.

Quick Start

Provide a concise design brief: specify the target aesthetic, typography, color system, motion approach, and component patterns, then translate into frontend components.

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 consistent frontend design system for web components?▼

A structured frontend design system establishes cohesive typography scales, color tokens, motion strategies, and layout principles to ensure production-grade interfaces maintain visual consistency across pages.

What's the best way to establish aesthetic direction for a new dashboard?▼

Providing a concise design brief that specifies target aesthetics, typography scale, color tokens, and motion approach establishes a bold, cohesive visual direction for new dashboards before development.

How do I define typography and color systems for web development?▼

Defining typography and color systems involves establishing concrete frontend patterns and design tokens that dictate typographic scale and color usage, ensuring alignment with brand and accessibility goals.

Does this frontend design approach work with modern frontend frameworks?▼

Yes, this frontend design approach applies to the design and development of web components, pages, or entire dashboards across modern frontend frameworks, guiding layout and motion decisions.

How do I bridge UI design and implementation for accessible interfaces?▼

Bridge UI design and implementation by defining reusable component patterns and explicit accessibility requirements alongside spacing and motion guidelines to translate aesthetics into functional frontend components.

Related Skills

Explore More Design & Creative Skills→
JoseCortezz25JoseCortezz25
4

frontend-design

Specify typography, color tokens, motion guidelines, and atmospheric backgrounds for web interfaces.

Community
Intermediate
dev-mirzabicerdev-mirzabicer

frontend-ui-ux

Translate design briefs into production-ready frontend UI components.

Community
Advanced
dougdliudougdliu

frontend-design

Design and implement production-grade frontend interfaces with accessible, reusable components.

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate