create-modern-react 2.3.3 → 2.3.5

package/templates/base/.claude/skills/agent-browser/templates/authenticated-session.sh

@@ -1,91 +0,0 @@
-#!/bin/bash
-# Template: Authenticated Session Workflow
-# Login once, save state, reuse for subsequent runs
-#
-# Usage:
-#   ./authenticated-session.sh <login-url> [state-file]
-#
-# Setup:
-#   1. Run once to see your form structure
-#   2. Note the @refs for your fields
-#   3. Uncomment LOGIN FLOW section and update refs
-
-set -euo pipefail
-
-LOGIN_URL="${1:?Usage: $0 <login-url> [state-file]}"
-STATE_FILE="${2:-./auth-state.json}"
-
-echo "Authentication workflow for: $LOGIN_URL"
-
-# ══════════════════════════════════════════════════════════════
-# SAVED STATE: Skip login if we have valid saved state
-# ══════════════════════════════════════════════════════════════
-if [[ -f "$STATE_FILE" ]]; then
-    echo "Loading saved authentication state..."
-    agent-browser state load "$STATE_FILE"
-    agent-browser open "$LOGIN_URL"
-    agent-browser wait --load networkidle
-
-    CURRENT_URL=$(agent-browser get url)
-    if [[ "$CURRENT_URL" != *"login"* ]] && [[ "$CURRENT_URL" != *"signin"* ]]; then
-        echo "Session restored successfully!"
-        agent-browser snapshot -i
-        exit 0
-    fi
-    echo "Session expired, performing fresh login..."
-    rm -f "$STATE_FILE"
-fi
-
-# ══════════════════════════════════════════════════════════════
-# DISCOVERY MODE: Show form structure (remove after setup)
-# ══════════════════════════════════════════════════════════════
-echo "Opening login page..."
-agent-browser open "$LOGIN_URL"
-agent-browser wait --load networkidle
-
-echo ""
-echo "┌─────────────────────────────────────────────────────────┐"
-echo "│ LOGIN FORM STRUCTURE                                    │"
-echo "├─────────────────────────────────────────────────────────┤"
-agent-browser snapshot -i
-echo "└─────────────────────────────────────────────────────────┘"
-echo ""
-echo "Next steps:"
-echo "  1. Note refs: @e? = username, @e? = password, @e? = submit"
-echo "  2. Uncomment LOGIN FLOW section below"
-echo "  3. Replace @e1, @e2, @e3 with your refs"
-echo "  4. Delete this DISCOVERY MODE section"
-echo ""
-agent-browser close
-exit 0
-
-# ══════════════════════════════════════════════════════════════
-# LOGIN FLOW: Uncomment and customize after discovery
-# ══════════════════════════════════════════════════════════════
-# : "${APP_USERNAME:?Set APP_USERNAME environment variable}"
-# : "${APP_PASSWORD:?Set APP_PASSWORD environment variable}"
-#
-# agent-browser open "$LOGIN_URL"
-# agent-browser wait --load networkidle
-# agent-browser snapshot -i
-#
-# # Fill credentials (update refs to match your form)
-# agent-browser fill @e1 "$APP_USERNAME"
-# agent-browser fill @e2 "$APP_PASSWORD"
-# agent-browser click @e3
-# agent-browser wait --load networkidle
-#
-# # Verify login succeeded
-# FINAL_URL=$(agent-browser get url)
-# if [[ "$FINAL_URL" == *"login"* ]] || [[ "$FINAL_URL" == *"signin"* ]]; then
-#     echo "ERROR: Login failed - still on login page"
-#     agent-browser screenshot /tmp/login-failed.png
-#     agent-browser close
-#     exit 1
-# fi
-#
-# # Save state for future runs
-# echo "Saving authentication state to: $STATE_FILE"
-# agent-browser state save "$STATE_FILE"
-# echo "Login successful!"
-# agent-browser snapshot -i

package/templates/base/.claude/skills/agent-browser/templates/capture-workflow.sh

