The Art of DirectionOpen-source agent skill

The web deservesDirection.

Premium Frontend Director is an open-source Agent Skill for Claude Code, Codex and compatible agents. It guides them to art-direct a frontend, build it, and prove it in a real browser against 11 named quality gates.

Install the skill Enter the scene

Beyondthe template.

Same object. New light. Direction decides what changes, and what stays.

From noiseto form.

Not another prompt for prettier buttons. A disciplined workflow that takes a project from raw material to a directed, proven experience, in five takes.

Take 01

Discover.

Read the project before touching it: routes, tokens, fonts, assets, constraints and the ambition the brief really asks for.

You getYour constraints, scoped and written down

Take 02

Direct.

Three experientially distinct directions, one chosen with reasons, and a signature moment that can be verified.

You getA creative brief with one chosen direction

AMotion labSet aside
BThe continuous takeChosen
CType tunnelSet aside

Take 03

Document.

A DESIGN.md with tokens, states, motion and acceptance criteria. The system is written down before it is built.

You getDESIGN.md in your project

Take 04

Build.

Vertical slices in your existing stack. For ambitious work the defining viewport is prototyped first, reviewed, and only then scaled.

You getA working implementation, not a mockup

Take 05

Prove.

Real browsers at 375, 768, 1440 and 1920, when browser tooling is available. Every gate is reported as pass, fail or not run.

You getGate results with evidence

Three disciplines.One direction.

Art direction
Creative concepts, typography, composition and an unmistakable point of view.
Frontend engineering
Production-minded components, semantic markup and intentional interactions.
Visual proof
Real browser inspection, device coverage and explicit quality gates. No imaginary scores.

One prompt.The whole take.

Illustrative session

Use $premium-frontend-director to redesign this frontend. Audit the current repository, select a creative ambition mode, propose three brand-appropriate directions, prototype the defining moment, implement one coherent system, review actual desktop and mobile rendering, and report objective quality gates.

Discoverframework, routes, tokens, fonts and assets inventoried
Directambition: Immersive · three directions · one chosen
DocumentDESIGN.md written: tokens, motion, fallbacks
Buildfirst viewport prototyped before the rest
Prove375 · 768 · 1440 · 1920 reviewed in a real browser
ReportG1–G11, each pass, fail or not run, with evidence

The prompt is the one suggested in the skill. The log shows the order of the workflow, not the result of a real run.

Looks are notenough.

Every run is reported against 11 named gates, each marked pass, fail or not run. Nothing is claimed without evidence.

Read the quality gates

G1Design briefAudience, goal, the chosen creative thesis, a content plan and its trade-offs.
G2Design systemA design.md with tokens, states, responsive and motion decisions.
G3Visual reviewReal browser screenshots at 375, 768, 1440 and 1920 px.
G4InteractionsKeyboard navigation, links and buttons, states, forms and the mobile menu.
G5ResponsiveNo unintended horizontal overflow; cropping and wrapping that hold up.
G6AccessibilitySemantics, contrast, focus, labels and reduced motion, with manual limits noted.
G7EngineeringThe project’s own lint, tests and build, with their actual results.
G8PerformanceMeasured load and bundle data when tools permit; otherwise not run.
G9Assets and contentAsset licences, no fabricated claims, appropriate alt text.
G10RegressionExisting business flows checked, unknowns made explicit.
G11Visual ambitionMatched before and after views and a proven signature moment. Stops a cosmetic refresh from passing as an immersive redesign.

Two choices.Set the scene.

Premium Frontend Director is an Agent Skill: instructions your coding agent reads. It is not a template, a component library or a hosted service. Core is the only required install.

Tool profile

Decides which specialist tools your agent may consult.

Default · the only required installCore.Premium Frontend Director on its own. Fully functional: not a trial and not a restricted edition.Any frontend. The fastest setup and the smallest footprint, with no companion skills.Optional · four specialistsPremium.Core plus UI UX Pro Max, Taste Skill, Impeccable and Web Design Guidelines, each installed separately.Portfolios, studios, distinctive brands and high-end launches. Skip what the project does not need.Optional · chosen by needStudio.Premium plus Design System Patterns, and framework-specific guidance only where your stack calls for it.SaaS, multi-page products and large component systems. Not an install-everything bundle.

What each tool contributes Only Premium Frontend Director is required. The rest are independent, third-party and optional.

Core
Premium Frontend DirectorRequired, in your setupThe skill itself: creative brief, three directions, DESIGN.md, implementation, browser review and the quality gates.Installed with the Skills CLI, which needs Node.js 22.20+.
Added by Premium
UI UX Pro MaxOptionalResearch: searchable style, palette and typography data to inform the direction.Has its own CLI. Python 3 is needed for its search scripts.
Taste SkillOptionalArt direction: one primary aesthetic voice for the direction phase.Skills CLI. Check upstream for its current browser and Node requirements.
ImpeccableOptionalCritique and polish: an independent review pass before sign-off.Has its own installer. Hooks are optional and need your approval.
Web Design GuidelinesOptionalUI code and UX heuristics review. It is not a Lighthouse run and not a judgement of the art.Skills CLI.
Added by Studio: choose by need
Design System PatternsOptionalDesign tokens and reusable component architecture for larger interfaces.Skills CLI.
Vercel React Best PracticesOnly if relevantReact and Next.js performance guidance. Skip it for any other stack.Skills CLI. Confirm the current skill name upstream first.
Responsive DesignOnly if relevantA specialist for when responsive layouts need one.Skills CLI.
Accessibility ComplianceOnly if relevantA dedicated accessibility specialist, when the project warrants one.Skills CLI.
Tailwind Design SystemOnly if relevantA Tailwind-specific component system. Only for projects that use Tailwind.Skills CLI.

