跳到正文
cccskills
免费在 GitHub 公开

design-consistency-auditor

Audit and maintain design system consistency, UX/UI patterns, color palettes, and design best practices across frontend applications

中文简介正在准备中。当前显示原文说明。

curiositech/port-daddy

实测评分 未实测

查看安装方法

包含的文件（7）

  • SKILL.md3.0 KB
  • examples/audit-report-template.md10.4 KB
  • examples/INDEX.md350 B
  • examples/quick-audit-checklist.md5.1 KB
  • plugin.json350 B
  • README.md6.9 KB
  • references/full-guide.md16.8 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Design Consistency Auditor

Purpose

Audit and maintain design consistency across frontend applications. Before auditing, discover the project's frontend structure from documentation.

Ensures:

  • Color palettes are used consistently
  • UI/UX patterns follow best practices
  • Components maintain visual harmony
  • Accessibility standards are met
  • Design system is properly applied
  • No design debt accumulates

When to Use

  • Auditing design consistency across apps
  • Reviewing color palette usage
  • Checking UI/UX patterns
  • Validating component styling
  • Ensuring accessibility compliance
  • Identifying design inconsistencies
  • Reviewing new features for design standards

Quick Reference

Color Rules

DO: Use semantic tokens (bg-primary, text-base-content, bg-base-100) DON'T: Hardcode hex colors (#000000) or arbitrary values (bg-[#123456])

Component Patterns

  • Cards: .gf-card
  • App shells: .gf-app
  • Modals: .glass-modal
  • Inputs: .glass-input, .form-focus
  • Buttons: btn btn-primary, .btn-secondary, btn-ghost

Spacing

DO: Use Tailwind scale (p-4, m-6, gap-4) DON'T: Use arbitrary values (p-[17px])

Accessibility

  • Semantic HTML (<button>, <nav>, <main>)
  • ARIA labels on interactive elements
  • 4.5:1 contrast for text, 3:1 for UI
  • Focus states: focus:outline-none focus:ring-2 focus:ring-primary

Responsive

  • Mobile-first with sm:, md:, lg:, xl: modifiers
  • Responsive typography: text-3xl sm:text-4xl

Audit Phases

  1. Color Palette - Scan for hardcoded colors, verify theme tokens
  2. Component Patterns - Check cards, buttons, forms use theme classes
  3. Spacing & Layout - Verify consistent spacing scale
  4. Typography - Check heading hierarchy and text styles
  5. Accessibility - Run automated checks, keyboard testing

AI Slop Prevention

Audit for generic "AI-generated" aesthetics:

  • Generic fonts (Inter, Roboto everywhere)
  • Purple gradients on white
  • Predictable layouts without character
  • Safe, boring color choices

Push for distinctive, branded designs with personality.

For detailed checklists, examples, reporting templates, and audit commands, see: references/full-guide.md

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护，适用 Google 的隐私权政策和服务条款。

同一仓库的技能

2000s-visualization-expert

免费

Expert in 2000s-era music visualization (Milkdrop, AVS, Geiss) and modern WebGL implementations. Specializes in Butterchurn integration, Web Audio API AnalyserNode FFT data, GLSL shaders for audio-reactive visuals, and psychedelic generative art. Activate on "Milkdrop", "music visualization", "WebGL visualizer", "Butterchurn", "audio reactive", "FFT visualization", "spectrum analyzer". NOT for simple bar charts/waveforms (use basic canvas), video editing, or non-audio visuals.

中文简介正在准备中。当前显示原文说明。

curiositech/port-daddy32026年10月19日 更新

2026-legal-research-agent

免费

Expert legal research agent for finding and scraping expungement data state by state. Knows authoritative sources, URL patterns, Firecrawl configuration, and 2026 legal landscape.

中文简介正在准备中。当前显示原文说明。

curiositech/port-daddy32026年10月19日 更新

3d-cv-labeling-2026

免费

Expert in 3D computer vision labeling tools, workflows, and AI-assisted annotation for LiDAR, point clouds, and sensor fusion. Covers SAM4D/Point-SAM, human-in-the-loop architectures, and vertical-specific training strategies. Activate on '3D labeling', 'point cloud annotation', 'LiDAR labeling', 'SAM 3D', 'SAM4D', 'sensor fusion annotation', '3D bounding box', 'semantic segmentation point cloud'. NOT for 2D image labeling (use clip-aware-embeddings), general ML training (use ml-engineer), video annotation without 3D (use computer-vision-pipeline), or VLM prompt engineering (use prompt-engineer).

中文简介正在准备中。当前显示原文说明。

curiositech/port-daddy32026年10月19日 更新

a-discussion-of-decision-making-applied

免费

Apply crisis decision-making research to agent routing, uncertainty triage, and coordination failure analysis in time-pressured systems. Use when diagnosing handoff failures, analytical paralysis, or expert judgment under incomplete information. NOT for routine coding, simple CRUD design, or static single-agent tasks with complete information.

中文简介正在准备中。当前显示原文说明。

curiositech/port-daddy32026年10月19日 更新

a-naturalistic-study-of-insight

免费

Use for insight, reframing, contradiction, impasse, and anomaly-driven problem solving when execution effort no longer helps. NOT for routine optimization, error correction, or well-specified tasks with known solution paths.

中文简介正在准备中。当前显示原文说明。

curiositech/port-daddy32026年10月19日 更新

a-task-analysis-of-pier-side-ship-handli

免费

Apply cognitive task analysis to expert work that depends on perceptual cues, branching judgment, and recurring monitoring loops. Use when decomposing expert capability into agent structure, simulation design, or validation interviews. NOT for ordinary step-by-step SOP capture or simple pipelines with no tacit cue layer.

中文简介正在准备中。当前显示原文说明。

curiositech/port-daddy32026年10月19日 更新

查看 curiositech 的全部技能

报告此技能的问题