Communitygithub.com

bencium/ui-typography

為 UI 設計、網頁應用程式、軟體介面及所有螢幕文字提供專業排版規則。強制執行 LLM 常犯錯的永恆排版正確性:正確的引號、破折號、間距、層次結構與版面配置。

ui-typography 是什麼?

這個技能確保任何 UI 程式碼產生時,自動套用專業的排版規則,無需使用者明確要求。它適用於 Cursor、Claude Code 等 AI 編碼代理,特別是在生成 HTML、CSS、React 或 JSX 時,會靜默修正引號、破折號、間距與層次結構等常見錯誤。技能支援兩種模式:**強制模式**在產生任何包含可見文字的 UI 程式碼時自動套用規則;**稽核模式**則在檢視或改進現有介面時標記違規並提供修復建議。觸發情境包括建立登陸頁面、設計元件、製作儀表板或任何產生人類可見文字的任務。此技能對於希望產出專業、排版正確 UI 的開發者與設計師極具價值,能省去手動修正的時間,確保品牌一致性。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/bencium/bencium-marketplace/tree/main/skills/ui-typography

在你喜歡的 AI 中提問

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

說明文件

ui-typography 是做什麼的?

專業的 UI 設計、網頁應用程式、軟體介面及所有螢幕文字排版規則。強制執行 LLM 常犯錯的永恆排版正確性:正確的引號、破折號、間距、層次結構與版面配置。強制模式:在生成任何包含可見文字的 HTML、CSS、React、JSX 或 UI 程式碼時,靜默自動套用本技能的所有規則 — 不詢問、不解釋,直接產出正確的排版。稽核模式:在檢視或改進現有介面或舊版程式碼時,標記違規並提供修復建議。觸發情境包括:任何 HTML/CSS/React 產物建立、「建立登陸頁面」、「建立元件」、「設計 UI」、「修正排版」、「讓這個看起來專業」、「檢視這個版面配置」、網頁設計、簡報設計、儀表板建立、文件生成,或任何產生人類可見文字的任務。即使使用者未提及排版,只要產生 UI 輸出,就應應用這些規則。

Individual skills in this repo

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

bencium/adaptive-communication

Use when detecting ambiguous user intent, hedging language, open-ended framing, personal context before requests, or when unsure whether user wants exploration vs direct answer. Applies to all conversations.

bencium/agentic-ux-design---relationship-centric-interfaces

Design AI-first interfaces that build ongoing relationships through memory, trust evolution, and collaborative planning, not just isolated screen interactions

bencium/bencium-aeo

Generate AEO-optimized content (Answer Engine Optimization) for AI search visibility - ChatGPT, Claude, Gemini, AI Overviews. Use when optimizing websites for AI citations, creating FAQ schemas, evidence panels, or analyzing content for LLM extraction readiness.

bencium/bencium-code-conventions

Bence's code style, tech stack, and workflow conventions

bencium/bencium-controlled-ux-designer

Expert UI/UX design guidance for unique, accessible interfaces. Use for visual decisions, colors, typography, layouts. Always ask before making design decisions. Use this skill when the user asks to build web components, pages, or applications.

bencium/bencium-impact-designer

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. Based on Anthropic's Frontend Designer Skill

bencium/bencium-innovative-ux-designer

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

bencium/design-audit

Premium UI/UX design audit and refinement skill. Conducts systematic visual audits of existing apps and produces phased, implementation-ready design plans. Use this skill whenever the user asks to audit a UI, improve an app's visual design, make an interface feel more polished or premium, review design consistency, fix visual hierarchy, or refine spacing/typography/color. Also trigger when the user says "design review", "make it look better", "UI polish", "visual refinement", "design pass", "audit the design", or references making an app feel more professional. This skill is purely visual — it does not touch functionality, logic, or features. It elevates what exists.

bencium/human-architect-mindset

Systematic architectural thinking for irreplaceable human capabilities - domain modeling, systems thinking, constraint navigation, and AI-aware problem decomposition. Use proactively when detecting architectural decisions, system design discussions, or multi-component planning.

bencium/negentropy-lens

A decision-support framework that evaluates systems, architectures, and strategies through the entropy (decay) vs negentropy (growth) lens, while surfacing tacit knowledge gaps. Use this skill whenever the user is making architecture decisions, evaluating system designs, reviewing technical approaches, choosing between options, auditing existing systems, or planning strategies. Also trigger when the user explicitly asks to "apply the negentropy lens", mentions "entropy", "negentropy", "tacit knowledge", "knowledge engine", or "flip the switch". Nudge activation when you detect the user is at a decision point — even if they haven't asked for this lens — by briefly noting the entropic/negentropic dimension before proceeding.

bencium/renaissance-architecture

Software architecture and UI/UX principles for building genuinely new solutions, not derivative work. Use when designing features, architecting software, brainstorming apps, reviewing designs, or during strategy discussions. Focuses on first-principles thinking, simplicity where it matters, and creating rather than commenting.

bencium/vanity-engineering-review

Reviews codebases, architectures, PRs, and technical plans for vanity engineering — code and systems built for the developer's ego, resume, or intellectual pleasure rather than delivering user or business value. Triggers on: "review this code", "is this over-engineered", "code review", "architecture review", "complexity audit", "vanity check", "is this necessary", "simplify this", "tech debt review", or any request to evaluate whether code or architecture is justified by actual requirements. Also trigger when the user shares a codebase and asks for feedback, when discussing framework/library choices, when reviewing PRs, or when someone is debating whether to refactor or rebuild. Nudge activation when you detect patterns of unnecessary abstraction, premature optimization, or resume-driven technology choices in code the user shares — even if they haven't asked for a vanity review.

相關技能