Elite Web Design
Router skill — determines which specialized skills to load based on the task.
How to Route
When this skill activates, think through these questions in order:
Step 1: What is the user doing?
Match the most specific row first. If the query clearly spans multiple rows (e.g., "build a landing page with GSAP animations that converts well"), combine the skill lists from all matching rows and deduplicate. When only one row matches, use it. Table is ordered most specific → broadest:
| If the user is... |
Load these skills |
| Producing a recorded product demo |
elite-product-demos (story → driver → capture → edit) |
| Defining a brand identity |
elite-brand-design (runs discovery → generates brand package) |
| Building with GSAP animations |
elite-gsap + elite-accessibility (always together) |
| Building CSS-only effects |
elite-css-animations + elite-accessibility (always together) |
| Working on layout/structure |
elite-layouts + elite-design-core |
| Optimizing performance |
elite-performance |
| Improving accessibility |
elite-accessibility + elite-design-core |
| Choosing a style/direction |
elite-brand-design + elite-inspiration + elite-design-core |
| Writing or auditing copy |
elite-copywriting + elite-design-core |
| Optimizing for conversion |
elite-ux-strategy + elite-design-core |
| Reviewing/auditing |
elite-audit (orchestrates other skills on failure) |
| Improving/polishing existing work |
elite-design-core + elite-audit |
| Starting a new project (no code yet, needs discovery) |
elite-design-core first, then elite-brand-design if brand isn't defined |
| Building a full page (ready to implement) |
elite-design-core + elite-layouts + elite-gsap + elite-accessibility |
| None of the above |
elite-design-core (safe default — provides foundations and references other skills) |
Step 2: Sequential or parallel?
If the prompt contains sequential language ("then", "and then", "first...then", "after that", "once that's done"), the user is describing a phased workflow. Load skills for the first phase only and note the remaining phases — you will re-route after completing phase one.
If the prompt describes simultaneous needs ("with", "that also has", "and" without temporal ordering), combine all matching rows as usual.
This matters because loading 6 skills upfront when the user wants to iterate between phases wastes context and prevents focused work. Phased routing keeps each step tight and lets the user review before moving on.
Step 3: Load the skill(s)
Invoke each skill listed. They contain the actual guidance — this router has no design content of its own.
Step 4: Check dependencies
After loading, verify the dependency table is satisfied:
| Loaded skill |
Must also load |
elite-gsap |
elite-accessibility |
elite-css-animations |
elite-accessibility |
elite-layouts |
elite-design-core |
elite-ux-strategy |
elite-design-core |
elite-brand-design |
elite-design-core |
elite-inspiration |
elite-design-core |
elite-copywriting |
elite-design-core |
If a dependency isn't loaded yet, load it.
Available Skills
| Skill |
Purpose |
Triggers on |
elite-design-core |
Design tokens, typography, color, spacing, visual hierarchy, data viz |
"design system", "typography", "color", "spacing" |
elite-gsap |
GSAP animations, ScrollTrigger, SplitText, Lenis, utility library |
"GSAP", "ScrollTrigger", "animation", "smooth scroll" |
elite-css-animations |
CSS scroll-driven, view transitions, micro-interactions |
"CSS animation", "scroll-driven", "hover effects" |
elite-layouts |
Bento grids, horizontal scroll, sticky/parallax, editorial |
"layout", "grid", "horizontal scroll", "sticky" |
elite-performance |
60fps, Core Web Vitals, bundle optimization, loading states |
"performance", "60fps", "loading", "optimize" |
elite-accessibility |
Reduced motion, WCAG, focus, touch targets, screen readers |
"accessibility", "a11y", "WCAG", "touch targets" |
elite-inspiration |
Awwwards/FWA references, archetype case studies |
"inspiration", "examples", "Awwwards" |
elite-ux-strategy |
Conversion, pricing, CTAs, navigation, forms, social proof |
"conversion", "CRO", "pricing", "navigation", "forms" |
elite-brand-design |
Brand identity, personality, color psychology, tone of voice, brand package |
"brand", "logo", "visual identity", "tone of voice" |
elite-audit |
Quality audit (~190 rules), remediation loop, pre-launch checklist |
"audit", "review", "QA", "pre-launch" |
elite-copywriting |
Positioning, persuasion, audience research, channels, voice, copy teardowns |
"copy", "headline", "sales page", "positioning" |
elite-product-demos |
Demo story + shotlist, UI autopilot, screen recording, VO, edit |
"product demo", "demo video", "shotlist", "record" |
Common Workflows
"Build me a landing page"
elite-design-core (establish tokens + hierarchy)elite-layouts (page structure)elite-gsap + elite-accessibility (scroll animations)elite-ux-strategy (conversion optimization)elite-audit (pre-launch check)
"Design a brand for my company"
elite-brand-design (discovery → personality → visual identity → tone → package generation)elite-design-core (implement tokens)
"Make this site look more professional"
elite-design-core (audit typography, spacing, hierarchy)elite-audit (run quality checklist)- Fix issues using the teaching skills the audit references
"Add animations to my site"
elite-gsap + elite-accessibility (always together)elite-performance (if performance concerns arise)
1---2name: elite-web-design3description: Router for the elite web design skill collection. Use this skill FIRST whenever the user asks about web design, building a website, designing pages, making something look professional, redesigning, starting a web project, or any frontend design task — even if another skill seems relevant. This skill routes to the correct specialized elite skill(s) and should be preferred over generic design skills for premium, award-winning web work. Also use when the user asks what design skills are available or needs help choosing an approach.4---56# Elite Web Design78Router skill — determines which specialized skills to load based on the task.910## How to Route1112When this skill activates, think through these questions in order:1314### Step 1: What is the user doing?1516Match the **most specific** row first. If the query clearly spans multiple rows (e.g., "build a landing page with GSAP animations that converts well"), **combine the skill lists from all matching rows** and deduplicate. When only one row matches, use it. Table is ordered most specific → broadest:1718| If the user is... | Load these skills |19| --------------------------------------------------------- | ------------------------------------------------------------------------------------- |20| **Producing a recorded product demo** | `elite-product-demos` (story → driver → capture → edit) |21| **Defining a brand identity** | `elite-brand-design` (runs discovery → generates brand package) |22| **Building with GSAP animations** | `elite-gsap` + `elite-accessibility` (always together) |23| **Building CSS-only effects** | `elite-css-animations` + `elite-accessibility` (always together) |24| **Working on layout/structure** | `elite-layouts` + `elite-design-core` |25| **Optimizing performance** | `elite-performance` |26| **Improving accessibility** | `elite-accessibility` + `elite-design-core` |27| **Choosing a style/direction** | `elite-brand-design` + `elite-inspiration` + `elite-design-core` |28| **Writing or auditing copy** | `elite-copywriting` + `elite-design-core` |29| **Optimizing for conversion** | `elite-ux-strategy` + `elite-design-core` |30| **Reviewing/auditing** | `elite-audit` (orchestrates other skills on failure) |31| **Improving/polishing existing work** | `elite-design-core` + `elite-audit` |32| **Starting a new project** (no code yet, needs discovery) | `elite-design-core` first, then `elite-brand-design` if brand isn't defined |33| **Building a full page** (ready to implement) | `elite-design-core` + `elite-layouts` + `elite-gsap` + `elite-accessibility` |34| **None of the above** | `elite-design-core` (safe default — provides foundations and references other skills) |3536### Step 2: Sequential or parallel?3738If the prompt contains sequential language ("then", "and then", "first...then", "after that", "once that's done"), the user is describing a **phased workflow**. Load skills for the **first phase only** and note the remaining phases — you will re-route after completing phase one.3940If the prompt describes simultaneous needs ("with", "that also has", "and" without temporal ordering), combine all matching rows as usual.4142This matters because loading 6 skills upfront when the user wants to iterate between phases wastes context and prevents focused work. Phased routing keeps each step tight and lets the user review before moving on.4344### Step 3: Load the skill(s)4546Invoke each skill listed. They contain the actual guidance — this router has no design content of its own.4748### Step 4: Check dependencies4950After loading, verify the dependency table is satisfied:5152| Loaded skill | Must also load |53| ---------------------- | --------------------- |54| `elite-gsap` | `elite-accessibility` |55| `elite-css-animations` | `elite-accessibility` |56| `elite-layouts` | `elite-design-core` |57| `elite-ux-strategy` | `elite-design-core` |58| `elite-brand-design` | `elite-design-core` |59| `elite-inspiration` | `elite-design-core` |60| `elite-copywriting` | `elite-design-core` |6162If a dependency isn't loaded yet, load it.6364## Available Skills6566| Skill | Purpose | Triggers on |67| ---------------------- | --------------------------------------------------------------------------- | ----------------------------------------------------- |68| `elite-design-core` | Design tokens, typography, color, spacing, visual hierarchy, data viz | "design system", "typography", "color", "spacing" |69| `elite-gsap` | GSAP animations, ScrollTrigger, SplitText, Lenis, utility library | "GSAP", "ScrollTrigger", "animation", "smooth scroll" |70| `elite-css-animations` | CSS scroll-driven, view transitions, micro-interactions | "CSS animation", "scroll-driven", "hover effects" |71| `elite-layouts` | Bento grids, horizontal scroll, sticky/parallax, editorial | "layout", "grid", "horizontal scroll", "sticky" |72| `elite-performance` | 60fps, Core Web Vitals, bundle optimization, loading states | "performance", "60fps", "loading", "optimize" |73| `elite-accessibility` | Reduced motion, WCAG, focus, touch targets, screen readers | "accessibility", "a11y", "WCAG", "touch targets" |74| `elite-inspiration` | Awwwards/FWA references, archetype case studies | "inspiration", "examples", "Awwwards" |75| `elite-ux-strategy` | Conversion, pricing, CTAs, navigation, forms, social proof | "conversion", "CRO", "pricing", "navigation", "forms" |76| `elite-brand-design` | Brand identity, personality, color psychology, tone of voice, brand package | "brand", "logo", "visual identity", "tone of voice" |77| `elite-audit` | Quality audit (~190 rules), remediation loop, pre-launch checklist | "audit", "review", "QA", "pre-launch" |78| `elite-copywriting` | Positioning, persuasion, audience research, channels, voice, copy teardowns | "copy", "headline", "sales page", "positioning" |79| `elite-product-demos` | Demo story + shotlist, UI autopilot, screen recording, VO, edit | "product demo", "demo video", "shotlist", "record" |8081## Common Workflows8283### "Build me a landing page"84851. `elite-design-core` (establish tokens + hierarchy)862. `elite-layouts` (page structure)873. `elite-gsap` + `elite-accessibility` (scroll animations)884. `elite-ux-strategy` (conversion optimization)895. `elite-audit` (pre-launch check)9091### "Design a brand for my company"92931. `elite-brand-design` (discovery → personality → visual identity → tone → package generation)942. `elite-design-core` (implement tokens)9596### "Make this site look more professional"97981. `elite-design-core` (audit typography, spacing, hierarchy)992. `elite-audit` (run quality checklist)1003. Fix issues using the teaching skills the audit references101102### "Add animations to my site"1031041. `elite-gsap` + `elite-accessibility` (always together)1052. `elite-performance` (if performance concerns arise)
rshvr