| 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:
- Load
$get-design if there is a style signal.
- 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.
- 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:
- Load
$get-design if there is a style signal or brand-like direction.
- 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.
- 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.
