Skip to content
cccskills
FreePublished on 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.

The English summary is being prepared. Showing the original description.

Run score Not tested

See how to install

Files included (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 (original)

Review the instructions the agent will receive before you install.

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)

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

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

The English summary is being prepared. Showing the original description.

northseadl/norix-skills6Updated Apr 10, 2026

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, 头脑风暴, 多视角讨论, 集思广益.

The English summary is being prepared. Showing the original description.

northseadl/norix-skills6Updated Apr 10, 2026

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).

The English summary is being prepared. Showing the original description.

northseadl/norix-skills6Updated Apr 10, 2026

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

The English summary is being prepared. Showing the original description.

northseadl/norix-skills6Updated Apr 10, 2026

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

The English summary is being prepared. Showing the original description.

northseadl/norix-skills6Updated Apr 10, 2026

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

The English summary is being prepared. Showing the original description.

northseadl/norix-skills6Updated Apr 10, 2026

See all skills by northseadl

Report a problem with this skill