Frontend Super

Frontend Super-Skill v2.0

Distinctive design requires explicit constraints. ~400 tokens of focused guidance dramatically improves output. GSD orchestrates the workflow; this skill provides the design domain expertise.

Philosophy

1. Anti-AI-slop: Without explicit direction, output converges to Inter font, purple gradients, 3-column cards. Every project needs a BOLD aesthetic commitment BEFORE coding.
2. Progressive disclosure: This skill has 14 reference files. NEVER load all at once. Load only what the current task needs.
3. Structured evaluation: Design quality is scored 0-100 per category with JSON output. Not subjective "looks good."
4. Performance is design: A beautiful site that takes 5s to load is a failure. CSS-first animation, Islands architecture, and native browser APIs replace heavy JS libraries wherever possible.
5. Creative disruption: Before design brainstorming, inject creative seeds to break pattern-thinking. Read ~/.claude/skills/creative-seeds/seeds.md and pick 3 random seeds for cognitive disruption.
6. Honest ceiling: For brand expression, emotional resonance, and cultural sensitivity, flag for human designer review. AI excels at 80% of implementation; the 20% requiring human judgment should be identified, not hidden.

Before Any Visual Work

STOP. Do these steps before writing any visual code:

Recommended: Run /design-intake First

The /design-intake command uses guided questions (AskUserQuestion) to configure the skill optimally:

• 4 context questions determine: work type, design direction, quality target, RTL needs
• 1-2 follow-up questions narrow the specifics based on context
• Auto-configures: which references to load, command sequence, score thresholds
• Then executes — no additional confirmation needed

This is the MOST EFFICIENT way to use this skill. It prevents loading unnecessary references and gives you a tailored execution plan.

Manual Alternative (if you skip intake):

1. Commit to ONE aesthetic direction — Not "clean and modern." Be specific: "warm editorial with serif headlines, cream backgrounds, watercolor textures, and staggered scroll reveals."

2. Ask: "What makes this UNFORGETTABLE?" — If you can't answer, the direction isn't bold enough.

3. Check for <frontend_aesthetics> block in the project's CLAUDE.md. If present, follow it strictly. If absent, create one using templates/aesthetics-block.md.

4. If reference URL provided: Run /extract-reference [URL] to extract principles.

Minimal Aesthetics Block (always enforce)

xmlCopy code
<frontend_aesthetics>
No AI slop. Ban Inter/Roboto/Arial. Extreme weight contrast (200 vs 800).
Size jumps 3x+. 8pt spacing grid. Internal <= external spacing.
OKLCH colors. Tinted neutrals. One orchestrated animation moment.
prefers-reduced-motion. Max 0.6s UI animations.
CSS-first: scroll-driven animations, View Transitions, anchor positioning before JS.
</frontend_aesthetics>

Design System Quick Reference

Typography

• BANNED: Inter, Roboto, Arial, Open Sans, system-ui (as primary)
• Required: Weight contrast 200 vs 800/900 (never 400 vs 600)
• Required: Size jumps 3x+ for headings (not 1.5x)
• Preferred: Variable fonts (single file, continuous weight/width range, smaller payload)
• Hebrew: No letter-spacing. No italics. Line-height 1.7-1.8.
• Full reference: references/typography-system.md

Spacing

• Base: 8pt grid (4, 8, 12, 16, 24, 32, 48, 64, 96, 128)
• CRITICAL: Internal spacing <= external spacing (Gestalt proximity)
• Sections: 48-64px minimum between page sections
• Full reference: references/spacing-system.md

Color

• Rule: 60/30/10 (dominant, secondary, accent)
• Required: Tinted neutrals (never pure gray)
• Required: WCAG AA contrast (4.5:1 body, 3:1 large)
• Preferred: OKLCH color space (perceptually uniform)
• Full reference: references/color-system.md

Motion & Animation

• Focus: ONE orchestrated moment per section, not scattered animations
• CSS-first: Use CSS scroll-driven animations and View Transitions API before reaching for JS libraries
• Libraries: Motion (formerly Framer Motion, MIT) for React; GSAP for complex timelines; Lenis (3KB) for smooth scroll
• Limits: Max 0.6s UI, 1.2s decorative. Transform + opacity only.
• Required: prefers-reduced-motion support
• Full reference: references/motion-system.md

CSS 2026 (NEW)

