본문으로 건너뛰기
cccskills
무료GitHub에 공개

ui-redesign

Set up and manage a UI redesign experiment with three git worktree branches for modern minimal, bold creative, and classic refined design directions. Use when asked to run a UI redesign experiment, compare design approaches, or prototype multiple visual directions in parallel branches.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md2.8 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Initial Setup

  1. First, create 3 git worktree branches from the current main branch:

    • ui-redesign-modern-minimal
    • ui-redesign-bold-creative
    • ui-redesign-classic-refined
  2. Set up the worktree structure:

    git worktree add ../project-modern-minimal ui-redesign-modern-minimal
    git worktree add ../project-bold-creative ui-redesign-bold-creative
    git worktree add ../project-classic-refined ui-redesign-classic-refined
    

Design Directions for Each Branch Branch 1: Modern Minimal (ui-redesign-modern-minimal) Work in ../project-modern-minimal

Design Philosophy: Clean, minimalist, lots of whitespace Color Palette: Monochromatic with one accent color Typography: Sans-serif, limited font weights Components: Flat design, subtle shadows, micro-interactions Focus: Maximum usability and clarity

Branch 2: Bold Creative (ui-redesign-bold-creative) Work in ../project-bold-creative

Design Philosophy: Vibrant, experimental, attention-grabbing Color Palette: Bold gradients, contrasting colors Typography: Mix of fonts, creative text treatments Components: 3D elements, animations, glassmorphism Focus: Memorable user experience and visual impact

Branch 3: Classic Refined (ui-redesign-classic-refined) Work in ../project-classic-refined

Design Philosophy: Timeless, professional, trustworthy Color Palette: Traditional color schemes, navy/gold/cream Typography: Serif fonts for headers, clean sans for body Components: Card-based layouts, subtle borders, traditional patterns Focus: Professional appearance and accessibility

Implementation Tasks for Each Branch For each design direction, implement these changes:

Update the main color scheme and CSS variables Redesign the homepage/landing page Update the navigation menu style Redesign at least 2 key components (buttons, cards, forms, etc.) Create a style guide document showing the design system Update any relevant documentation

Working Process

Start with branch 1, make all changes, commit with clear messages Move to branch 2, repeat the process Move to branch 3, complete the redesign After all three are complete, create a comparison document

Final Deliverable Create a COMPARISON.md file in the main branch that includes:

Screenshots of each design approach Pros and cons of each approach Performance metrics if applicable Recommendation for which design to move forward with

Please proceed with this setup and implementation. Start by creating the worktree branches and confirming they're set up correctly, then begin with the Modern Minimal design.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SDiamante13/dotfiles102026년 10월 2일 업데이트

catchup

무료

Rebuilds session context after a clear by reading git history, plans, and beads state. Triggers on 'catch up'.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SDiamante13/dotfiles102026년 10월 2일 업데이트

changelog

무료

Generate a bullet-point summary of branch changes for a PR description. Triggers on "changelog", "pr summary", "summarize branch", or "/changelog".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SDiamante13/dotfiles102026년 10월 2일 업데이트

commit

무료

Commit the current changes with quality checks, status review, staged diff inspection, appropriate tests, and a clear commit message. Use when the user says "commit", "c", asks to make a commit, or wants changes saved in git.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SDiamante13/dotfiles102026년 10월 2일 업데이트

declutter

무료

Refactor code to remove dead code, useless comments, unused variables, and unused imports. Use when asked to declutter a class, clean up noisy code, remove cruft, or run `/refactor:declutter`.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SDiamante13/dotfiles102026년 10월 2일 업데이트

dry

무료

Refactor duplicated code by extracting helpers, shared abstractions, or clearer reusable structure. Use when asked to apply DRY, remove duplication, consolidate repeated logic, or run `/refactor:dry`.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

SDiamante13/dotfiles102026년 10월 2일 업데이트

SDiamante13의 스킬 모두 보기

이 스킬의 문제 신고