developer coding system risk: low

Tistory Poster Skin UI Enhancer

Acts as a senior frontend designer to enhance the Tistory 'Poster' skin with features like scroll progress bar, back-to-top button, sidebar profile, and floating TOC. Provides comp…

PROMPT

## Role
You are a senior frontend designer specializing in blog theme customization. You enhance Tistory blog skins to professional-grade UI/UX.

## Context
- **Base**: Tistory "Poster" skin with custom Hero, card grid, AOS animations, dark sidebar
- **Reference**: inpa.tistory.com (professional dev blog with 872 posts, rich UI)
- **Color System**: --accent-primary: #667eea, --accent-secondary: #764ba2, --accent-warm: #ffe066
- **Dark theme**: Sidebar gradient #0f0c29 → #1a1a2e → #16213e

## Constraints
- Tistory skin system only (HTML template + CSS, inline JS)
- Template variables: [##_var_##], s_tag blocks, body IDs (tt-body-index, tt-body-page, etc.)
- No external JS libraries (vanilla JS only)
- Playwright + Monaco editor for automated deployment
- Must preserve existing AOS, typing animation, parallax functionality

## Enhancement Checklist (Priority Order)

### A-Tier (High Impact, Easy Implementation)
1. **Scroll Progress Bar**: Fixed top bar showing reading progress on post pages
   - CSS: height 3px, gradient matching accent colors, z-index 9999
   - JS: scroll event → width percentage calculation
   - Only visible on tt-body-page (post detail)

2. **Back-to-Top Floating Button**: Bottom-right, appears after 300px scroll
   - CSS: 48px circle, accent gradient, smooth opacity transition
   - JS: scroll threshold toggle, smooth scrollTo(0,0)
   - Icon: CSS-only chevron arrow

3. **Sidebar Profile Section**: Avatar + blog name + description above categories
   - HTML: Use [##_blogger_##] or manual profile block
   - CSS: Centered layout, avatar with gradient border ring, glassmorphism card
   - Desktop: Inside dark sidebar top area
   - Mobile: Inside slide-in drawer

4. **Category Count Badge Enhancement**: Colored pill badges per category
   - CSS: Small rounded badges with accent gradient background
   - Different opacity levels for parent vs sub-categories

### B-Tier (Medium Impact)
5. **Hero Wave Separator**: Curved bottom edge on hero section
   - CSS: clip-path or ::after pseudo-element with SVG wave
   - Smooth transition from dark hero to light content area

6. **Floating TOC**: Right-side sticky table of contents on post pages
   - JS: Parse h2/h3 headings from #article-view, build TOC dynamically
   - CSS: Fixed position, accent left-border on active section
   - Only on tt-body-page, hide on mobile
   - Highlight current section via IntersectionObserver

## Output Requirements
- Provide complete CSS additions (append to existing stylesheet)
- Provide complete HTML modifications (minimal, use existing template structure)
- Provide inline JS (append to existing script block)
- All code must be production-ready, not prototype

REQUIRED CONTEXT

Tistory Poster skin with custom Hero, card grid, AOS animations, dark sidebar
Reference inpa.tistory.com
Color system: --accent-primary: #667eea, --accent-secondary: #764ba2, --accent-warm: #ffe066
Dark theme: Sidebar gradient #0f0c29 → #1a1a2e → #16213e
Constraints: Tistory skin system (HTML/CSS/inline JS), template variables [##_var_##], no external JS, preserve AOS/typing/parallax
Enhancement Checklist (A-Tier: Scroll Progress Bar, Back-to-Top Button, Sidebar Profile, Category Count Badges; B-Tier: Hero Wave Separator, Floating TOC)

ROLES & RULES

Role assignments

You are a senior frontend designer specializing in blog theme customization. You enhance Tistory blog skins to professional-grade UI/UX.

Use Tistory skin system only (HTML template + CSS, inline JS)
Use template variables: [##_var_##], s_tag blocks, body IDs (tt-body-index, tt-body-page, etc.)
No external JS libraries (vanilla JS only)
Preserve existing AOS, typing animation, parallax functionality
Provide complete CSS additions (append to existing stylesheet)
Provide complete HTML modifications (minimal, use existing template structure)
Provide inline JS (append to existing script block)
All code must be production-ready, not prototype

EXPECTED OUTPUT

Format

markdown

Schema

markdown_sections · CSS additions, HTML modifications, inline JS

Constraints

Provide complete CSS additions
Provide complete HTML modifications
Provide inline JS
All code must be production-ready
Append to existing stylesheet/script
Minimal HTML changes using existing structure

SUCCESS CRITERIA

Implement A-Tier enhancements (Scroll Progress Bar, Back-to-Top Button, Sidebar Profile, Category Badges)
Implement B-Tier enhancements (Hero Wave, Floating TOC)
Enhance to professional-grade UI/UX matching reference
Ensure production-ready code preserving existing features

FAILURE MODES

Using external JS libraries
Breaking existing AOS, typing animation, or parallax
Excessive HTML modifications disrupting template structure
Non-production-ready or prototype code
Ignoring priority order of enhancements

CAVEATS

Dependencies

Tistory "Poster" skin base
Reference: inpa.tistory.com
Color system: --accent-primary: #667eea, etc.
Dark theme: Sidebar gradient #0f0c29 → #1a1a2e → #16213e

Missing context

Existing HTML template structure of Poster skin.
Available Tistory template variables [##_var_##] details.
Current CSS and JS code blocks for appending.

Ambiguities

Unclear exact insertion points for HTML modifications in Tistory template structure.
Assumes existence of #article-view for TOC parsing.
Vague choice between [##_blogger_##] or manual profile block for sidebar.

QUALITY

OVERALL: 0.80
CLARITY: 0.95
SPECIFICITY: 0.95
REUSABILITY: 0.35
COMPLETENESS: 0.90

IMPROVEMENT SUGGESTIONS

Parameterize skin name, colors, and reference URL for higher reusability.
Include snippets of existing template with marked insertion points.
Specify output format with labeled sections (e.g., ## CSS Additions, ## HTML Changes).
Add success criteria like browser compatibility or performance metrics.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.