@@ -1,68 +0,0 @@
-#!/bin/bash
-# Template: Content Capture Workflow
-# Extract content from web pages with optional authentication
-
-set -euo pipefail
-
-TARGET_URL="${1:?Usage: $0 <url> [output-dir]}"
-OUTPUT_DIR="${2:-.}"
-
-echo "Capturing content from: $TARGET_URL"
-mkdir -p "$OUTPUT_DIR"
-
-# Optional: Load authentication state if needed
-# if [[ -f "./auth-state.json" ]]; then
-#     agent-browser state load "./auth-state.json"
-# fi
-
-# Navigate to target page
-agent-browser open "$TARGET_URL"
-agent-browser wait --load networkidle
-
-# Get page metadata
-echo "Page title: $(agent-browser get title)"
-echo "Page URL: $(agent-browser get url)"
-
-# Capture full page screenshot
-agent-browser screenshot --full "$OUTPUT_DIR/page-full.png"
-echo "Screenshot saved: $OUTPUT_DIR/page-full.png"
-
-# Get page structure
-agent-browser snapshot -i > "$OUTPUT_DIR/page-structure.txt"
-echo "Structure saved: $OUTPUT_DIR/page-structure.txt"
-
-# Extract main content
-# Adjust selector based on target site structure
-# agent-browser get text @e1 > "$OUTPUT_DIR/main-content.txt"
-
-# Extract specific elements (uncomment as needed)
-# agent-browser get text "article" > "$OUTPUT_DIR/article.txt"
-# agent-browser get text "main" > "$OUTPUT_DIR/main.txt"
-# agent-browser get text ".content" > "$OUTPUT_DIR/content.txt"
-
-# Get full page text
-agent-browser get text body > "$OUTPUT_DIR/page-text.txt"
-echo "Text content saved: $OUTPUT_DIR/page-text.txt"
-
-# Optional: Save as PDF
-agent-browser pdf "$OUTPUT_DIR/page.pdf"
-echo "PDF saved: $OUTPUT_DIR/page.pdf"
-
-# Optional: Capture with scrolling for infinite scroll pages
-# scroll_and_capture() {
-#     local count=0
-#     while [[ $count -lt 5 ]]; do
-#         agent-browser scroll down 1000
-#         agent-browser wait 1000
-#         ((count++))
-#     done
-#     agent-browser screenshot --full "$OUTPUT_DIR/page-scrolled.png"
-# }
-# scroll_and_capture
-
-# Cleanup
-agent-browser close
-
-echo ""
-echo "Capture complete! Files saved to: $OUTPUT_DIR"
-ls -la "$OUTPUT_DIR"

package/templates/base/.claude/skills/agent-browser/templates/form-automation.sh

@@ -1,64 +0,0 @@
-#!/bin/bash
-# Template: Form Automation Workflow
-# Fills and submits web forms with validation
-
-set -euo pipefail
-
-FORM_URL="${1:?Usage: $0 <form-url>}"
-
-echo "Automating form at: $FORM_URL"
-
-# Navigate to form page
-agent-browser open "$FORM_URL"
-agent-browser wait --load networkidle
-
-# Get interactive snapshot to identify form fields
-echo "Analyzing form structure..."
-agent-browser snapshot -i
-
-# Example: Fill common form fields
-# Uncomment and modify refs based on snapshot output
-
-# Text inputs
-# agent-browser fill @e1 "John Doe"           # Name field
-# agent-browser fill @e2 "user@example.com"   # Email field
-# agent-browser fill @e3 "+1-555-123-4567"    # Phone field
-
-# Password fields
-# agent-browser fill @e4 "SecureP@ssw0rd!"
-
-# Dropdowns
-# agent-browser select @e5 "Option Value"
-
-# Checkboxes
-# agent-browser check @e6                      # Check
-# agent-browser uncheck @e7                    # Uncheck
-
-# Radio buttons
-# agent-browser click @e8                      # Select radio option
-
-# Text areas
-# agent-browser fill @e9 "Multi-line text content here"
-
-# File uploads
-# agent-browser upload @e10 /path/to/file.pdf
-
-# Submit form
-# agent-browser click @e11                     # Submit button
-
-# Wait for response
-# agent-browser wait --load networkidle
-# agent-browser wait --url "**/success"        # Or wait for redirect
-
-# Verify submission
-echo "Form submission result:"
-agent-browser get url
-agent-browser snapshot -i
-
-# Take screenshot of result
-agent-browser screenshot /tmp/form-result.png
-
-# Cleanup
-agent-browser close
-
-echo "Form automation complete"

