Impeccable

https://impeccable.style
Admin
Impeccable is a design skill system for AI coding tools that provides 17 commands and curated design...
Tokens:21,149
Snippets:374
Trust Score:5.2
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Impeccable CLI

Source: https://impeccable.style/docs

Run this command from the project root to install the tool.

```bash
npx impeccable install
```

--------------------------------

### Skip hook setup during installation or updates

Source: https://impeccable.style/docs/hooks

Run installation or update commands without configuring hooks.

```bash
npx impeccable install --no-hooks
npx impeccable update --no-hooks
```

--------------------------------

### Start Live Browser Iteration

Source: https://impeccable.style/docs/impeccable

Initiate the visual iteration flow in the browser.

```bash
/impeccable live
```

--------------------------------

### Add Impeccable via General Skills Installer

Source: https://impeccable.style

Installs a shared build compatible with all harnesses, though it lacks provider-native optimizations.

```bash
npx skills add pbakaus/impeccable
```

--------------------------------

### Standard Impeccable Workflow

Source: https://impeccable.style/tutorials/getting-started

The recommended sequence of commands to install, initialize, and polish a project page.

```text
npx impeccable install
/impeccable init
/impeccable polish the page you care about
```

--------------------------------

### Run the Impeccable initialization command

Source: https://impeccable.style/docs/init

Execute this command at the start of a new project or when the brand direction shifts to establish project context.

```bash
/impeccable init
```

--------------------------------

### Example polish output

Source: https://impeccable.style/docs/polish

A summary of the fixes applied during a successful polish run.

```text
Visual alignment: fixed 3 off-grid elements (8px baseline)
Typography: tightened h1 kerning, fixed widow on testimonial
Interaction: added hover state on FAQ items, focus ring on email input
Motion: softened modal entrance, added reduced-motion fallback
Copy: removed one "Lorem ipsum" stray, aligned button voice
```

--------------------------------

### Adapt a page for mobile

Source: https://impeccable.style/docs/adapt

Example command to trigger the adaptation process for a specific page.

```text
/impeccable adapt the settings page for mobile
```

--------------------------------

### Update Impeccable

Source: https://impeccable.style

Updates the Impeccable installation using either the native CLI or the general skills installer.

```bash
npx impeccable update
```

```bash
npx skills update
```

--------------------------------

### /impeccablelive

Source: https://impeccable.style

Starts Live Mode against a running application to allow for real-time element picking and page-level steering.

```APIDOC
## /impeccablelive

### Description
Starts Live Mode against the running app. It opens the page and waits for element picks and page-level steering.
```

--------------------------------

### Run Impeccable Commands

Source: https://impeccable.style/docs/impeccable

Execute the main command to get recommendations or perform specific design tasks.

```bash
/impeccable
```

```bash
/impeccable redo this hero section
```

```bash
/impeccable build me a pricing page for a developer tool
```

--------------------------------

### Initiate Shape Discovery

Source: https://impeccable.style/docs/shape

Run this command to start a structured discovery interview for a specific feature.

```text
/impeccable shape a daily digest email preferences page
```

--------------------------------

### Optimization Results Output

Source: https://impeccable.style/docs/optimize

Example of the quantified performance improvements reported after running the optimization skill.

```text
LCP: 3.2s → 1.4s
  - Hero image preloaded (-800ms)
  - Removed render-blocking font stylesheet (-240ms)
  - Deferred analytics script (-180ms)

INP: 240ms → 90ms
  - Debounced scroll handler
  - Memoized expensive list render
  - Removed synchronous layout read in event loop

CLS: 0.18 → 0.02
  - Set dimensions on hero image and logo
  - Reserved space for async header badge

Bundle: 340KB → 180KB
  - Removed unused lodash import (52KB)
  - Code-split the playground route (78KB)
  - Dropped deprecated icon set (30KB)
```

--------------------------------

### Run diagnostic check

Source: https://impeccable.style/docs/hooks

Verify that the hook is correctly installed and resolving paths properly.

```bash
/impeccable doctor
```

--------------------------------

### Example polish pass output

