القائمة
Guidelines and instructions for customizing application header titles, brand names, navigation breadcrumbs, and SVG or image logos in the Looker Embed Portal.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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.
| name | customize-frontend-branding |
| description | Guidelines and instructions for customizing application header titles, brand names, navigation breadcrumbs, and SVG or image logos in the Looker Embed Portal. |
This skill provides step-by-step instructions for customizing the application name, header breadcrumbs, tooltips, and logo components (SVG or image assets).
The primary brand header is rendered at the top of the sidebar in Sidebar.tsx.
Locate line 129 in Sidebar.tsx:
<span className="brand-name font-bold">Looker Embed</span>
Change "Looker Embed" to your desired brand or application name (e.g. "Levi's Portal", "Acme Analytics").
The top navigation bar displays the workspace root name and dynamic route breadcrumb in Navbar.tsx.
Locate line 16 in Navbar.tsx:
<span className="breadcrumb-root">Portal</span>
Change "Portal" to your custom root identifier.
To customize route titles shown in the navbar, update ROUTE_BREADCRUMB_MAPPINGS in constants.ts:
export const ROUTE_BREADCRUMB_MAPPINGS: Record<string, string> = {
"/": "Home",
"/dashboard": "Executive Overview",
"/conversational-analytics": "AI Assistant",
"/agents": "Custom Agents",
"/explore": "Data Explorer",
"/report-builder": "Report Builder",
};
The <LookerLogo /> component renders the brand icon used in both expanded and collapsed sidebar states.
Replace the SVG <path d="..." /> inside LookerLogo.tsx with your custom vector path:
export function LookerLogo({ className = '', ...props }: LookerLogoProps) {
return (
<svg
viewBox="0 0 24 24"
className={`looker-logo-icon ${className}`.trim()}
fill="currentColor"
width={24}
height={24}
{...props}
>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10..." />
</svg>
);
}
brand-logo.png or brand-logo.svg) inside frontend/public/.LookerLogo.tsx to render an <img> tag:export function LookerLogo({ className = '', ...props }: LookerLogoProps) {
return (
<img
src="/brand-logo.png"
alt="Brand Logo"
className={`looker-logo-icon ${className}`.trim()}
width={24}
height={24}
{...props}
/>
);
}
After updating header text or logo components:
pnpm run build in frontend/ to verify zero build or TypeScript errors.