felipebasurto/unslop-ui

Unslop UI

웹 페이지, 앱 화면, 차트 또는 대시보드의 보이는 텍스트와 장식적인 크롬을 편집하여 AI가 생성한 것처럼 읽히지 않도록 합니다. 좋은 인터페이스는 읽히는 것이 아니라 사용되는 것입니다. 사용자가 행동하는 데 필요한 단어만 남기고 나머지는 자릅니다.

대상: $ARGUMENTS (비어 있으면 이 대화에서 변경된 파일을 사용하거나 묻습니다).

/pstack:unslop의 글쓰기 규칙

유지하는 모든 문자열에 이 규칙을 적용합니다. 규칙 번호로 인용합니다.

!python3 ${CLAUDE_SKILL_DIR}/scripts/load_unslop.py

위 줄이 여전히 명령 대신 규칙을 표시하는 경우(Claude Code 이외의 에이전트), 이 스킬의 폴더에서 python3 scripts/load_unslop.py를 실행하고 출력된 내용을 적용합니다.

UI 규칙

ID는 안정적입니다. 보고서에서 U1~U16으로 인용합니다.

인터페이스 카피

• U1. 눈썹 레이블. 제목 위의 작은 대문자 또는 자간이 넓은 텍스트 ("PASSPORT", "FEATURES", "HOW IT WORKS"). 삭제합니다. 제목이 이미 섹션의 내용을 말하고 있습니다.
• U2. 장식 번호 지정. "01 02 03", "01 // Features", "§", "//" 접두사. 순서가 실제이고 사용자가 그 순서를 따르는 경우(체크아웃 단계, 번호가 매겨진 설치 가이드)를 제외하고는 삭제합니다.
• U3. 부제목 반사. 모든 제목 아래에 부제목이 있거나 H1 위에 한 줄이 있는 경우. 제목이 말하지 않는 사실을 명시하는 경우에만 하나를 유지합니다. "Analytics / Understand your data better"는 두 번째 줄을 잃습니다.
• U4. 봇 설명. 요소가 시각적으로 수행하는 작업을 설명하는 캡션, 도움말 텍스트 및 설명 ("시작하려면 아래 버튼을 클릭하세요", "이 차트는 시간 경과에 따른 수익을 보여줍니다"). 삭제합니다. 제목과 캡션은 5단어 이하로 유지합니다. 예외: 빈 상태, 오류 메시지 및 파괴적 작업 확인(전체 문장을 사용할 수 있음).
• U5. 디자인 노트 유출. 화면 작동 방식이나 디자인 이유에 대한 텍스트, 긴 괄호, "(실시간 업데이트)", "(AI 기반)". 삭제하거나 사용자가 실제로 찾을 법한 경우 툴팁으로 이동합니다.
• U6. 상태 문자열. "·" 또는 "|"로 연결된 사실 ("12개 항목 · 2분 전 업데이트 · 동기화됨 · v2.1"). 사용자가 행동하는 한 가지 사실을 유지합니다. 다른 것은 필요한 곳에 두거나 삭제합니다.
• U7. 모든 것에 레이블 지정. 플레이스홀더, 아이콘, 버튼 텍스트 또는 섹션 제목을 반복하는 레이블. 하나의 신호를 선택합니다. 돋보기 아이콘이 있는 검색 필드는 "Search" 레이블이나 "Search..." 플레이스홀더 중 하나만 있으면 됩니다.
• U8. 단속적이고 빈 슬로건. "One. Big. Thing.", "Built different.", "Ship faster. Think less." 대상을 지칭하고 수행하는 작업을 명명하는 하나의 문장으로 다시 쓰거나 삭제합니다.

장식

• U9. 실제 상태가 없는 배지와 알약. "LIVE", "NEW", "AI", "Beta", "Pro", "🔥 Popular" 등 분위기를 위해 추가된 것. 앱이 실제로 추적하는 데이터(실제 스트리밍이 라이브 중이거나, 마지막 방문 이후 실제로 새 항목인 경우)를 반영하는 경우에만 배지를 유지합니다.
• U10. 상태 점. 텍스트 옆의 깜박이거나 색상이 있는 점 (animate-pulse, 작은 rounded-full 점). 실제 라이브 상태에 연결된 경우에만 유지합니다.
• U11. 장식용 이모지 및 아이콘. 제목, 버튼, KPI 레이블 및 목록 항목에서. 삭제합니다. 아이콘은 컨트롤 자체인 경우(aria-label이 있는 아이콘 버튼) 또는 텍스트가 전달하지 않는 의미를 전달하는 경우에만 유지됩니다.

차트 및 대시보드

