メニュー
Parent orchestrator skill that invokes and coordinates all frontend customization workflows (branding, CSS theme tokens, Looker environment variables/constants, and opinionated Looker Brand Themes).
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | customize-frontend |
| description | Parent orchestrator skill that invokes and coordinates all frontend customization workflows (branding, CSS theme tokens, Looker environment variables/constants, and opinionated Looker Brand Themes). |
This parent skill orchestrates the end-to-end customization of the frontend portal. When a user requests to customize the UI, logo, theme colors, or Looker embed configuration, execute the appropriate sub-skills below in sequence.
graph TD
Parent["Parent Skill: customize-frontend"] --> Brand["1. Branding & Header (customize-frontend-branding)"]
Parent --> Theme["2. CSS Theme Tokens (customize-frontend-theme)"]
Parent --> Config["3. Looker Embed Config (customize-frontend-looker-config)"]
Parent --> LookerThemes["4. Opinionated Looker Themes (embed-themes)"]
customize-frontend-branding)Modify application titles, root navbar labels, route breadcrumbs, and replace the SVG or image logo.
Sidebar.tsx, Navbar.tsx, LookerLogo.tsx, constants.ts (ROUTE_BREADCRUMB_MAPPINGS).customize-frontend-theme)Modify frontend design system tokens (primary/accent HSL colors, Google Fonts, spacing, border radii, shadows).
styles.css.customize-frontend-looker-config)Update Looker instance endpoints, default dashboard IDs, explore paths, conversational analytics agent IDs, and role permissions (ROLE_PERMISSIONS).
.env, constants.ts.mcp_looker_get_dashboards, mcp_looker_get_explores, mcp_looker_get_models) to discover valid IDs before updating targets.embed-themes)Ensure Looker instance themes follow the opinionated brand setup pattern with sanitization (spaces converted to underscores, non-alphanumeric removed):
BRAND_OPTIONS (e.g. Levi's, Calvin Klein, Allegra K), create/manage corresponding sanitized themes in Looker:
<clean_brand>_Light (e.g. Levis_Light, Calvin_Klein_Light, Allegra_K_Light)<clean_brand>_Dark (e.g. Levis_Dark, Calvin_Klein_Dark, Allegra_K_Dark)${clean_brand}_Light or ${clean_brand}_Dark based on the user's selected brand and active color scheme, falling back to VITE_THEME if not defined.After executing any frontend customization step:
pnpm run build inside frontend/ to confirm zero build errors.This skill enables agents to assist users in programmatically creating, updating, and managing Looker themes using the Looker API. Use this when you need to automate visual styling, implement brand-specific themes, or manage instance-wide default themes.
Detailed guidelines and mandatory workflows for localizing LookML models, views, explores, and dashboards, including string catalog creation and deployment via lkr-dev-cli.
Parent orchestrator skill for coordinating full-stack internationalization and localization across LookML models/dashboards and the React frontend application.
Comprehensive standards, UI design principles, tabbed report architecture, and automation patterns for creating and managing modern LookML dashboards using local LookML files and Looker MCP/CLI tools.
Analyzes a specific LookML dashboard (e.g., brand_lookup.dashboard.lookml), extracts all query elements and merge results, verifies them via run_inline_query(result="sql"), and self-heals missing LookML fields by iteratively adding best-guess calculations to local LookML views.
Standards, workflow rules, and helper patterns for managing LookML files in the Looker project using the `lkr-dev-cli` CLI tool, including full project and single-file push/pull synchronization and production deployment.