package/templates/base/.claude/skills/autoskill/skill.md

@@ -1,134 +0,0 @@
----
-name: autoskill
-description: Analyze coding sessions to detect corrections and preferences, then propose targeted improvements to Skills used in the session. Use this skill when the user asks to "learn from this session", "update skills", or "remember this pattern". Extracts durable preferences and codifies them into the appropriate skill files.
-license: Complete terms in LICENSE.txt
----
-
-This skill analyzes coding sessions to extract durable preferences from corrections and approvals, then proposes targeted updates to Skills that were active during the session. It acts as a learning mechanism across sessions, ensuring Claude improves based on feedback.
-
-The user triggers autoskill after a session where Skills were used. The skill detects signals, filters for quality, maps them to the relevant Skill files, and proposes minimal, reversible edits for review.
-
-## When to activate
-
-Trigger on explicit requests:
-- "autoskill", "learn from this session", "update skills from these corrections"
-- "remember this pattern", "make sure you do X next time"
-
-Do NOT activate for one-off corrections or when the user declines skill modifications.
-
-## Signal detection
-
-Scan the session for:
-
-**Corrections** (highest value)
-- "No, use X instead of Y"
-- "We always do it this way"
-- "Don't do X in this codebase"
-
-**Repeated patterns** (high value)
-- Same feedback given 2+ times
-- Consistent naming/structure choices across multiple files
-
-**Approvals** (supporting evidence)
-- "Yes, that's right"
-- "Perfect, keep doing it this way"
-
-**Ignore:**
-- Context-specific one-offs ("use X here" without "always")
-- Ambiguous feedback
-- Contradictory signals (ask for clarification instead)
-
-## Signal quality filter
-
-Before proposing any change, ask:
-1. Was this correction repeated, or stated as a general rule?
-2. Would this apply to future sessions, or just this task?
-3. Is it specific enough to be actionable?
-4. Is this **new information** I wouldn't already know?
-
-Only propose changes that pass all four.
-
-### What counts as "new information"
-
-**Worth capturing:**
-- Project-specific conventions ("we use `cn()` not `clsx()` here")
-- Custom component/utility locations ("buttons are in `@/components/ui`")
-- Team preferences that differ from defaults ("we prefer explicit returns")
-- Domain-specific terminology or patterns
-- Non-obvious architectural decisions ("auth logic lives in middleware, not components")
-- Integrations and API quirks specific to this stack
-
-**NOT worth capturing (I already know this):**
-- General best practices (DRY, separation of concerns)
-- Language/framework conventions (React hooks rules, TypeScript basics)
-- Common library usage (standard Tailwind classes, typical Next.js patterns)
-- Universal security practices (input validation, SQL injection prevention)
-- Standard accessibility guidelines
-
-If I'd give the same advice to any project, it doesn't belong in a skill.
-
-## Mapping signals to Skills
-
-Match each signal to the Skill that was active and relevant during the session:
-
-- If the signal relates to a Skill that was used, update that Skill's `SKILL.md`
-- If 3+ related signals don't fit any active Skill, propose a new Skill
-- Ignore signals that don't map to any Skill used in the session
-
-## Proposing changes
-
-For each proposed edit, provide:
-
-```
-File: path/to/SKILL.md
-Section: [existing section or "new section: X"]
-Confidence: HIGH | MEDIUM
-
-Signal: "[exact user quote or paraphrase]"
-
-Current text (if modifying):
-> existing content
-
-Proposed text:
-> updated content
-
-Rationale: [one sentence]
-```
-
-Group proposals by file. Present HIGH confidence changes first.
-
-## Review flow
-
-Always present changes for review before applying. Format:
-
-```
-## autoskill summary
-
-Detected [N] durable preferences from this session.
-
-### HIGH confidence (recommended to apply)
-- [change 1]
-- [change 2]
-
-### MEDIUM confidence (review carefully)
-- [change 3]
-
-Apply high confidence changes? [y/n/selective]
-```
-
-Wait for explicit approval before editing any file.
-
-## Applying changes
-
-When approved:
-1. Edit the target file with minimal, focused changes
-2. If git is available, commit with message: `chore(autoskill): [brief description]`
-3. Report what was changed
-
-## Constraints
-
-- Never delete existing rules without explicit instruction
-- Prefer additive changes over rewrites
-- One concept per change (easy to revert)
-- Preserve existing file structure and tone
-- When uncertain, downgrade to MEDIUM confidence and ask