• Production-ready: CSS nesting, :has(), container queries, scroll-driven animations, View Transitions
• Progressive enhancement: @scope, anchor positioning, if(), CSS masonry
• Rule: Prefer native CSS features over JS libraries — smaller bundle, better performance
• Full reference: references/css-2026.md

Reference Router

Load ONLY the reference file needed for your current task:

Commands

Start Here

Design Evaluation

Design Critique & Polish

Development

Mobile UX

RTL/Hebrew

Build-Verify-Iterate Loop

The core workflow for any visual frontend work:

Copy code
Build initial version
       |
       v
/evaluate-design  -->  JSON score (0-100)
       |
   Score >= 70?
   /        \
  YES        NO
   |          |
   v          v
 /polish    /progressive-refine
   |        (Layout > Typo > Color > Space > Motion)
   v          |
  DONE        v
          /evaluate-design again
              |
          Score >= 70 or 3 iterations?
          /        \
         YES        NO
          |          |
          v          v
        /polish    Flag for human review
          |
          v
         DONE

Visual Feedback Setup (from frontend-pro)

Claude Code cannot see the browser by default. Choose the right tool:

Critical: Say "use playwright MCP" explicitly the first time, or Claude may run Playwright via Bash instead.

Full reference: references/visual-feedback.md

Context Management (from frontend-pro)

When to /clear

• Between unrelated tasks (always)
• After correcting Claude 2+ times on the same issue
• At ~80% context utilization
• When Claude asks about things already discussed

Document & Clear (preferred over /compact)

The automatic compression is opaque and loses important details:

1. "Write your current plan and progress to PROGRESS.md"
2. /clear
3. "Read PROGRESS.md and continue"

Animation Stack — Decision Matrix

Rule: Always try CSS-native first. Add JS libraries only when CSS can't achieve the effect.

MediaWave Landing Page Integration

This skill integrates bidirectionally with ~/.claude/skills/mediawave-landing-page.

When MediaWave activates frontend-super:

What frontend-super gains from MediaWave:

• Client workflow pipeline (proposal, discovery, content collection, handoff) — use MediaWave when building for a client
• Hebrew copywriting patterns (StoryBrand, PAS/AIDA/4U variants) — load from MediaWave's references/phase-4-copy.md
• SEO implementation (10 reference files + 5 scripts) — load from MediaWave's references/seo/
• Israeli legal compliance (accessibility statement, privacy policy, terms) — load from MediaWave's templates/
• Font research agent — MediaWave has a dedicated agent that searches beyond standard Hebrew fonts
• Animation research agent — MediaWave has an agent that sources industry-specific animations

Cross-Reference Rule:

• If the user is building a client landing page: suggest MediaWave skill first
• If the user is building any frontend component/app: use frontend-super
• Both can coexist — MediaWave handles business pipeline, frontend-super handles design quality

Performance-First Design

Performance is not optional polish — it's a design constraint.

CSS-First Replacement Matrix

Performance Targets (2026)

Architecture for Speed

• Islands Architecture (Astro): Ships 0-15KB JS vs 85-250KB for typical Next.js
• Variable fonts: Single file replaces 4-6 weight files
• CSS-first animation: Zero JS overhead for scroll effects
• AVIF/WebP images: 50-80% smaller than JPEG/PNG

Full reference: references/performance-optimization.md

3D Web Quick Reference

Performance: Draco compression = 90-95% geometry reduction. KTX2 = ~10x GPU memory reduction. LOD = 30-40% frame rate improvement.

Full reference: references/3d-web.md

Design Trends That Stand Out (2025-2026)

Reference these when committing to an aesthetic direction:

1. Kinetic Typography — Text that reacts to cursor, scroll, or audio. Hero identity, not decoration.
2. Exaggerated Typographic Hierarchy — Dramatically oversized type (200px+) juxtaposed with 14px text.
3. Motion as Brand Identity — Consistent easing curves, timing, and interaction patterns as recognizable as the logo.
4. Scroll-Driven Storytelling — Narrative flow replacing "sections stacked on a page."
5. Dopamine Design — Bright, saturated Y2K-inspired palettes replacing muted minimalism.
6. 3D Product Experiences — Interactive models, scroll-triggered 3D, AR previews.
7. Context-Aware Micro-Animations — Animations responding to user behavior, not fixed timelines.

Benchmark: Lando Norris site — Awwwards 2025 Site of the Year.

Built on Webflow + GSAP: reactive blob overlays, fluid animated background, GSAP-driven transitions, optimized despite rich animation.

Component Library Recommendations

