feat: Add Impeccable design skills to VM and integrate into sundai-project-pipeline

[natea]

Goal

Install Impeccable — a 21-skill design toolkit for AI code assistants — on the VM and integrate its design capabilities into the sundai-project-pipeline skill so that Sundai projects ship with polished, professional UI by default.

What is Impeccable?

Impeccable is a skill pack that provides professional frontend design vocabulary and capabilities to AI agents. It includes 21 skills covering:

• /polish — refine UI design quality
• /audit — run design quality checks (accessibility, performance, visual)
• /typeset — typography recommendations
• /colorize — color system improvements
• /critique — visual critique against Nielsen's usability heuristics
• /animate — motion design
• /arrange — layout and spacing
• /overdrive — aggressive design enhancement
• Plus 13 more (adapt, bolder, clarify, delight, distill, extract, frontend-design, harden, normalize, onboard, optimize, quieter, teach-impeccable)

Each skill has reference docs covering typography, color/contrast, spatial design, responsive design, motion, interaction design, and UX writing.

Two integration paths

Option A: Install via OpenClaw on the VM

PR #77 adds first-class OpenClaw support to Impeccable. Since we now have Codex on the VM, we could tell OpenClaw to use Impeccable with Codex directly:

# Copy OpenClaw skills into the agent workspace
cp -r dist/openclaw/.openclaw/skills/* skills/

Option B: Install as Claude Code skills

npx skills add pbakaus/impeccable

This auto-detects Claude Code and places skills in .claude/skills/.

Recommendation: Option A (OpenClaw + Codex) is more flexible since Codex is already on the VM, and the OpenClaw format includes permissions/triggers metadata.

Pipeline integration

Update sundai-project-pipeline to invoke Impeccable skills during the build:

1. After Fabro build (Step 2): Run /polish on the generated frontend code to improve visual quality
2. Before deploy (Step 3): Run /audit to check design quality score and flag issues
3. During polish phase: Use /typeset, /colorize, /arrange as needed based on audit results
4. Optional: Run /critique for a UX heuristic evaluation and include score in the PR

This would replace/augment the current Fabro "Polish" stage with domain-specific design skills that have deeper knowledge of typography, color theory, layout, and interaction design.

References

• Impeccable website: https://impeccable.style/
• OpenClaw support PR: feat: add OpenClaw agent support pbakaus/impeccable#77
• Skills list: audit, polish, typeset, colorize, critique, animate, arrange, overdrive, adapt, bolder, clarify, delight, distill, extract, frontend-design, harden, normalize, onboard, optimize, quieter, teach-impeccable

Tasks

• Install Impeccable on the VM (OpenClaw or Claude Code path)
• Verify all 21 skills are accessible from the agent workspace
• Create .impeccable.md project context file template for Sundai projects
• Update sundai-project-pipeline Step 2 to run /polish after Fabro build
• Update sundai-project-pipeline Step 3 to run /audit before deploy
• Document the integration in the pipeline changelog

[natea]

Additional design skills to evaluate

Three more skill packs that should be evaluated alongside Impeccable for inclusion in the pipeline:

1. UI/UX Pro Max (UUPM)

github.com/nextlevelbuilder/ui-ux-pro-max-skill — 55.8k stars, actively maintained (pushed Mar 28)
Website: https://www.uupm.cc/

A design intelligence database + Claude Code skill with massive breadth:

• 57 UI design styles (glassmorphism, neumorphism, brutalism, aurora UI, etc.)
• 95 color palette systems organized by industry (SaaS, healthcare, e-commerce, fintech)
• 56 font pairings with Google Fonts integration
• 24 chart type recommendations with library suggestions
• 29 landing page pattern templates
• 8 framework-specific tech stacks (React, Next.js, Vue, Svelte, SwiftUI, etc.)
• UX guidelines for animation, accessibility, performance, loading states

Pipeline fit: Could replace the "guess at a color scheme" problem in Fabro builds. Feed it the project's domain (e.g., "health app") and get a tested color palette, font pairing, and design style recommendation before implementation.

2. Bencium Marketplace

github.com/bencium/bencium-marketplace — 126 stars, MIT license, pushed Mar 20

A 13-skill marketplace with strong design + architecture coverage:

• controlled-ux-designer — systematic UX with WCAG 2.1 AA compliance
• innovative-ux-designer — bold creative interfaces for landing pages
• impact-designer — production-grade frontend avoiding generic AI aesthetics
• design-audit — visual audits with implementation-ready fix plans
• typography — professional typography enforcement
• renaissance-architecture — first-principles architecture thinking
• vanity-engineering-review — code quality reviews focused on user value

Pipeline fit: The impact-designer skill specifically targets "avoiding generic AI aesthetics" — exactly our problem. The design-audit skill could run alongside Impeccable's /audit for a second opinion.

Recommendation

Evaluate all four (Impeccable, UUPM, Bencium, and the tools already listed in this issue) and pick the best combination. They have different strengths:

Skill Pack	Strength	Stars
Impeccable	Design vocabulary + polish commands	22k+
UUPM	Design database (palettes, fonts, styles, patterns)	55.8k
Bencium	Anti-generic-AI design + UX auditing	126

They could complement each other: UUPM for design decisions before implementation, Impeccable for during polish, and Bencium's design-audit for after verification.

[natea]

Also evaluate: Awesome DESIGN.md by VoltAgent

github.com/VoltAgent/awesome-design-md — 11.2k stars, MIT license, actively maintained (pushed Apr 3)

A curated collection of 55+ DESIGN.md files that capture complete design systems from popular websites. Drop one into your project and AI coding agents build UI that matches.

How it works:

• Each DESIGN.md has 9 standardized sections: visual theme, color palette, typography, component styles, layout principles, depth/elevation, design guidelines, responsive behavior, and agent prompt suggestions
• Plain markdown format — optimized for how LLMs process information
• Includes preview HTML files demonstrating colors, typography, and component states

Included design systems (55+ companies):

• AI Platforms: Claude, Cohere, ElevenLabs, Mistral AI, Ollama, Replicate, xAI
• Developer Tools: Cursor, Linear, Raycast, Supabase, Vercel, Warp
• Infrastructure: MongoDB, Stripe, ClickHouse, HashiCorp
• Design/Productivity: Figma, Notion, Miro, Webflow, Airtable
• Consumer: Apple, Spotify, Airbnb, Uber, SpaceX

Pipeline fit: Instead of Fabro/polish guessing at a design language, we could:

1. Pick a DESIGN.md that matches the project's vibe (e.g., "Stripe" for a fintech tool, "Linear" for a dev tool)
2. Drop it into the repo before Fabro runs
3. Fabro implements against a real, battle-tested design system

This is different from the other tools — it's not a skill that audits or polishes. It's design input that defines the target aesthetic upfront. Could be combined with any of the others:

Tool	Role	When
DESIGN.md	Define target aesthetic	Before build
UUPM	Design decisions (colors, fonts, patterns)	Before build
Impeccable	Polish and refine	During build
Bencium	Anti-generic audit	After build