impeccable

Generates production-grade frontend interfaces with distinctive typography, color, and layout guidelines.

Updated Jul 21, 2026
One-click install
npx skills add https://github.com/masakinihirota/2026src-ni --skill impeccable-masakinihirota
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: impeccable
Source: https://github.com/masakinihirota/2026src-ni/tree/main/.agents/skills/impeccable
Command: npx skills add https://github.com/masakinihirota/2026src-ni --skill impeccable-masakinihirota

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? AI-generated frontend code tends to converge on generic, recognizable aesthetics—default fonts, gradient text, side-stripe cards, and templated layouts. This Skill enforces a structured design process with explicit anti-pattern bans and project-specific design context so interfaces look intentionally designed rather than machine-generated. ## Core Features & Use Cases - Design Context Setup (teach mode): Scans the codebase, asks targeted UX questions, and writes a persistent Design Context file (.impeccable.md) capturing audience, brand personality, and aesthetic direction. - Guided Feature Building (craft mode): Shapes a design brief, loads relevant reference guides (typography, color, spatial, motion, interaction, responsive, UX writing), builds the feature, and iterates visually against quality checks. - Design System Extraction (extract mode): Identifies repeated components, hard-coded values, and patterns used 3+ times, then consolidates them into reusable components and design tokens. - Use Case: When asked to build a landing page or dashboard, the Skill first gathers brand context, selects non-default fonts via a structured procedure, builds an OKLCH-based palette, and applies explicit bans on AI design tells like gradient text and border-left accent stripes. ## Quick Start Ask the assistant to run /impeccable teach to set up design context for the project, then use /impeccable craft followed by a feature description to build a polished interface.

Frequently Asked Questions about impeccable

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

FAQPage Schema
How do I set up design context for a frontend project?▼

Run the teach mode, which scans your README, package.json, components, and design tokens, then asks targeted questions about users, brand personality, and aesthetic preferences. The answers are written to a .impeccable.md file in the project root for reuse.

How do I build a UI feature with a structured design process?▼

Invoke craft mode with a feature description. It shapes a design brief, loads relevant reference guides for typography, color, spacing, and motion, builds the feature in ordered stages, and iterates visually until the result passes quality checks.

What CSS patterns does this design approach ban?▼

It strictly bans side-stripe borders (border-left or border-right wider than 1px on cards and callouts) and gradient text via background-clip: text. It also prohibits pure black or white, gray text on colored backgrounds, and defaulting to dark mode with glowing accents.

Which fonts should I avoid when designing web interfaces?▼

Avoid reflex defaults including Inter, Roboto, Open Sans, Fraunces, Playfair Display, Space Grotesk, DM Sans, and IBM Plex families. The selection procedure requires defining three concrete brand words, then browsing font catalogs for a typeface matching that specific personality.

Can I extract reusable components into a design system?▼

Yes, extract mode identifies components and hard-coded values repeated three or more times, then consolidates them into reusable components with proper props, variants, accessibility, and design tokens. It also migrates existing usages and updates documentation.

When should I use OKLCH instead of HSL for colors?▼

Use OKLCH for all palette construction because it is perceptually uniform, meaning equal lightness steps look equal. Reduce chroma as colors approach white or black, and tint neutrals slightly toward your brand hue for cohesion.