frontend-studio

name	frontend-studio
description	Use when Codex is asked to create, redesign, or improve frontend websites, landing pages, app UIs, dashboards, admin screens, components, prototypes, or browser-based presentation decks, especially when the request mentions a brand, color palette, visual mood, industry, or polished UI/UX.

Frontend Studio

Purpose

Create polished frontend artifacts by orchestrating the existing design skills instead of re-inventing their guidance. Treat web UI as the default lane, and handle browser-based presentation decks only when the user explicitly asks for a presentation, deck, pitch, or PPT/PPTX conversion.

Primary outputs:

• Web UI: websites, landing pages, dashboards, app screens, admin panels, components, prototypes.
• Presentation decks: HTML presentations, pitch decks, conference/internal decks, PPT/PPTX-to-web conversions.

Resolve the local skills root as ${CODEX_HOME:-$HOME/.codex}/skills.

Route

First classify the requested artifact:

User asks for	Primary lane
Website, web app, landing page, dashboard, admin, component, UI redesign	Web UI
Deck, pitch deck, presentation, PPT/PPTX conversion, PDF export from a deck	Presentation Deck
Both a webpage and a deck	Build the webpage first unless the user gives a deadline/order; then build the deck from the final page/story

Do not load every supporting skill by default. Load only the smallest set that proves useful for the current artifact.

Supporting Skills

Shared visual direction

Load $get-design (get-design/SKILL.md) when the request includes a company, product family, color, mood, industry, or phrase like "Stripe style", "developer docs 느낌", "검정 럭셔리", "보라색 핀테크". Use one primary reference. Blend a second only if the user asks for a hybrid.

Skip $get-design when modifying an existing product with a clear established design system unless the user explicitly wants a new visual direction.

Web UI lane

For websites, apps, dashboards, landing pages, or components:

1. Load $get-design if there is a style signal.
2. Load $ui-ux-pro-max (ui-ux-pro-max/SKILL.md) for design-system recommendations, UX/accessibility rules, stack-specific guidance, charts, forms, responsive layout, and QA checklists.
3. Load $frontend-design (frontend-design/SKILL.md) for distinctive visual execution and production-grade implementation.

Use $ui-ux-pro-max as the quality guardrail and $frontend-design as the creative implementation guide. Preserve existing app conventions when editing a repo.

Presentation deck lane

For presentations, decks, or PPT/PPTX conversions:

1. Load $get-design if there is a style signal or brand-like direction.
2. Load $frontend-slides (frontend-slides/SKILL.md) as the owner of slide architecture, viewport fitting, navigation, inline editing, PPT conversion, PDF export, and deployment rules. This skill is installed locally at /Users/frappuchanee/.agents/skills/frontend-slides/SKILL.md.
3. Load $ui-ux-pro-max only when the deck has dense data, forms, charts, accessibility concerns, or needs a stricter typography/color pass.

Do not use $frontend-design to override $frontend-slides viewport and density rules. Slide content must fit 100vh/100dvh; split overflowing content into more slides.

Execution Rules

• Build the actual usable artifact, not an explanation page.
• Prefer the current repo's stack, component system, icons, and patterns.
• Avoid new dependencies unless the user explicitly asks or the repo already uses them.
• Use real visual assets when they materially improve websites, games, product pages, or decks.
• For existing codebases, inspect the current structure before editing.
• For standalone HTML that works directly in the browser, deliver the HTML path. For app projects that need a dev server, start it and provide the local URL.
• Verify visual work with build/lint/tests when available, and with browser or screenshot checks when rendering quality matters.

Output Contract

When done, report:

• Artifact path or local URL.
• Chosen lane and supporting skills loaded.
• Visual reference used, if any.
• Verification performed and any gaps.