Source: https://impeccable.style/tutorials/getting-started

A summary of the types of changes applied during a typical polish pass.

```text
Visual alignment: fixed 3 off-grid elements
Typography: tightened h1 kerning, fixed widow on feature list
Color: replaced one hardcoded hex with --color-accent token
Interaction: added missing hover state on FAQ items
Motion: softened modal entrance to 220ms ease-out-quart
Copy: removed stray 'Lorem' placeholder
```

--------------------------------

### Harden a specific page for long names

Source: https://impeccable.style/docs/harden

Example command to trigger the hardening process for a user profile page focusing on name length constraints.

```text
/impeccable harden the user profile page for long names
```

--------------------------------

### View AI Critique Report

Source: https://impeccable.style/tutorials/critique-with-overlay

Example output of the combined assessment report generated by the /impeccable critique command.

```text
AI slop verdict: FAIL
  Detected tells: gradient-text (2), ai-color-palette (1),
                  nested-cards (1), side-tab (3)

Heuristic scores (avg 2.8/4):
  Visibility of status: 3 (good)
  Match between system and real world: 2 (partial)
  Consistency and standards: 2 (partial)
  ...

Cognitive load: 3/8 failures (moderate)
  Visible options at primary decision: 6 (flag)
  Decision points stacked at top: yes (flag)
  Progressive disclosure: absent on advanced pricing toggles

What's working:
  - Clear price hierarchy
  - Strong headline

Priority issues:
  1. Hero uses gradient text on the main price
     Why: AI tell, reduces contrast, hurts scannability
     Fix: solid ink color at one weight heavier
  2. Feature comparison table has 4 nested card levels
     Why: visual noise, unclear hierarchy
     Fix: flatten to a table with zebra striping

Questions to answer:
  - Is the free tier a real product or a funnel?
  - What does a user feel when they land here from an ad vs from search?
```

--------------------------------

### Initiate site generation request

Source: https://impeccable.style/cases/neo-mirai

Use this command to trigger the site generation workflow by providing a descriptive prompt for the desired website.

```text
$/impeccable retro-futurist AI design conference website
```

--------------------------------

### Run Critique Command

Source: https://impeccable.style/docs/critique

Initiate a design review for a specific page or component.

```bash
/impeccable critique the homepage hero
```

--------------------------------

### Execute Onboarding Command

Source: https://impeccable.style/docs/onboard

Initiate the onboarding design process for a specific feature or area.

```text
/impeccable onboard the editor
```

--------------------------------

### Example audit output format

Source: https://impeccable.style/docs/audit

The expected structure of the audit report, detailing scores and severity-rated findings.

```text
Accessibility: 2/4 (partial)
  P0: Missing form labels on 4 inputs
  P1: Contrast 3.1:1 on disabled button state
  P2: No visible focus indicator on custom dropdown

Performance: 3/4 (good)
  P1: Hero image not lazy-loaded (340KB)
  ...
```

--------------------------------

### Execute polish command

Source: https://impeccable.style/docs/polish

Run this command to initiate the polish process on a specific page.

```text
/impeccable polish the pricing page
```

--------------------------------

### Run Impeccable critique command

Source: https://impeccable.style/tutorials/critique-with-overlay

Execute this command in your harness to initiate parallel LLM and automated assessments for a specific URL.

```bash
/impeccable critique the pricing page at localhost:3000/pricing
```

--------------------------------

### GET /api/roll

Source: https://impeccable.style/research

Deals a set of six challengers from the approved pool, including two from each translation tier and three compositions matched to the surface's mode.

```APIDOC
## GET /api/roll

### Description
Deals a hand of six challengers from the approved pool. The response exposes only the entries dealt. Reproducibility is supported by using the same key against the same pool revision.

### Method
GET

### Endpoint
/api/roll

### Response
#### Success Response (200)
- **dealt_worlds** (array) - The list of six challengers dealt from the pool, including their rendered cards, design-system board, and desktop hero.
```

--------------------------------

### Run Impeccable detection in CI

Source: https://impeccable.style/designing

