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

agent-front-design

Frontend design blueprints with craftsmanship scoring, self-critique loops, and engineering handoff. Aesthetic intelligence against AI homogeneity. Use for: UI/UX design specs, design system creation, visual direction exploration, component design review, design-to-engineering handoff.

インストール方法を見る

含まれるファイル(7)

  • SKILL.md2.4 KB
  • agents/openai.yaml265 B
  • references/aesthetic-intelligence.md8.3 KB
  • references/critique-protocol.md3.8 KB
  • references/design-system.md2.7 KB
  • references/engineering-handoff.md1.8 KB
  • references/page-patterns.md2.3 KB

SKILL.md(原文)

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

Frontend Design Excellence

Produce stunning, implementable frontend designs. Break free from AI aesthetic defaults. Push every component from "functional" to "remarkable."

Modes

Explore

Creative direction exploration. Generate 2-3 candidates with rationale and risks. No "publishable" conclusion. Read references/aesthetic-intelligence.md first.

Production

Converge to one implementable spec. Requires:

  1. Choose one direction, reject alternatives with reasons
  2. Full spec: color, typography, layout, component tree, state coverage
  3. Run Critique (see below) — fix all 🔴 before delivery
  4. Output quality score and release recommendation

Critique

Self-evaluation as a harsh design critic. Breaks you out of aesthetic comfort zones.

Auto-triggered at end of Production. User-triggered anytime via "critique", "残酷审视", "review the design."

Execute: read references/critique-protocol.md, run the full protocol.

Default flow: Explore → Production (includes Critique) → Deliver.

Reference Routing

Read on demand, by task phase:

PhaseFileWhen
Directionreferences/aesthetic-intelligence.mdAlways at start — the core
Critiquereferences/critique-protocol.mdProduction end, or user request
Engineeringreferences/design-system.mdDefining tokens, modern CSS
IA/Interactionreferences/page-patterns.mdPage structure, states, flows
Handoffreferences/engineering-handoff.mdReact/Vue delivery

Delivery Checklist

Final output must include:

  1. One primary direction + rejected alternatives with reasons
  2. Color palette with OKLCH values and brand rationale
  3. Typography pairing with contrast justification
  4. Key page layouts (ASCII/wireframe)
  5. Component tree with state boundaries
  6. State coverage: loading / empty / error / success / permission
  7. Critique report (or reason for skip)
  8. Quality score and release recommendation
  9. Accessibility checkpoints (contrast, keyboard, semantics)
  10. Performance budget (LCP/INP/CLS targets)

レビュー

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

同じリポジトリのスキル

概要と使いどころ

adb-mysql

無料

阿里云 AnalyticDB (ADB) for MySQL 只读数据分析。 多维分析(计数/聚合/时间序列)、交叉验证、Schema 文档生成、多 Profile。

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

northseadl/norix-skills62026年4月10日 更新

Multi-agent brainstorming: async opinion collision with expert personas. Mixed Codex/Claude Code engine. Use when multiple AI agents need to collaboratively discuss, debate, and converge on solutions through structured dialog. Triggers: brainstorm, multi-perspective discussion, opinion collision, expert debate, war room, collective intelligence, 头脑风暴, 多视角讨论, 集思广益.

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

northseadl/norix-skills62026年4月10日 更新

Multi-agent SWE team built on the Workshop model. Full-stack vertical workers, meeting room with @mention notification, private pipes, shared task board. Git worktree isolation, Leader-driven coordination. Mixed Codex/Claude Code engine. Use when a task needs engineering depth beyond a single agent. NOT for simple task parallelism (use agent-task-orchestration) or design discussions (use agent-brainstorm).

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

northseadl/norix-skills62026年4月10日 更新

Task decomposition and multi-agent orchestration with retry, checkpoint recovery, and real-time monitoring. Mixed Codex/Claude Code engine. Parallel/sequential execution.

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

northseadl/norix-skills62026年4月10日 更新

针对 cnb.cool 的云原生构建(CNB Build):生成/修改 .cnb.yml 流水线、触发规则、 构建环境、runner 资源、缓存、环境变量、手动触发与调试。 在接入、迁移、优化或排查 CNB 构建配置时使用。

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

northseadl/norix-skills62026年4月10日 更新

Coding.net DevOps automation: MR lifecycle, CI operations (trigger/logs/stop), artifact registry, cross-project queries, remote file audit.

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

northseadl/norix-skills62026年4月10日 更新

northseadl のスキルをすべて見る

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