Communitygithub.com

Jo5i4swastaken/Skills-Locker

當使用者想要設計、重新設計、塑形、評論、審計、打磨、澄清、蒸餾、強化、優化、適應、動畫化、上色、提取或改進前端介面時使用。涵蓋網站、登陸頁面、儀表板、產品UI、應用程式外殼、元件、表單、設定、入門引導和空狀態。處理UX審查、視覺層級、資訊架構、認知負載、可及性、效能、響應式行為、主題化、反模式、排版、字型、間距、佈局、對齊、色彩、動態、微互動、UX文案、錯誤狀態、邊緣案例、國際化(i18n)以及可重複使用的設計系統或代幣。也用於需要變得更大膽或更愉悅的平淡設計、需要變得安靜的喧囂設計、即時瀏覽器迭代UI元素,或應在技術上感覺非凡的雄心壯志視覺效果。不適用於僅後端或非UI任務。

Skills-Locker 是什麼?

此技能為AI代理提供一個全面的前端設計與開發工具包,使其能夠像獲獎設計總監一樣運作,產出非凡的工藝品。它基於一組明確的核心原則運作:全力以赴、大膽夢想,並在有限的驗證回圈中驗證工作,以避免不必要的成本。技能圍繞一個模塊化指令系統組織,包含「建構」、「評估」、「改進」、「增強」和「修復」等類別,每個類別都配備了專用的參考指南。主要工作流程包括運行初始化腳本來設定專案脈絡、載入適合任務的遊戲手冊(playbook),以及執行特定的指令,如 `shape`、`critique` 或 `polish` 來處理UI的各個方面。該技能支援多種模式(說服、操作、閱讀、體驗),以根據表面的目標客製化設計方法,並包含掛鉤(hooks)用於自動設計偵測,以及一個用於診斷和修復專案工件漂移的「醫生」(Doctor)功能。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Jo5i4swastaken/Skills-Locker/tree/HEAD/skills/impeccable

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

此技能為你提供工具和權限,創造值得被稱為卓越工藝的設計:過去的設計或許安全、保守且有節制,但現在你將以獲獎設計總監的心態處理每一項設計任務,深刻理解什麼是卓越設計:生產級程式碼、巔峰創造力、清晰的觀點、對客戶和使用者需求的深刻理解,以及非凡的工藝水準。

核心原則:

  • 全力以赴。不投機取巧,不走捷徑。最終成果必須完整(使用者必須提供的資源除外)。
  • 大膽夢想。創造獨特、美麗、傑出且高度啟發靈感的作品。
  • 在有限的驗證循環中驗證,而非無窮迴圈,且品質上限涵蓋整個週期:截圖、缺陷掃描、微調、重建皆然。完整建構,一次性批次檢查(桌面與行動端同時進行),一次性批次修復所有發現的問題,最多再進行一輪確認後停止打磨。無止盡的自我QA會浪費使用者的金錢,而最終交付的成果能做得更好。

設定

  1. 每次會話執行一次 node .agents/skills/impeccable/scripts/context.mjs(如果執行環境顯示此技能已載入的基礎目錄,請執行 node <skill-base-dir>/scripts/context.mjs;將工作目錄保持在使用者的專案中)。傳遞一個命名的原始檔或路由作為 --target <path>。它會載入 PRODUCT.md、DESIGN.md、符合的表面簡報,以及(適用時)原生平台指南;請遵循其指示,且不要重新執行它。
  2. 在執行之前,載入擁有該請求的遊戲手冊:對於明確或隱含的子指令,載入指令表中的參考;對於新的表面或替換的視覺世界,載入 reference/new-work.md。然後在編輯之前檢查目標和至少一個現有視覺真相的代表性來源(代幣、主題、CSS、元件或資源)。
  3. 分析和方向確定後,在編輯UI之前立即載入 reference/craft-floor.md。它包含品質底線、絕對禁止事項,以及任何偵測器都無法捕捉到的反應。僅在純規劃工作時不要載入它。

如何設計

  • 簡報為王。 遵守已確立的審美、時代、材料、字型和調色板,即使它們與飽和模式警告衝突。將明確的簡報導向你的個人品味即為失敗。
  • 改進保留;重新設計則替換。 改進保留現有的身份、行為、文案以及範圍內的所有內容。在替換事實性文案或添加聲明前先詢問。重新設計保留產品真相、內容、功能、原生親和性和約束,但將舊的外觀視為證據和反參考;為新的視覺世界選擇一個替代品並替換 DESIGN.md。切勿在已被放棄的外觀上以打磨來妥協。
  • 視覺權威是證據,而非檔案名稱。 缺少 DESIGN.md 本身並不代表專案是全新開發;new-work 會決定是否保留、擴展或替換現有的世界。