package/templates/base/.claude/skills/design-principles/skill.md

@@ -1,237 +0,0 @@
----
-name: design-principles
-description: Enforce a precise, minimal design system inspired by Linear, Notion, and Stripe. Use this skill when building dashboards, admin interfaces, or any UI that needs Jony Ive-level precision - clean, modern, minimalist with taste. Every pixel matters.
----
-
-# Design Principles
-
-This skill enforces precise, crafted design for enterprise software, SaaS dashboards, admin interfaces, and web applications. The philosophy is Jony Ive-level precision with intentional personality — every interface is polished, and each is designed for its specific context.
-
-## Design Direction (REQUIRED)
-
-**Before writing any code, commit to a design direction.** Don't default. Think about what this specific product needs to feel like.
-
-### Think About Context
-
-- **What does this product do?** A finance tool needs different energy than a creative tool.
-- **Who uses it?** Power users want density. Occasional users want guidance.
-- **What's the emotional job?** Trust? Efficiency? Delight? Focus?
-- **What would make this memorable?** Every product has a chance to feel distinctive.
-
-### Choose a Personality
-
-Enterprise/SaaS UI has more range than you think. Consider these directions:
-
-**Precision & Density** — Tight spacing, monochrome, information-forward. For power users who live in the tool. Think Linear, Raycast, terminal aesthetics.
-
-**Warmth & Approachability** — Generous spacing, soft shadows, friendly colors. For products that want to feel human. Think Notion, Coda, collaborative tools.
-
-**Sophistication & Trust** — Cool tones, layered depth, financial gravitas. For products handling money or sensitive data. Think Stripe, Mercury, enterprise B2B.
-
-**Boldness & Clarity** — High contrast, dramatic negative space, confident typography. For products that want to feel modern and decisive. Think Vercel, minimal dashboards.
-
-**Utility & Function** — Muted palette, functional density, clear hierarchy. For products where the work matters more than the chrome. Think GitHub, developer tools.
-
-**Data & Analysis** — Chart-optimized, technical but accessible, numbers as first-class citizens. For analytics, metrics, business intelligence.
-
-Pick one. Or blend two. But commit to a direction that fits the product.
-
-### Choose a Color Foundation
-
-**Don't default to warm neutrals.** Consider the product:
-
-- **Warm foundations** (creams, warm grays) — approachable, comfortable, human
-- **Cool foundations** (slate, blue-gray) — professional, trustworthy, serious
-- **Pure neutrals** (true grays, black/white) — minimal, bold, technical
-- **Tinted foundations** (slight color cast) — distinctive, memorable, branded
-
-**Light or dark?** Dark modes aren't just light modes inverted. Dark feels technical, focused, premium. Light feels open, approachable, clean. Choose based on context.
-
-**Accent color** — Pick ONE that means something. Blue for trust. Green for growth. Orange for energy. Violet for creativity. Don't just reach for the same accent every time.
-
-### Choose a Layout Approach
-
-The content should drive the layout:
-
-- **Dense grids** for information-heavy interfaces where users scan and compare
-- **Generous spacing** for focused tasks where users need to concentrate
-- **Sidebar navigation** for multi-section apps with many destinations
-- **Top navigation** for simpler tools with fewer sections
-- **Split panels** for list-detail patterns where context matters
-
-### Choose Typography
-
-Typography sets tone. Don't always default:
-
-- **System fonts** — fast, native, invisible (good for utility-focused products)
-- **Geometric sans** (Geist, Inter) — modern, clean, technical
-- **Humanist sans** (SF Pro, Satoshi) — warmer, more approachable
-- **Monospace influence** — technical, developer-focused, data-heavy
-
----
-
-## Core Craft Principles
-
-These apply regardless of design direction. This is the quality floor.
-
-### The 4px Grid
-All spacing uses a 4px base grid:
-- `4px` - micro spacing (icon gaps)
-- `8px` - tight spacing (within components)
-- `12px` - standard spacing (between related elements)
-- `16px` - comfortable spacing (section padding)
-- `24px` - generous spacing (between sections)
-- `32px` - major separation
-
-### Symmetrical Padding
-**TLBR must match.** If top padding is 16px, left/bottom/right must also be 16px. Exception: when content naturally creates visual balance.
-
-```css
-/* Good */
-padding: 16px;
-padding: 12px 16px; /* Only when horizontal needs more room */
-
-/* Bad */
-padding: 24px 16px 12px 16px;
-```
-
-### Border Radius Consistency
-Stick to the 4px grid. Sharper corners feel technical, rounder corners feel friendly. Pick a system and commit:
-
-- Sharp: 4px, 6px, 8px
-- Soft: 8px, 12px
-- Minimal: 2px, 4px, 6px
-
-Don't mix systems. Consistency creates coherence.
-
-### Depth & Elevation Strategy
-
-**Match your depth approach to your design direction.** Depth is a tool, not a requirement. Different products need different approaches:
-
-**Borders-only (flat)** — Clean, technical, dense. Works for utility-focused tools where information density matters more than visual lift. Linear, Raycast, and many developer tools use almost no shadows — just subtle borders to define regions. This isn't lazy; it's intentional restraint.
-
-**Subtle single shadows** — Soft lift without complexity. A simple `0 1px 3px rgba(0,0,0,0.08)` can be enough. Works for approachable products that want gentle depth without the weight of layered shadows.
-
-**Layered shadows** — Rich, premium, dimensional. Multiple shadow layers create realistic depth for products that want to feel substantial. Stripe and Mercury use this approach. Best for cards that need to feel like physical objects.
-
-**Surface color shifts** — Background tints establish hierarchy without any shadows. A card at `#fff` on a `#f8fafc` background already feels elevated. Shadows can reinforce this, but color does the heavy lifting.
-
-Choose ONE approach and commit. Mixing flat borders on some cards with heavy shadows on others creates visual inconsistency.
-
-```css
-/* Borders-only approach */
---border: rgba(0, 0, 0, 0.08);
---border-subtle: rgba(0, 0, 0, 0.05);
-border: 0.5px solid var(--border);
-
-/* Single shadow approach */
---shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-
-/* Layered shadow approach (when appropriate) */
---shadow-layered:
-  0 0 0 0.5px rgba(0, 0, 0, 0.05),
-  0 1px 2px rgba(0, 0, 0, 0.04),
-  0 2px 4px rgba(0, 0, 0, 0.03),
-  0 4px 8px rgba(0, 0, 0, 0.02);
-```
-
-**The craft is in the choice, not the complexity.** A flat interface with perfect spacing and typography is more polished than a shadow-heavy interface with sloppy details.
-
-### Card Layouts Vary, Surface Treatment Stays Consistent
-Monotonous card layouts are lazy design. A metric card doesn't have to look like a plan card doesn't have to look like a settings card. One might have a sparkline, another an avatar stack, another a progress ring, another a two-column split.
-
-Design each card's internal structure for its specific content — but keep the surface treatment consistent: same border weight, shadow depth, corner radius, padding scale, typography. Cohesion comes from the container chrome, not from forcing every card into the same layout template.
-
-### Isolated Controls
-UI controls deserve container treatment. Date pickers, filters, dropdowns — these should feel like crafted objects sitting on the page, not plain text with click handlers.
-
-**Never use native form elements for styled UI.** Native `<select>`, `<input type="date">`, and similar elements render OS-native dropdowns and pickers that cannot be styled. Build custom components instead:
-
-- Custom select: trigger button + positioned dropdown menu
-- Custom date picker: input + calendar popover
-- Custom checkbox/radio: styled div with state management
-
-**Custom select triggers must use `display: inline-flex` with `white-space: nowrap`** to keep text and chevron icons on the same row. Without this, flex children can wrap to new lines.
-
-### Typography Hierarchy
-- Headlines: 600 weight, tight letter-spacing (-0.02em)
-- Body: 400-500 weight, standard tracking
-- Labels: 500 weight, slight positive tracking for uppercase
-- Scale: 11px, 12px, 13px, 14px (base), 16px, 18px, 24px, 32px
-
-### Monospace for Data
-Numbers, IDs, codes, timestamps belong in monospace. Use `tabular-nums` for columnar alignment. Mono signals "this is data."
-
-### Iconography
-Use **Phosphor Icons** (`@phosphor-icons/react`). Icons clarify, not decorate — if removing an icon loses no meaning, remove it.
-
-Give standalone icons presence with subtle background containers.
-
-### Animation
-- 150ms for micro-interactions, 200-250ms for larger transitions
-- Easing: `cubic-bezier(0.25, 1, 0.5, 1)`
-- No spring/bouncy effects in enterprise UI
-
-### Contrast Hierarchy
-Build a four-level system: foreground (primary) → secondary → muted → faint. Use all four consistently.
-
-### Color for Meaning Only
-Gray builds structure. Color only appears when it communicates: status, action, error, success. Decorative color is noise.
-
-When building data-heavy interfaces, ask whether each use of color is earning its place. Score bars don't need to be color-coded by performance — a single muted color works. Grade badges don't need traffic-light colors — typography can do the hierarchy work. Look at how GitHub renders tables and lists: almost entirely monochrome, with color reserved for status indicators and actionable elements.
-
----
-
-## Navigation Context
-
-Screens need grounding. A data table floating in space feels like a component demo, not a product. Consider including:
-
-- **Navigation** — sidebar or top nav showing where you are in the app
-- **Location indicator** — breadcrumbs, page title, or active nav state
-- **User context** — who's logged in, what workspace/org
-
-When building sidebars, consider using the same background as the main content area. Tools like Supabase, Linear, and Vercel rely on a subtle border for separation rather than different background colors. This reduces visual weight and feels more unified.
-
----
-
-## Dark Mode Considerations
-
-Dark interfaces have different needs:
-
-**Borders over shadows** — Shadows are less visible on dark backgrounds. Lean more on borders for definition. A border at 10-15% white opacity might look nearly invisible but it's doing its job — resist the urge to make it more prominent.
-
-**Adjust semantic colors** — Status colors (success, warning, error) often need to be slightly desaturated or adjusted for dark backgrounds to avoid feeling harsh.
-
-**Same structure, different values** — The hierarchy system (foreground → secondary → muted → faint) still applies, just with inverted values.
-
----
-
-## Anti-Patterns
-
-### Never Do This
-- Dramatic drop shadows (`box-shadow: 0 25px 50px...`)
-- Large border radius (16px+) on small elements
-- Asymmetric padding without clear reason
-- Pure white cards on colored backgrounds
-- Thick borders (2px+) for decoration
-- Excessive spacing (margins > 48px between sections)
-- Spring/bouncy animations
-- Gradients for decoration
-- Multiple accent colors in one interface
-
-### Always Question
-- "Did I think about what this product needs, or did I default?"
-- "Does this direction fit the context and users?"
-- "Does this element feel crafted?"
-- "Is my depth strategy consistent and intentional?"
-- "Are all elements on the grid?"
-
----
-
-## The Standard
-
-Every interface should look designed by a team that obsesses over 1-pixel differences. Not stripped — *crafted*. And designed for its specific context.
-
-Different products want different things. A developer tool wants precision and density. A collaborative product wants warmth and space. A financial product wants trust and sophistication. Let the product context guide the aesthetic.
-
-The goal: intricate minimalism with appropriate personality. Same quality bar, context-driven execution.

package/templates/base/.claude/skills/frontend-design/skill.md

@@ -1,42 +0,0 @@
----
-name: frontend-design
-description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-license: Complete terms in LICENSE.txt
----
-
-This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
-
-The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
-
-## Design Thinking
-
-Before coding, understand the context and commit to a BOLD aesthetic direction:
-- **Purpose**: What problem does this interface solve? Who uses it?
-- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
-- **Constraints**: Technical requirements (framework, performance, accessibility).
-- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
-
-**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
-
-Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
-- Production-grade and functional
-- Visually striking and memorable
-- Cohesive with a clear aesthetic point-of-view
-- Meticulously refined in every detail
-
-## Frontend Aesthetics Guidelines
-
-Focus on:
-- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
-- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
-- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
-- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
-- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
-
-NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
-
-Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
-
-**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
-
-Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.