本文へ移動
cccskills
無料GitHub で公開

design-anti-patterns

Enforce anti-AI UI design rules based on the Uncodixfy methodology. Use when generating HTML, CSS, React, Vue, Svelte, or any frontend UI code. Prevents generic AI aesthetic — soft gradients, glassmorphism, hero sections in dashboards, oversized rounded corners, and decorative copy. Applies constraints from Linear/Raycast/Stripe/GitHub design philosophy for functional, honest, human-designed interfaces. Triggers on UI generation, dashboard building, component creation, CSS styling, landing page design, or any task producing visual interface code.

インストール方法を見る

含まれるファイル(3)

  • SKILL.md4.0 KB
  • references/uncodixfy-rules.md9.7 KB
  • SKILL-GOALS.md921 B

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Design Anti-Patterns (Uncodixfy)

SOURCE: Uncodixfy (accessed 2026-03-17)

Before writing any UI code, apply the Uncodixfy metacognitive check: list the UI decisions you would make by default, then do NOT make them if they match any banned pattern below. Build interfaces that feel like Linear, Raycast, Stripe, or GitHub — functional, honest, no visual theatrics.

Pre-Flight Check

Before generating any UI component, run this internal check:

  1. List all styling decisions you would make by default for this component
  2. Cross-reference each against the banned patterns in this skill and the full rules reference
  3. Replace every match with the "normal" standard from the reference
  4. Verify the result contains zero banned patterns

Absolute Prohibitions

These patterns are never acceptable unless the user explicitly overrides:

  • Border radius > 12px on any element
  • Pill-shaped buttons or badges
  • Glassmorphism, frosted panels, blur haze
  • Soft corporate gradients (backgrounds, buttons, text)
  • Hero sections inside dashboards or internal tools
  • Decorative copy ("Operational clarity without the clutter")
  • Eyebrow labels (uppercase <small> with letter-spacing)
  • KPI card grids as default dashboard layouts
  • Fake charts that exist only to fill space
  • Transform animations on hover (translateX, scale, bounce)
  • Dramatic box shadows (> 8px blur, colored shadows)
  • Floating detached sidebars with rounded outer shells
  • <small> subheaders above <h2> headline blocks
  • Decorative note cards with <small> + <strong> pattern
  • Generic startup copy in any UI element
  • Donut charts with hand-wavy percentages
  • Multiple nested panel types (panel, panel-2, rail-panel)
  • Status indicators using ::before pseudo-element colored dots
  • Nav badges showing "Live" or count indicators without functional purpose
  • Footer meta lines ("Dashboard v2.1 - dark mode - single-file HTML")

Normal Standards

Apply these defaults to every component:

ComponentStandard
Sidebar240-260px fixed, solid background, simple border-right
ButtonsSolid fill or simple border, 8-10px radius max
Cards8-12px radius, subtle border, shadow max 0 2px 8px rgba(0,0,0,0.1)
TypographySystem fonts or simple sans-serif, 14-16px body, clear hierarchy
Spacing4/8/12/16/24/32px scale only
Transitions100-200ms ease, opacity/color changes only
Containersmax-width 1200-1400px, centered, standard padding
ToolbarsStandard height 48-56px, simple horizontal layout
InputsSolid borders, simple focus ring, labels above fields
ModalsCentered overlay, simple backdrop, no slide-in animations

Color Selection

Follow this priority order:

  1. Use the project's existing colors — search project files for existing palette definitions
  2. Pick from a predefined palette — see color palettes in the rules reference
  3. Never invent random color combinations unless the user explicitly requests it

When selecting from predefined palettes, pick randomly — do not default to the first one.

Quick Reference

For the complete set of 30+ specifically banned implementation patterns, per-component "normal" standards, and 19 predefined color palettes (10 dark, 9 light), read the full Uncodixfy rules.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Add automated documentation updater to any Claude skill. Creates a Python sync script that downloads upstream docs, processes markdown for AI consumption, and maintains local cache with configurable refresh. Collects template variables, then delegates implementation through 5-phase workflow. Use when adding auto-updating reference documentation to plugins or skills.

日本語の概要は準備中です。原文の説明を表示しています。

Jamie-BitFlight/claude_skills672026年10月12日 更新

SAM-style feature initiation workflow — discovery through codebase analysis, architecture spec, task decomposition, validation, and context manifest. Use when a user asks to add a feature, plan a feature, or convert an idea into an executable SAM plan.

日本語の概要は準備中です。原文の説明を表示しています。

Jamie-BitFlight/claude_skills672026年10月12日 更新

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.

日本語の概要は準備中です。原文の説明を表示しています。

Jamie-BitFlight/claude_skills672026年10月12日 更新

Browser automation for AI agents using the agent-browser CLI and Playwright. Use when navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, logging into sites, or automating any browser task. Triggers on "open a website", "fill out a form", "click a button", "scrape data", "test this web app", "automate browser actions", or any programmatic web interaction request.

日本語の概要は準備中です。原文の説明を表示しています。

Jamie-BitFlight/claude_skills672026年10月12日 更新

Runs the description-drift experiment — spawns all Claude Code agents simultaneously to collect self-reported capabilities, then compares them against static frontmatter descriptions to reveal how reliable orchestrator routing based on descriptions actually is. Use when measuring description drift across the agent fleet, re-running the capability collection experiment, analyzing a specific agent's self-reported capabilities, or auditing whether frontmatter descriptions accurately reflect agent behavior.

日本語の概要は準備中です。原文の説明を表示しています。

Jamie-BitFlight/claude_skills672026年10月12日 更新

Create or adapt Claude Code agent definitions. Use when creating an agent, changing subagent configuration, selecting agent scope, or designing a specialized delegation role.

日本語の概要は準備中です。原文の説明を表示しています。

Jamie-BitFlight/claude_skills672026年10月12日 更新

Jamie-BitFlight のスキルをすべて見る

このスキルの問題を報告する