Execute the detection tool in a CI environment to fail builds when design inconsistencies are found.

```bash
$npx impeccable detect src/
```

--------------------------------

### Run Optimization Command

Source: https://impeccable.style/docs/optimize

Initiate the performance optimization process for a specific page.

```text
/impeccable optimize the homepage
```

--------------------------------

### Generate scaffold DESIGN.md in seed mode

Source: https://impeccable.style/docs/document

Creates a scaffold file through a series of strategic questions, intended for projects without existing implemented tokens.

```bash
/impeccable document --seed
```

--------------------------------

### Configure OpenAI API Key

Source: https://impeccable.style/docs/new-work

Set the environment variable to enable image generation capabilities when using Impeccable without a built-in image tool.

```bash
export OPENAI_API_KEY=sk-...
```

--------------------------------

### Initiate new work requests

Source: https://impeccable.style/docs/new-work

Use these commands to request new pages, redesigns, or specific additions to existing content.

```text
/impeccable a pricing page for enterprise customers
/impeccable redesign the marketing site
/impeccable add a comparison table to the pricing page
```

--------------------------------

### Provide a specific design brief

Source: https://impeccable.style/docs/new-work

Include specific design constraints like eras, materials, typefaces, or palettes to override default system choices.

```text
/impeccable a landing page for our vinyl shop, 1970s hi-fi catalog look, Futura
```

--------------------------------

### Define default configuration

Source: https://impeccable.style/docs/config

The standard structure for the .impeccable/config.json file, defining detector and hook behaviors.

```json
{
  "detector": {
    "ignoreRules": [],
    "ignoreFiles": [],
    "ignoreValues": [],
    "designSystem": {
      "enabled": true
    }
  },
  "hook": {
    "enabled": true,
    "quiet": false,
    "auditLog": ".impeccable/hook.ndjson"
  }
}
```

--------------------------------

### Execute colorize command

Source: https://impeccable.style/docs/colorize

Trigger the colorize process for a specific interface component.

```text
/impeccable colorize the dashboard
```

--------------------------------

### Define platform values in PRODUCT.md

Source: https://impeccable.style/docs/context

Specify the target platform for your project to enable platform-specific audits and design guidance.

```text
Value| Means  
---|---  
`web`| A website or web app, including responsive mobile web. The default.  
`ios`| A native iOS or iPadOS app. Loads the Apple HIG guidance.  
`android`| A native Android app. Loads Material Design 3 guidance.  
`adaptive`| One Flutter, React Native, or KMP codebase that genuinely adapts per OS. Loads both.
```

--------------------------------

### Execute Impeccable Commands

Source: https://impeccable.style/tutorials/getting-started

The standard syntax for invoking Impeccable commands within your AI coding harness.

```text
/impeccable <command> <target>
```

--------------------------------

### Manage hook lifecycle

Source: https://impeccable.style/docs/config

Commands to check status or toggle hook execution.

```bash
/impeccable hooks status
/impeccable hooks on
/impeccable hooks off
```

--------------------------------

### Refresh design documentation

Source: https://impeccable.style/docs/detector

Update the local design system data if the DESIGN.md file is stale.

```bash
/impeccable document
```

--------------------------------

### /impeccableshape

Source: https://impeccable.style

Initiates a design brief through structured discovery to plan UX and UI before building.

```APIDOC
## /impeccableshape

### Description
Think before you build. Produce a design brief through discovery, not guesswork. This command is used to plan UX and UI through structured discovery.
```

--------------------------------

### Define project roots in configuration

Source: https://impeccable.style/docs/config

Specify custom project roots in the configuration file when standard workspace declarations are absent or insufficient.

```json
{
  "projectRoots": ["docs/design/skins/*"]
}
```

--------------------------------

### Run Automated Detector

Source: https://impeccable.style/docs/critique

Execute the deterministic detector to identify common AI-generated design patterns.

```bash
npx impeccable detect
```

--------------------------------

### Manage Command Shortcuts

Source: https://impeccable.style/docs/impeccable

Pin or unpin commands to create shortcuts for frequently used functionality.