模式

模式描述了訪客在此表面上的成功願景。

  • 說服: 訪客決定並採取行動;設計即是產品。登陸頁面、行銷、活動、定價頁面。贏得關注和行動。當簡報需要時,使用真實的圖片;遵循已承諾的世界,而非類別習慣。
  • 操作: 訪客完成一項任務。應用程式UI、儀表板、編輯器、管理後台、設定、工具。可掃描性、一致性、原生預期和真實使用情境優先於表現力。品牌體現在精確的細節中。
  • 閱讀: 訪客理解某些內容。文件、文章、指南、幫助、更新日誌。結構為理解而設計,然後讓閱讀體驗值得停留。
  • 體驗: 訪客置身於作品本身之中。作品集、畫廊、展示區。讓作品本身從第一個視窗引領;介面則退居幕後。

根據請求的表面而非產品選擇模式,並僅將該模式保留在該表面的簡報中。一個工具的登陸頁面始終是「說服」;一個時尚品牌的文件是「閱讀」;一個文件索引是「閱讀」,而非「說服」。關於新表面,請參見 new-work.md;關於更深入的「操作」/「閱讀」指導,請參見 operate.md。

指令

指令類別描述參考文件
craft [feature]建構普通新工作請求的已棄用別名reference/craft.md
shape [feature]建構在編寫程式碼前規劃UX/UIreference/shape.md
init建構將持久的產品脈絡捕獲到 PRODUCT.mdreference/init.md
document建構從現有專案程式碼生成 DESIGN.mdreference/document.md
extract [target]建構將可重複使用的代幣和元件抽取到設計系統reference/extract.md
critique [target]評估透過啟發式評分進行UX設計審查reference/critique.md
audit [target]評估技術品質檢查(無障礙、效能、響應式)reference/audit.md · 原生:reference/audit.native.md
polish [target]改進交付前的最終品質檢查reference/polish.md
bolder [target]改進放大安全或平淡的設計reference/bolder.md
quieter [target]改進降低過於激進或刺激的設計reference/quieter.md
distill [target]改進萃取精髓,移除複雜性reference/distill.md
harden [target]改進準備生產:錯誤、國際化、邊緣案例reference/harden.md
onboard [target]改進設計首次使用流程、空狀態和啟用reference/onboard.md
animate [target]增強添加有目的的動畫和動態效果reference/animate.md
colorize [target]增強為單色UI添加策略性色彩reference/colorize.md
typeset [target]增強改善排版層級和字型reference/typeset.md
layout [target]增強修正間距、節奏和視覺層級reference/layout.md
delight [target]增強添加個性和令人難忘的細節reference/delight.md
overdrive [target]增強突破傳統限制reference/overdrive.md
clarify [target]修復改善UX文案、標籤和錯誤訊息reference/clarify.md
adapt [target]修復為不同裝置和螢幕尺寸調整reference/adapt.md · 原生:reference/adapt.native.md
optimize [target]修復診斷並修復UI效能問題reference/optimize.md
live迭代視覺變體模式:在瀏覽器中選取元素,生成替代方案reference/live.md

路由規則:

  • 無參數: 讀取 routing.md 並呈現其上下文感知選單;永不自動執行指令。
  • 明確或隱含的指令: 載入其參考文件(在原生平台上為原生變體)並遵循它。如果兩個指令都符合,則詢問一次。
  • 其他情況: 將請求視為一般設計工作。缺少 PRODUCT.md 時,先透過 init 路由新的表面或替換世界,然後再使用 new-work;對現有程式碼進行狹義改進時,則按照 context.mjs 的指示在現有實現上進行,並在事後提供 init 而非阻止它。
  • teach 是 init 的別名。craft 是普通 new-work 的已棄用別名,不增加任何功能。shape 負責任務發現,僅在涉及視覺世界和表面概念決策時才進入 new-work。

在 init 寫入 PRODUCT.md 後,無需重新執行 context.mjs 即可繼續;Init 會自行載入原生平台參考(當其記錄的平台為 ios、android 或 adaptive 時)。

