Summary

Rewrites the frontend-design skill from a 43-line aesthetic manifesto into a structured, layered, cross-agent compatible skill that detects existing design systems, provides context-specific guidance, and verifies its own output via browser screenshots. Also adds a surgical trigger in ce-work-beta to load the skill for UI tasks without Figma designs.

Problem

The current frontend-design skill provides vague creative encouragement ("be bold", "choose a BOLD aesthetic direction") but lacks:

• Context detection -- no mechanism to detect existing design systems, so it fights the codebase
• Practical structure -- no concrete constraints, just aesthetic aspiration
• Context-specific guidance -- landing pages, dashboards, and components in existing apps all get the same "be bold" treatment
• Accessibility -- zero mention of contrast, focus states, or semantic HTML
• Verification -- no step to actually look at what was built
• Beta workflow integration -- ce:work-beta has no way to invoke it (skill is effectively orphaned)

Approach

We analyzed two external references and synthesized the best ideas from each:

1. Anthropic's official frontend-design skill -- our current skill was originally based on this. Nearly identical to ours, same gaps. Credit to Anthropic for the foundational anti-AI-slop identity and creative energy that we carry forward.

2. OpenAI's "Designing Delightful Frontends with GPT-5.4" -- dramatically more comprehensive with composition rules, context modules, card philosophy, copy guidelines, motion specifics, and litmus checks. Credit to OpenAI for demonstrating the level of structure needed to produce genuinely good frontend output from coding agents.

Where we go beyond both

New skill structure (Layer 0 through Visual Verification)

Frontmatter (optimized description for discovery)
Preamble (authority hierarchy, workflow preview)
Layer 0: Context Detection
  - Concrete signal checklist (design tokens, component libs, CSS frameworks, etc.)
  - Mode classification: existing (4+) / partial (1-3) / greenfield (0) / ambiguous (ask)
  - Cross-platform question pattern with fallback
Layer 1: Pre-Build Planning
  - Visual thesis, content plan, interaction plan (3 short statements)
Layer 2: Design Guidance Core
  - Typography, Color, Composition, Motion, Accessibility, Imagery
  - All yield to existing systems
Context Modules (select one)
  - A: Landing Pages (greenfield)
  - B: Apps & Dashboards (greenfield)
  - C: Components & Features (default in existing apps)
Hard Rules & Anti-Patterns (two tiers)
Litmus Checks (context-sensitive)
Visual Verification (tool cascade: existing > MCP > agent-browser > mental review)
Creative Energy (carried forward from original skill)

ce-work-beta integration

Added a new Phase 2 item that loads the frontend-design skill for UI tasks without Figma designs. Also fixed pre-existing duplicate item numbering (two items were both "6.").

Files changed

Test plan

• bun test -- 364 pass, 0 fail
• bun run release:validate -- metadata in sync (29 agents, 42 skills, 1 MCP server)
• AGENTS.md skill compliance checklist verified (cross-platform question patterns, semantic skill references, no hardcoded tool names, imperative voice)
• Manual test: invoke frontend-design skill on a greenfield landing page task
• Manual test: invoke frontend-design skill on a component addition in an existing Next.js app (should detect design system and use Module C)
• Manual test: run ce:work-beta on a plan with UI tasks and no Figma designs (should auto-load the skill)