skills.rest
lim010111
lim010111COMMUNITY
Explore all skills by this author →
GitHub

google-calendar-addon-ui-ux

Build Google Calendar Add-ons with CardService UI and event lifecycle patterns.

1|Updated Apr 9, 2026
Search Tags:#calendar#ui-design#google-workspace#design-guidelines#ux-patterns#addon#cardservice
One-click install
npx skills add https://github.com/lim010111/autocolor-calendar --skill google-calendar-addon-ui-ux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: google-calendar-addon-ui-ux
Source: https://github.com/lim010111/autocolor-calendar/tree/main/.gemini/skills/google-calendar-addon-ui-ux
Command: npx skills add https://github.com/lim010111/autocolor-calendar --skill google-calendar-addon-ui-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill governs the design and implementation of Google Calendar Add-ons using Google's CardService API. It ensures Calendar-specific constraints, event lifecycle patterns, and component architecture are consistently applied across projects.

Core Features & Use Cases

  • Calendar Add-on fundamentals: rendering inside a constrained right sidebar via CardService primitives; no HTML/CSS; use CardService widgets for consistency.
  • Design principles: respect the container width, event-driven lifecycles (homepage, eventOpen, eventUpdate), contextual awareness, and asynchronous UX patterns.
  • Best practices: use CardService navigation, FixedFooter for primary actions, and proper context data usage in event scenarios.

Quick Start

Review Calendar Add-on UI/UX guidelines and apply the recommended patterns to design or audit a Google Calendar add-on.

Frequently Asked Questions about google-calendar-addon-ui-ux

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

FAQPage Schema
How do I build a Google Calendar Add-on UI without HTML or CSS?▼

Build Google Calendar Add-on interfaces using native CardService primitives instead of HTML or CSS to ensure UI consistency within the constrained right sidebar. This approach enforces design principles across event lifecycle states for reliable user experiences.

What are the event lifecycle states for Google Calendar Add-ons?▼

Google Calendar Add-on event lifecycle states include homepage, eventOpen, and eventUpdate. Designing for these context-aware states ensures your add-on properly handles contextual data and asynchronous UX patterns during user interactions.

How do I configure primary actions in a Calendar Add-on using CardService?▼

Configure primary actions in Calendar Add-ons by applying the CardService FixedFooter pattern. This design practice ensures reliable user experiences by enforcing proper card composition and navigation constraints defined by Google's Add-ons API.

Can I use custom web components inside the Google Calendar Add-on sidebar?▼

Custom web components are not supported inside the Google Calendar Add-on sidebar. You must use CardService widgets exclusively to respect container width constraints and avoid web UI inconsistencies inherent in custom HTML rendering.

Why does my Google Calendar Add-on display inconsistently across different event states?▼

Inconsistent Google Calendar Add-on displays often result from improper context data usage and ignoring event-driven lifecycle patterns. Applying CardService navigation and fixed footer patterns ensures consistent rendering across homepage, eventOpen, and eventUpdate contexts.

What is the best way to design Google Workspace add-ons for Calendar?▼

The best way to design Google Workspace add-ons for Calendar is adhering to Google's Add-ons API constraints using CardService. This enforces design guidelines, proper card composition, and navigation patterns to avoid web UI inconsistencies across event lifecycles.

Related Skills

Explore More Design & Creative Skills→
Open-CuriosityOpen-Curiosity
1.7k

google-forms

Create and manage Google Forms and read submitted responses.

Official
Intermediate
whichguywhichguy
2

gas-gmail-cards

Review CardService Gmail add-on code and architecture in Google Apps Script.

Community
Intermediate
run6270run6270
1

gws-apps-script

Manage Google Apps Script projects and monitor script executions.

Community
Intermediate
lim010111lim010111
1

review-calendar-addon

Review Google Calendar Add-on code for CardService API compliance and UI/UX guidelines.

Community
Advanced