Global AI chat room · 15 online now Join now
T
SKILL Listed

Tistory Blog Skin UI/UX Enhancement Pipeline

A translation skill for producing accurate, natural, context-aware translations while adapting terminology, tone and phrasing to the target audience.

inhyoeCodingCoding
4.1Rating
81Uses
—Feedback
01 / SKILL INTRODUCTION

About this skill

A translation skill for producing accurate, natural, context-aware translations while adapting terminology, tone and phrasing to the target audience.

TRIGGER DESCRIPTION

Use this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A translation skill for producing accurate, natural, context-aware translations while adapting terminology, tone and phrasing to the target audience.

01Progressive disclosure

Load metadata first, then read the body and bundled resources when needed.

02Evaluable iteration

Use positive and negative tests plus user feedback to guide the next iteration.

03Clear output contract

Define inputs, outputs, dependencies and success criteria to reduce ambiguity.

02 / SKILL FILES

Skill files

SKILL.mdMarkdown · — · Previewable
## 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 pa
This is an online preview. Copy it and continue editing in your local skill directory.
YAML FRONTMATTERSkill metadata
nameTistory Blog Skin UI/UX Enhancement Pipeline
descriptionUse this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A translation skill for producing accurate, natural, context-aware translations while adapting terminology, tone and phrasing to the target audience.
03 / WORKFLOW

How to use

  1. 01
    Step 1

    Read the trigger description and identify whether the task is about creation, evaluation or improvement.

  2. 02
    Step 2

    Open SKILL.md and confirm the input, output and bundled resource requirements.

  3. 03
    Step 3

    Run a small test set with realistic positive and negative prompts.

  4. 04
    Step 4

    Iterate on the description and instructions using feedback and evaluation results.

04 / DISCUSSIONS

Discussions and feedback

—feedback records

Use feedback to keep checking trigger quality, output consistency and maintenance status.

Back to skills
Email