Auteur

Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products (app, dashboard, admin, settings, onboarding, docs site) built as one design system with every component, state and route in one style. Use whenever the user wants to create or redesign a landing page, website, hero section, portfolio, promo or product page; wants scroll animations, storytelling pages, or a site that feels like a movie; or says "make it beautiful", "make it wow", "cinematic", or "desi

1,046 stars 18 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add agiwhitelist/auteur --skill auteur
Manual install
git clone --depth 1 https://github.com/agiwhitelist/auteur.git /tmp/auteur
mkdir -p ~/.claude/skills
cp -r /tmp/auteur/. ~/.claude/skills/auteur

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

Auteur designs and builds web experiences the way a film director makes a film: script first, then assets, then the shoot, then the cut. It has three registers — **build** (an excellent conventional site), **direct** (a cinematic scroll-directed site) and **system** (a multi-screen product as one design system) — on one shared core of taste. Nothing ships until the page passes an executable anti-slop gate and the skill has looked at its own output.

### Use this when

- A landing page, marketing site, hero section, portfolio or product page has to be **built or redesigned** — and looking generic is not acceptable.
- The brief asks for **scroll animation, storytelling, or a site that feels like a film**.
- A product spans **several screens that must feel like one thing** — app, dashboard, admin, onboarding, docs.
- Someone says *make it beautiful*, *make it wow*, *cinematic*, or *design system*, naming no technique.

Not for polishing a UI someone else built, and not for backend-only work.

### What it actually does

1. Commits the art direction **in writing before any markup** — one hue, one type system, a motion budget, named anti-references.
2. Generates or sources the assets: local image/video CLIs, Blender, depth maps, CC0 meshes and HDRIs with their licences recorded.
3. Builds from proven recipes — one WebGL context, transform/opacity motion, scroll state machines.
Read the full skill on GitHub

Details

Skill name
auteur
License
MIT
Repo updated
6 August 2026

FAQ

What does the Auteur skill do?

Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products (app, dashboard, admin, settings, onboarding, docs site) built as one design system with every component, state and route in one style. Use whenever the user wants to create or redesign a landing page, website, hero section, portfolio, promo or product page; wants scroll animations, storytelling pages, or a site that feels like a movie; or says "make it beautiful", "make it wow", "cinematic", or "desi

How do I install the Auteur skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add agiwhitelist/auteur --skill auteur. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Auteur popular?

It lives in agiwhitelist/auteur, which has 1,046 GitHub stars and 18 forks, and is included in 2 curated skill lists.

Related skills

Motionmaxxing

1.2k

Tejashmakwana/motionmaxxing

Direct and build professional motion-graphics films (launch videos, product promos, feature reveals, brand stings, kinetic-type pieces, social ads, CTAs) that read as made by a senior motion designer, not AI slop. Finds an idea only this brand could own (from its logo, control, material, verb, voice), builds a world for it (ground, light, depth, texture, 3D or generated image surfaces for the hero moment), then builds with a seek-safe GSAP runtime driven by curves measured frame by frame from 53 professional recreations, and reviews its own render honestly with scripted gates (look.py, lint.mj

Frontend & Design112

Pretty Mermaid

1.6k

imxv/Pretty-mermaid-skills

Generate and render Mermaid diagrams for architecture docs, READMEs, PRs, terminals, chats, and CI as themed SVG, PNG, or ASCII/Unicode art. Use this skill whenever the user provides Mermaid code or .mmd files; asks for a flowchart, sequence/state/class diagram, ERD, XY chart, or architecture/workflow/data-model visualization; or wants to beautify, theme, batch-convert, or make a diagram terminal-friendly. Runs locally without a browser or DOM, with 15 built-in themes and custom colors.

Frontend & Design77

Web Clone

1.1k

Jane-xiaoer/claude-skill-web-clone

网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支,并强制核对任何 AI 二手分析里的可执行代码。

Frontend & Design133

Zhengxi Views

1.8k

lyra81604/zhengxi-views

郑希观点库——基于易方达基金经理郑希 2012–2026 年全部公开观点原文语料,外加从语料蒸馏、有本人原话佐证的郑希投资方法的可溯源 research skill。能做: (1) 溯源问答——他怎么看 AI算力/光通信/新能源/半导体/ROE 等,引用其原话作答; (2) 讲解他的投资方法/框架/选股逻辑;(3) 前瞻应用——用他的方法分析当下任意主题/行业/个股,语料没谈过也能据框架推演; (4) 风格化点评——用他季报/手记的口吻写市场点评、季度展望; (5) 言行对照——用他全部基金真实数据(季度持仓/净值/业绩/规模/任职回报)核对"说的"与"买的",或答他的业绩/重仓/规模; (6) 全市场查询对比——内置约 2.7 万只基金列表,按需抓任意基金真实数据做查询或与郑希对比; (7) 郑希框架评分——给一只基金按他的方法打分(多像郑希会买的)。 When the user mentions 郑希/易方达郑希/zhengxi, asks his view on a sector/stock/theme, his 投资方法/框架/选股/风格/持仓/业绩/净值/规模, wants to apply his approach, a commentary 用郑希口吻, to check words vs holdings, or to look up/compare/score A

Frontend & Design192

Revenue Centric Design

1k

heliocosta-dev/revenue-centric-design

Playbook for designing SaaS and startup products that convert, retain, and monetize — landing pages & CRO, checkout & forms, onboarding/activation, churn reduction, pricing psychology, dashboards, behavioral-science tactics, feature discipline, positioning/ICP, go-to-market, and AI-era differentiation. Use when advising on product design, UX, conversion, landing pages, checkout, onboarding, trials, pricing, retention/churn, growth, or positioning for a startup or SaaS. Distilled from product designer Richard (@richardrx). Not for use on gambling, betting, or casino products.

Frontend & Design70

Logo Generator

2.3k

op7418/logo-generator-skill

Generate professional SVG logos and high-end showcase images. Use when the user wants to: (1) Create a logo or icon for their product/brand, (2) Generate logo design concepts based on product information, (3) Create professional logo showcase presentations with multiple background styles, (4) Export logos in various formats (SVG, PNG), or (5) Iterate on logo designs with different visual styles. Supports geometric patterns, dot matrix designs, line systems, and mixed compositions. Generates showcase images using Nano Banana (Gemini image generation) with 12 professional background styles.

Frontend & Design177

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.