```bash
/impeccable pin critique
```

```bash
/impeccable pin polish
```

```bash
/impeccable pin audit
```

```bash
/impeccable pin live
```

```bash
/impeccable pin critique
```

```bash
/impeccable unpin critique
```

--------------------------------

### Trigger the clarify skill

Source: https://impeccable.style/docs/clarify

Use this command to initiate the clarification process for a specific interface component.

```text
/impeccable clarify the billing form
```

--------------------------------

### List current ignores

Source: https://impeccable.style/docs/config

Displays all active detector exceptions currently configured for the project.

```bash
npx impeccable ignores list
```

--------------------------------

### Configure hook settings

Source: https://impeccable.style/docs/hooks

JSON structure for defining hook lifecycle settings within the .impeccable/config.json file.

```json
{
  "hook": {
    "enabled": true,
    "quiet": false,
    "auditLog": ".impeccable/hook.ndjson"
  }
}
```

--------------------------------

### Manage detector ignores

Source: https://impeccable.style/docs/detector

Configure rules to ignore specific findings, values, or files.

```bash
npx impeccable ignores list
npx impeccable ignores add-value overused-font Inter --reason "Brand font"
npx impeccable ignores add-file "src/legacy/**"
```

--------------------------------

### Execute extraction command

Source: https://impeccable.style/docs/extract

Trigger the extraction process for a specific UI element using the impeccable CLI.

```bash
/impeccable extract the button styles
```

--------------------------------

### Execute typeset command

Source: https://impeccable.style/docs/typeset

Trigger the typography improvement process for a specific layout.

```text
/impeccable typeset the article layout
```

--------------------------------

### Skip design-system rules for a manual scan

Source: https://impeccable.style/docs/config

Use the --no-design-system flag during a manual scan to override configuration settings.

```bash
npx impeccable detect --no-design-system src/
```

--------------------------------

### Configure per-edit rules

Source: https://impeccable.style/docs/hooks

Override the default split-reporting behavior by setting all rules to run on every edit in the configuration file.

```json
hook: { "perEditRules": "all" }
```

--------------------------------

### Execute Distill Command

Source: https://impeccable.style/docs/distill

Trigger the distillation process for a specific interface or component.

```text
/impeccable distill this dashboard
```

--------------------------------

### /impeccablecraft

Source: https://impeccable.style

A deprecated compatibility alias for standard Impeccable new-work requests. It functions identically to natural build and redesign requests.

```APIDOC
## /impeccablecraft

### Description
Deprecated compatibility alias for an ordinary Impeccable new-work request. It adds no behavior; natural build and redesign requests use the same flow.
```

--------------------------------

### Trigger layout optimization

Source: https://impeccable.style/docs/layout

Execute the layout command on a specific page to initiate spacing and structural improvements.

```text
/impeccable layout the settings page
```

--------------------------------

### Trigger Overdrive Command

Source: https://impeccable.style/docs/overdrive

Execute the overdrive command to initiate high-ambition UI transformations for a specific component.

```text
/impeccable overdrive the landing hero
```

--------------------------------

### Run detector scans

Source: https://impeccable.style/docs/detector

Execute design checks on various targets including directories, specific files, and URLs.

```bash
npx impeccable detect src/
```

```bash
npx impeccable detect src/components/Card.tsx
```

```bash
npx impeccable detect https://example.com
```

--------------------------------

### Configure scan options

Source: https://impeccable.style/docs/detector

Run scans with specific flags to disable design-system checks or limit the scan scope.

```bash
npx impeccable detect --no-design-system src/
```

```bash
npx impeccable detect --scope type src/
```

```bash
npx impeccable detect --scope layout src/
```

--------------------------------

### Execute delight skill

Source: https://impeccable.style/docs/delight

Run the delight skill on a specific part of the application to generate personality-driven UI improvements.

```text
/impeccable delight the first-run experience
```

--------------------------------

### Run an audit on a specific flow

Source: https://impeccable.style/docs/audit

Execute the audit command targeting a specific path or feature set.

```text
/impeccable audit the checkout flow
```
Tokens:
Raw