• U12. 차트 유형을 명명하는 차트 제목. "Bar chart of monthly revenue"는 "Monthly revenue" 또는 발견 사항인 "Revenue doubled since March"가 됩니다.
• U13. 읽기 지침. 차트 읽는 방법을 설명하는 부제목 또는 캡션 ("각 막대는 한 달을 나타냅니다", "자세한 내용은 마우스를 올리세요"). 삭제합니다.
• U14. 두 번 말하기. 각 수량은 하나의 인코딩을 받습니다. 막대, 막대 위의 숫자, 높이의 그리드라인, 축 눈금이 모두 동일한 값을 말하는 것은 세 개가 너무 많습니다. 화살표 + 퍼센트 + "up"이라는 단어 + 그 아래 문장이 있는 KPI ("Revenue grew 12% compared to last month")는 텍스트에서 동일한 실수입니다. 독자에게 필요한 인코딩을 유지합니다. 모양을 위한 축과 그리드라인, 중요한 숫자(종종 마지막 지점 또는 최대값만)에 대한 인쇄된 값입니다.
• U15. 데이터와 경쟁하는 차트 프레임. 플롯 영역 주변의 프레임 상자, 어둡거나 조밀한 그리드라인, 보조 눈금, 두꺼운 축 테두리, 3D, 마크의 그림자 및 광택, 플롯 뒤의 배경 채우기. 삭제하거나 유지해야 하는 것(몇 개의 그리드라인, 하나의 기준선)을 연한 회색의 가는 선으로 만듭니다. 데이터는 위에, 레이블은 옆에, 프레임은 가장 희미하게. 차트를 재설계하지 마십시오: 동일한 유형, 동일한 데이터, 동일한 시리즈 색상.
• U16. 직접 레이블이 작동하는 곳의 범례. 이름을 색상에 일치시키도록 독자를 만드는 범례 상자는, 이름이 줄 끝이나 막대 옆에 있을 수 있을 때 사용됩니다. 시리즈에 직접 레이블을 지정하고(가급적 최신 값 포함, "This year 1,150"), 범례를 제거합니다. 4개 이상의 시리즈가 있거나 마크가 너무 가까워 레이블을 지정할 수 없는 경우 범례를 유지합니다.

변경 전/후 쌍의 경우, 얼마나 자를지 확실하지 않을 때 references/examples.md를 읽으십시오.

보호 장치

• 보이는 텍스트와 장식 요소만 변경하십시오. 로직, 데이터, 색상, 간격 토큰 또는 레이아웃 구조를 건드리지 마십시오. U15에 따른 차트 프레임은 얇게 하거나 밝게 할 수 있는 유일한 예외입니다.
• 요소를 삭제할 때, 이제 비어 있는 래퍼와 그것만을 위해 존재했던 마진이나 간격도 함께 삭제하십시오. 단일 자식을 보유하기 위해 존재했던 래퍼도 제거 대상입니다.
• 아이콘 버튼의 aria-label, alt, title 또는 스크린리더 전용 텍스트는 절대 삭제하지 마십시오. 삭제된 보이는 텍스트가 유일한 접근 가능한 이름이었다면, aria-label로 이동하십시오.
• 데이터, props, i18n 파일 또는 CMS에서 오는 텍스트: 컴포넌트에 하드코딩된 대체 텍스트를 사용하지 말고 원본(번역 파일, fixture)을 수정하거나 보고하십시오.
• 플래그가 지정된 경우가 그 자리를 가질 만하다면(실제 상태, 실제 순서, 법적 텍스트), 유지하고 보고서에 그 이유를 명시하십시오.

절차

이 체크리스트를 복사하여 추적하십시오:

- [ ] 1. 카운트: python3 ${CLAUDE_SKILL_DIR}/scripts/count_tells.py <target>   (${CLAUDE_SKILL_DIR}는 이 파일의 폴더)
- [ ] 2. 모든 보이는 문자열과 장식 요소를 읽고, 각 문제를 U1-U16 또는 unslop 규칙 번호로 태그 지정
- [ ] 3. 편집
- [ ] 4. 동일한 명령으로 다시 카운트
- [ ] 5. 보고서

카운터는 정규식 휴리스틱입니다. 후보를 찾고 전후 숫자를 제공합니다. U3, U4, U5, U7, U8, U12, U13 및 U14는 읽기가 필요하므로 놓칩니다. U15 및 U16의 경우 코드 형식(그림자, 두꺼운 축 테두리 및 그리드라인, 켜진 범례)만 봅니다. 또한 일부 합법적인 경우를 플래그 지정합니다. 2단계에서의 읽기가 실제 확인입니다.

보고서 형식:

규칙	전	후
U1 눈썹	6	0
unslop 13 em 대시	4	0

그런 다음 의도적으로 유지한 항목을 한 줄에 하나씩 이유와 함께 나열합니다.