impeccable

Generate frontend UI design and implementation instructions with typography, color, and motion constraints.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/ceshez/VELAR --skill impeccable-ceshez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: impeccable
Source: https://github.com/ceshez/VELAR/tree/main/.agents/skills/impeccable
Command: npx skills add https://github.com/ceshez/VELAR --skill impeccable-ceshez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

It helps you create distinctive, production-grade frontend interfaces with strong visual quality and avoids generic, “AI slop” design output.

Core Features & Use Cases

  • Context-guarded design output: Enforces required design context (audience, use cases, brand tone) before producing UI work.
  • High-polish UI craftsmanship: Guides typography, color/contrast, layout rhythm, interaction states, motion, and responsive behavior with explicit quality rules and anti-pattern bans.
  • Workflow modes: Supports craft mode for implement-with-brief, teach mode for one-time context setup, and extract mode for reusable design-system components.

Quick Start

Provide the design context (audience, use cases, and brand personality) and then ask to build the UI artifact you need with /impeccable craft describing what you want.

Frequently Asked Questions about impeccable

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I avoid generic AI design output when building frontend UI?

To avoid generic AI design output when building frontend UI, use a skill that enforces strict typography, color contrast, and anti-AI-slop constraints. This ensures your web components and pages have distinctive, production-grade visual quality.

What design context do I need before generating responsive web components?

Before generating responsive web components, you must provide design context including audience, use cases, and brand tone. Context-guarded design output enforces these prerequisites to ensure high-polish UI craftsmanship and relevant visual results.

How do I extract and reuse design system components from existing UI?

To extract and reuse design system components from existing UI, use the extract mode. This workflow mode analyzes your current frontend implementation and generates reusable component instructions based on your established typography and color contrast rules.

Can I use this skill to build a complete frontend application without a design system?

You can build a complete frontend application without a pre-existing design system by using teach mode. This one-time context setup initializes your audience, use cases, and brand personality, allowing the skill to guide subsequent UI craftsmanship.

What are the limitations of using automated UI craftsmanship for frontend design?

A limitation of automated UI craftsmanship is its dependency on explicit design context; without initialized audience or brand tone, output quality drops. It enforces anti-pattern bans and motion rules but requires your ongoing input for complex UX interactions.

Does this UI design approach work for posters and static artifacts?

Yes, this UI design approach works for posters and static artifacts when design context is available. It applies production-grade frontend UI rules—like layout rhythm, typography, and color contrast—to generate high-polish implementation instructions for various artifacts.