Premium and Studio are not installed with Core. Each companion uses its own installer, and a missing companion never stops Core from running. The agent reports each one as used, not available or not needed.

Creative ambition

Decides how far the visual result should travel.

Refined.Precise, restrained and coherent. Content-led refinement for maintenance, established brands and simpler interfaces.Proof expected. Coherent typography, spacing and semantics, with a responsive browser review.Expressive.A recognisable concept, deliberate storytelling and original composition.Proof expected. A meaningful structural difference and, for a redesign, a tested signature moment.Immersive.A cinematic or spatial transformation you can feel. 3D is optional: Immersive does not mean WebGL.Proof expected. A working first-viewport prototype, a signature interaction, before and after evidence and an accessible fallback.

Independent by design.

The profile chooses tools. The ambition chooses the transformation. Any pairing is valid: Core with Immersive, Premium with Expressive, Studio with Refined. Immersive does not require Premium, and none of the ambitions requires WebGL.

Your setupCore + ExpressiveInstall it Setup: Core profile, Expressive ambition.

Make somethingmatter.

Install the skill and give your next frontend project a point of view. Open source under MIT, designed for Claude Code, Codex and other Agent Skills-compatible agents.

Your coding agent

Claude CodeCodex

Setup: Core + Expressive Change

01
Install the skill
Open a terminal in the root of your own frontend project, not in this site or the skill repository, and run:
npx skills add AVL05/premium-frontend-director --skill premium-frontend-director -a claude-code
- Needs Node.js 22.20+. That is a requirement of the installer, not of the skill.
- Choose project scope if asked. Do not add -g unless you want a global install.
- Run one install route only. Core needs nothing else: no Python, no GSAP, no Three.js.
Another agent, or the Claude Code marketplace
Any agent that recognises SKILL.md can use the skill. Run npx skills add AVL05/premium-frontend-director --skill premium-frontend-director without -a and pick your agent in the installer.
Claude Code can alternatively install it as a plugin, instead of the command above and never both. Run inside Claude Code: /plugin marketplace add AVL05/premium-frontend-director then /plugin install premium-frontend-director@premium-frontend-director-marketplace. Marketplace notes
02
Check that it is installed
List the project’s skills, open a new Claude Code session, then ask it:
npx skills list
```
List the installed project skills. Confirm whether premium-frontend-director is registered and invocable in this session. Do not change any files.
```
A folder on disk is not proof. The skill is installed when the agent itself says it is registered and invocable. If it is not, restart the agent and check that the installer targeted Claude Code at project scope. Troubleshooting

Give it a first brief

Name the skill in your prompt. This one is written for Core + Expressive:

Use $premium-frontend-director with the Core profile and Expressive ambition.
Audit this project's existing UI and goals. Propose three different art directions, implement the best-fitting one in the current framework, document design.md, inspect mobile and desktop rendering when possible, and report actual PASS / FAIL / NOT RUN quality gates. Preserve existing behavior.
Do not install anything else without permission.

The skill does not guarantee a particular result. Real-browser checks need browser tooling in your agent or project; without it those gates are reported as NOT RUN. The quality gates

04
Add companions, only if you want them
Optional, and possible at any time: the same project, nothing reinstalled. Install each one in your project with its own installer. There is no single command for all of them.
Premium: four specialists
- UI UX Pro Max. Research: searchable style, palette and typography data to inform the direction. Has its own CLI. Python 3 is needed for its search scripts.
  npx ui-ux-pro-max-cli init --ai claude
- Taste Skill. Art direction: one primary aesthetic voice for the direction phase. Skills CLI. Check upstream for its current browser and Node requirements.
  npx skills add Leonxlnx/taste-skill --skill design-taste-frontend -a claude-code
- Impeccable. Critique and polish: an independent review pass before sign-off. Has its own installer. Hooks are optional and need your approval.
  npx impeccable install
- Web Design Guidelines. UI code and UX heuristics review. It is not a Lighthouse run and not a judgement of the art. Skills CLI.
  npx skills add vercel-labs/agent-skills --skill web-design-guidelines -a claude-code
Then open a new session and ask the agent to name the skills it can actually invoke: “Name the available skills and tell me which of them you can actually invoke in this session. Do not change any files.”
Studio: design-system guidance, chosen by need
- Design System Patterns. Design tokens and reusable component architecture for larger interfaces. Skills CLI.
  npx skills add wshobson/agents --skill design-system-patterns -a claude-code
- Vercel React Best Practices. React and Next.js performance guidance. Skip it for any other stack. Skills CLI. Confirm the current skill name upstream first.
  npx skills add vercel-labs/agent-skills --list
- Responsive Design. A specialist for when responsive layouts need one. Skills CLI.
  npx skills add wshobson/agents --skill responsive-design -a claude-code
- Accessibility Compliance. A dedicated accessibility specialist, when the project warrants one. Skills CLI.
  npx skills add wshobson/agents --skill accessibility-compliance -a claude-code
- Tailwind Design System. A Tailwind-specific component system. Only for projects that use Tailwind. Skills CLI.
  npx skills add wshobson/agents --skill tailwind-design-system -a claude-code
Studio builds on Premium and is not an install-everything bundle. Pick the entries that match your stack. Profiles and prerequisites

Full installation guide Explore the skill View showcase source