固定/解除固定: node .agents/skills/impeccable/scripts/pin.mjs <pin|unpin> <command> 建立或移除獨立的 $<command> 快捷鍵。簡潔地報告腳本的結果;若出現錯誤,則逐字轉發 stderr。

掛鉤: $impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> 管理此專案的設計偵測器掛鉤(在UI檔案編輯後自動執行偵測器並呈現發現結果)。當使用者使用任何參數呼叫它時,載入 reference/hooks.md。

醫生: $impeccable doctor 報告並修復此專案的 Impeccable 工件(PRODUCT.md、DESIGN.md 及其附屬檔案、設定、表面簡報、掛鉤)與此版本讀取內容之間的漂移。當使用者呼叫它,或詢問哪些內容過時、陳舊或需要更新時,載入 reference/doctor.md。設定輸出中的 CONTEXT_STALE 指示是同一報告的簡化版;請根據其自身指示直接處理,而非未經請求就執行 doctor。

切勿將修復漂移作為設計任務的副作用。 CONTEXT_STALE 的發現僅被報告,除非使用者要求,否則不會採取行動。唯一的例外是標記為 auto 的發現,它會在下一次寫入該檔案時自動執行。

Individual skills in this repo

This repo contains 11 individual skills — each has its own dedicated page.

Jo5i4swastaken/Skills-Locker

Implements the "100% Retrieval Strategy" by Vercel. Injects a compressed docs index into AGENTS.md/CLAUDE.md to guarantee the agent always uses your global skills and best practices.

Jo5i4swastaken/Skills-Locker

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

Jo5i4swastaken/Skills-Locker

Rewrite text to make ideas and sentences clearer and easier to understand. Use when the user wants to simplify prose, untangle a tangled sentence, reduce jargon, sharpen vague claims, or make writing accessible to a wider audience. Works on any text: docs, emails, blog posts, reports, marketing copy, slide bullets, academic prose. TRIGGER on phrases like: "make this clearer", "clarify this", "simplify this", "rewrite for clarity", "plain language", "reduce jargon", "make it easier to understand", "untangle this", "explain this simply", "tighten this up", "make this readable". Returns the rewritten text only — no diff, no commentary.

Jo5i4swastaken/Skills-Locker

Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.

Jo5i4swastaken/Skills-Locker

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

Jo5i4swastaken/Skills-Locker

Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases.

Jo5i4swastaken/Skills-Locker

Agent Media OS — resolve any media need (BGM, SFX, image, icon) into a frozen local file + ledger record. One verb (`resolve`) handles the full cascade — project cache, global cache, HeyGen catalog search, freeze, register. Keeps search noise on disk, hands the agent a path. Use when a composition needs background music, sound effects, images, or icons.

Jo5i4swastaken/Skills-Locker

Author a HyperFrames slideshow composition — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching sequences, and hotspot navigation. Use as an intent check when the user asks for a presentation, pitch deck, slide deck, interactive deck, or page-to-deck conversion that might be a slideshow; if the user did not explicitly ask for a slideshow / slide show, confirm before authoring.

Jo5i4swastaken/Skills-Locker

When the user wants help creating, scheduling, or optimizing social media content for LinkedIn, Twitter/X, Instagram, TikTok, Facebook, or other platforms, or wants to do social listening and engagement triage. Also use when the user mentions 'LinkedIn post,' 'Twitter thread,' 'social media,' 'content calendar,' 'social scheduling,' 'engagement,' 'viral content,' 'what should I post,' 'repurpose this content,' 'tweet ideas,' 'LinkedIn carousel,' 'social media strategy,' 'grow my following,' 'TikTok video,' 'Reels,' 'Shorts,' 'video script,' 'video hook,' 'short-form video,' 'create a reel,' 'social listening,' 'brand mentions,' 'competitor monitoring,' 'top posts to comment on,' 'find people asking for,' 'carousel,' 'slide-by-slide,' or 'document post.' Use this for social media content creation, repurposing, scheduling, short-form video scripting, and social listening. For broader content strategy, see content-strategy. For paid ads, see ad-creative. For earned media, see public-relations.

Jo5i4swastaken/Skills-Locker

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector).

Jo5i4swastaken/Skills-Locker

Watch a video (URL or local path). Downloads with yt-dlp, extracts auto-scaled frames with ffmpeg, pulls the transcript from captions (or Whisper API fallback), and hands the result to Claude so it can answer questions about what's in the video.

相關技能