Rule: Own your components. Use shadcn-style "copy into your project" approaches. Design tokens as the foundation — change the tokens, change the entire system.

GSD Integration

When used with GSD orchestration, this skill auto-activates as a Frontend Domain Profile.

How it works:

1. During gsd init / gsd discuss: GSD detects frontend keywords in PROJECT.md
2. Offers frontend domain consultation with 5 targeted questions
3. Saves design decisions to CONTEXT.md ## Domain Decisions section
4. During gsd plan: Task templates reference specific frontend-super references
5. During gsd execute: Each task loads only the relevant reference files
6. During gsd verify: Frontend verification checklist is appended to standard checks

Integration files:

• gsd-integration/frontend-domain-profile.md — Detection, questions, routing
• gsd-integration/task-templates.md — XML task templates for PLAN-X.md
• gsd-integration/verify-checklist.md — Frontend verification checklist

Context engineering:

• NEVER load all references at once (violates GSD context engineering principles)
• Each task loads: SKILL.md (~400 lines) + 1-2 reference files (~200-500 lines each)
• Total context per task: ~900 lines (~1200 tokens) — well within GSD budget

Production Readiness Cross-Reference

For production deployment validation, use the production-first skill:

• ~/.claude/skills/production-first — Security, RLS, auth, CI/CD checklists
• Run /prod-check before any deployment
• Integrates with GSD workflow

For systematic performance optimization, the performance-optimization reference in this skill covers:

• 6-phase optimization workflow (from pagespeed-optimizer skill, integrated here)
• Core Web Vitals targets and measurement
• Bundle analysis and code splitting
• Full reference: references/performance-optimization.md

RTL Mode

When the project has dir="rtl" or is a Hebrew project:

1. Always load references/rtl-hebrew.md alongside any other reference
2. CSS logical properties ONLY — no margin-left/right, padding-left/right
3. Hebrew typography: no letter-spacing, no italics, line-height 1.7-1.8
4. Font stack: Hebrew font first (Heebo, Rubik, Assistant, Alef, or custom)
5. Animations: Enter from RIGHT (x: -20 instead of x: 20)
6. Before committing: Run /rtl-validate to catch violations

Mobile UX Mode

When building mobile-first UI or optimizing for touch devices:

1. Always load references/mobile-ux.md as the primary mobile reference
2. Thumb zone design: Primary CTAs in bottom 30% of viewport
3. Touch targets: Minimum 44x44px (48px preferred), 8px spacing between targets
4. Safe areas: viewport-fit=cover meta tag + env(safe-area-inset-*) on fixed elements
5. Typography: font-size: 1rem (16px) minimum for body AND inputs (prevents iOS zoom)
6. Viewport height: Use 100dvh instead of 100vh (fixes mobile Safari)
7. Performance: Target < 500KB initial load, LCP < 2.5s on 4G
8. Before shipping: Run /mobile-audit for structured mobile quality scoring (0-100)

Mobile + RTL:

For Hebrew/Arabic mobile projects, load BOTH references/mobile-ux.md AND references/rtl-hebrew.md. The mobile reference includes a dedicated RTL Mobile Considerations section.

Windows Compatibility

All commands in this skill use Windows-compatible syntax:

• PowerShell for shell commands (no bash, no chmod, no source)
• Backslash paths where applicable
• npx for tool execution (npx lighthouse, npx pa11y, npx tsc)
• npm run for project scripts

Templates

Quick-start files for new projects:

Limitations & Human Checkpoints

Flag for human review when:

• Brand expression requires emotional resonance beyond technical implementation
• Cultural context needs nuanced understanding (Hebrew idioms, regional preferences)
• Spatial layout decisions require precise visual alignment (AI spatial reasoning is limited)
• Dark mode color choices for complex component systems
• Design direction is "make it feel [emotion]" rather than "implement [specification]"

What this skill does well:

• Enforcing design system consistency
• Catching anti-patterns and accessibility issues
• Structured evaluation with quantified metrics
• Progressive refinement through staged passes
• RTL/Hebrew technical compliance
• Mobile UX auditing (thumb zones, touch targets, safe areas, performance)
• CSS 2026 feature guidance and implementation
• Performance optimization with CSS-first approach
• Animation stack selection and implementation (Motion, GSAP, Lenis, CSS-native)
• MediaWave integration for client landing pages

Memory

Cross-session learnings are stored in MEMORY.md. Commands like /evaluate-design and /audit may append notable findings there. Read MEMORY.md at session start if working on a project with previous frontend-super history.