### Initialize Impeccable Project Source: https://impeccable.style/docs/init Run this command once at the start of a new project to establish design context. It guides the setup process and configures Impeccable for your project. ```bash /impeccable init ``` -------------------------------- ### Install Impeccable Skills Source: https://impeccable.style/faq Use this command to install Impeccable skills. It automatically detects your AI harness and installs the appropriate build. For a fresh installation, use the --force flag. ```bash npx impeccable skills install ``` ```bash npx impeccable skills install --force ``` -------------------------------- ### Run Impeccable with No Command Source: https://impeccable.style/docs/impeccable Use this when you are unsure where to start. It analyzes the project and recommends the best next moves. ```bash /impeccable ``` -------------------------------- ### Install Impeccable Skills Source: https://impeccable.style/tutorials/getting-started Install Impeccable as a single agent skill from your project root. This command auto-detects your AI coding harness and installs the appropriate build. ```bash npx impeccable skills install ``` -------------------------------- ### Run Onboarding for the Editor Source: https://impeccable.style/docs/onboard Initiates the onboarding process specifically for the editor interface. This command helps replace the initial empty state with a pre-filled example document. ```bash /impeccable onboard the editor ``` -------------------------------- ### Initialize Impeccable Project Source: https://impeccable.style/docs/teach Run this command once at the beginning of a new project to establish its design context. It guides you through an interview process to define brand strategy and visual guidelines. ```bash /impeccable init ``` -------------------------------- ### Start Live Mode Source: https://impeccable.style/docs/live Initiates Live Mode, allowing you to pick elements on your running dev server for visual iteration. Open your dev server URL after running this command. ```bash /impeccable live ``` -------------------------------- ### Animate the Sign-Up Flow Source: https://impeccable.style/docs/animate Initiates the animation sequence for the sign-up flow. This is a command-line invocation to start the animation process. ```bash /impeccable animate the sign-up flow ``` -------------------------------- ### Install Impeccable Plugin for Claude Code Source: https://impeccable.style/tutorials/getting-started Claude Code users can install the Impeccable plugin directly from the plugin marketplace. ```bash /plugin marketplace add pbakaus/impeccable ``` -------------------------------- ### Generate a Mockup Source: https://impeccable.style/designing This command generates a mockup for a new feature, useful when starting from a picture or a generated direction. ```bash /impeccable craft ``` -------------------------------- ### Run Optimize Skill Source: https://impeccable.style/docs/optimize Initiates the optimize skill for a specified page or route. This command starts the diagnostic and optimization process. ```bash /impeccable optimize the homepage ``` -------------------------------- ### Start Live Mode Source: https://impeccable.style/live-mode Run this command in your terminal to activate Impeccable's Live Mode. This command initiates the interactive code generation and acceptance process. ```bash `impeccable live` ``` -------------------------------- ### Initiate End-to-End Feature Build Source: https://impeccable.style/docs/craft Use this command to start the entire development pipeline for a new feature, from initial design discovery to final visual iteration. It includes a structured interview to define the feature's goals and constraints before coding begins. ```bash /impeccable craft a pricing page for a developer tool ``` -------------------------------- ### Example Polish Run Output Source: https://impeccable.style/docs/polish Illustrates the typical output of a successful polish run, highlighting the types of small, specific fixes applied across different categories. ```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 ``` -------------------------------- ### Add Impeccable Skills via npx Source: https://impeccable.style/faq An alternative method to add Impeccable skills using npx. Note that this installs a shared build for all harnesses, unlike the project-level installation. ```bash npx skills add pbakaus/impeccable ``` -------------------------------- ### Critique Design Elements Source: https://impeccable.style/designing Use this command to get a critique of your design, helping to identify areas for improvement. ```bash /impeccable critique ``` -------------------------------- ### Check for Impeccable Updates Source: https://impeccable.style/tutorials/getting-started Check if your Impeccable installation is up-to-date. Plugin users can check for updates within the plugin menu. ```bash npx impeccable skills check ``` -------------------------------- ### Accept Variant Example Source: https://impeccable.style/live-mode This message indicates that a generated code variant has been successfully written back to the source file. The original code remains if no variant is accepted. ```text Variant 3 written to source ``` -------------------------------- ### Acceptance Confirmation Example Source: https://impeccable.style/live-mode This message confirms that a specific variant (e.g., Variant 2) has been accepted and written to the source file, replacing the original code. ```text Variant 2 written to source ``` -------------------------------- ### Pin an Impeccable Command Source: https://impeccable.style/tutorials/getting-started Create a standalone shortcut for frequently used commands by pinning them. For example, pinning 'audit' results in a direct `/audit` command. ```bash /impeccable pin ``` -------------------------------- ### Variant Navigation Example Source: https://impeccable.style/live-mode This indicates the current variant being viewed out of the total number generated. Users can navigate through these variants to select the desired one. ```text ‹ 1 / 3 › × Accept ``` -------------------------------- ### Generate Variants Example Source: https://impeccable.style/live-mode This message appears during the code generation phase, indicating that Impeccable is creating different design variants based on user input. ```text Generating variants… ``` -------------------------------- ### Pin a Command in Impeccable Source: https://impeccable.style/faq Pin commands to create standalone shortcuts. This creates a lightweight redirect skill that automatically updates when the parent skill is updated. Examples show pinning 'critique', 'polish', and 'audit'. ```bash /impeccable pin critique ``` ```bash /impeccable pin polish ``` ```bash /impeccable pin audit ``` ```bash /impeccable pin live ``` -------------------------------- ### Codex CLI Skill Location Source: https://impeccable.style/faq For Codex users, skills do not appear in the normal command picker. They can be accessed via '/skills' or '$'. Repo installs are in '.agents/skills/', user installs in '~/.agents/skills/'. Restart Codex if a new skill doesn't show up. ```bash .agents/skills/ ``` ```bash ~/.agents/skills/ ``` -------------------------------- ### Run Polish on a Specific Page Source: https://impeccable.style/docs/polish Initiates the polish process for the 'pricing page'. Use this command as the final step before shipping a feature. ```bash /impeccable polish the pricing page ``` -------------------------------- ### Run Impeccable Critique Source: https://impeccable.style/tutorials/critique-with-overlay Execute this command from your harness to initiate a design critique on a specified page. Ensure your harness has browser automation capabilities. ```bash /impeccable critique the pricing page at localhost:3000/pricing ``` -------------------------------- ### Generate a scaffold DESIGN.md for a new project Source: https://impeccable.style/docs/document Use this command for projects with no implemented tokens yet. It asks strategic questions about your visual system and creates a scaffold DESIGN.md file. ```bash /impeccable document --seed ``` -------------------------------- ### Run Impeccable with a Plain-English Request Source: https://impeccable.style/docs/impeccable Use this when you want to describe a design task in plain English. The AI will pick the right approach and perform the work directly. ```bash /impeccable redo this hero section ``` ```bash /impeccable build me a pricing page for a developer tool ``` -------------------------------- ### Impeccable Clarify Command Source: https://impeccable.style/tutorials/brand-vs-product Rewrites confusing UX copy to make interfaces self-explanatory. Combines with /polish and /adapt. ```bash /impeccableclarify ``` -------------------------------- ### Apply Delight to First-Run Experience Source: https://impeccable.style/docs/delight Use this command to introduce delightful moments into the initial user experience, such as custom empty states and engaging loading messages. ```bash /impeccable delight the first-run experience ``` -------------------------------- ### Craft a New Page Source: https://impeccable.style/tutorials/getting-started Use this command to generate a brand new feature page, following a full shape-then-build workflow. ```bash /impeccable craft a pricing page for enterprise customers ``` -------------------------------- ### Impeccable Optimize Command Source: https://impeccable.style/tutorials/brand-vs-product Diagnoses and fixes UI performance issues, from LCP to bundle size. ```bash /impeccableoptimize ``` -------------------------------- ### Impeccable Adapt Command Source: https://impeccable.style/tutorials/brand-vs-product Ensures designs work across various screens and contexts without feature amputation. Combines with /polish and /clarify. ```bash /impeccableadapt ``` -------------------------------- ### Impeccable Craft Command Source: https://impeccable.style/tutorials/brand-vs-product Initiates the full shape-then-build flow for design creation with visual iteration. ```bash /impeccablecraft ``` -------------------------------- ### Update Impeccable Skills Source: https://impeccable.style/faq Run this command to update Impeccable skills to the latest version and remove deprecated files. Use 'check' to compare your installed version with the latest release. ```bash npx impeccable skills update ``` ```bash npx impeccable skills check ``` -------------------------------- ### Impeccable Harden Command Source: https://impeccable.style/tutorials/brand-vs-product Makes interfaces production-ready by addressing edge cases, i18n, error states, and overflow. Combines with /optimize. ```bash /impeccableharden ``` -------------------------------- ### Generate DESIGN.md from existing codebase Source: https://impeccable.style/docs/document Run this command once you have defined colors, typography, and at least a button and a card in your project. It scans your codebase and generates a DESIGN.md file. ```bash /impeccable document ``` -------------------------------- ### Audit a Page Source: https://impeccable.style/tutorials/getting-started Perform checks for accessibility, performance, theming, responsiveness, and anti-patterns on an implementation before shipping. ```bash /impeccable audit the checkout ``` -------------------------------- ### Run Impeccable Commands Source: https://impeccable.style/tutorials/getting-started Access Impeccable's functionalities through the `/impeccable` command followed by a specific command and target. Type `/impeccable` alone to see all available commands. ```bash /impeccable ``` -------------------------------- ### Check Pinned Skills Directory Source: https://impeccable.style/faq To verify pinned commands, check your harness skills directory for directories named after the pinned command, such as '.claude/skills/critique/'. ```bash .claude/skills/critique/ ``` -------------------------------- ### Generate AI Design Conference Website with Impeccable Craft Source: https://impeccable.style/cases/neo-mirai Use this command to initiate the process of transforming an AI-generated design concept into a live website. It handles shaping, visual direction, implementation, and browser iteration. ```bash /impeccable craft retro-futurist AI design conference website ``` -------------------------------- ### Impeccable Layout Command Source: https://impeccable.style/tutorials/brand-vs-product Fixes layout, spacing, and visual rhythm. Combines with /distill and /adapt. ```bash /impeccablelayout ``` -------------------------------- ### Initiate Impeccable Overdrive Source: https://impeccable.style/docs/overdrive Use this command to trigger the Overdrive mode for a specific UI element or section. It's intended for creating impressive, extraordinary moments in a project. ```bash /impeccable overdrive the landing hero ``` -------------------------------- ### Run Impeccable Detect in CI Source: https://impeccable.style/designing Use the `impeccable detect` command in your CI pipeline to gate code quality. It checks a specified directory, file, or URL and provides JSON output with a failing exit code if issues are found. ```bash npx impeccable detect src/ ``` -------------------------------- ### Run Critique on a Homepage Hero Source: https://impeccable.style/docs/critique Initiates a design critique for a specified page, such as the homepage hero section. This command triggers an analysis of the page's design elements and user experience. ```bash /impeccable critique the homepage hero ``` -------------------------------- ### Generate a Design Brief for Email Preferences Source: https://impeccable.style/docs/shape Initiate the discovery interview for a daily digest email preferences page. The skill will ask a series of questions to gather necessary information for the design brief. ```bash /impeccable shape a daily digest email preferences page ``` -------------------------------- ### Apply Quieter to a Page Source: https://impeccable.style/docs/quieter Use this command to apply the quieter styling to a specific page, such as the pricing page. ```bash /impeccable quieter the pricing page ``` -------------------------------- ### Impeccable Polish Command Source: https://impeccable.style/tutorials/brand-vs-product Applies the meticulous final pass to elevate designs from good to great. ```bash /impeccablepolish ``` -------------------------------- ### Pin a Command as a Shortcut Source: https://impeccable.style/docs/impeccable Use this command to create a shortcut for a specific sub-command. This creates a lightweight redirect skill that delegates to the parent command. ```bash /impeccable pin critique ``` -------------------------------- ### Run Impeccable Layout Skill Source: https://impeccable.style/docs/layout Use this command to apply layout improvements to a specific page. It automatically adjusts spacing, hierarchy, and structure. ```bash /impeccable layout the settings page ``` -------------------------------- ### Adapt Settings Page for Mobile Source: https://impeccable.style/docs/adapt This command adapts the settings page design for a mobile context. It outlines expected changes such as grid adjustments, navigation pattern shifts, touch target improvements, and content visibility modifications. ```bash /impeccable adapt the settings page for mobile ``` -------------------------------- ### Impeccable Shape Command Source: https://impeccable.style/tutorials/brand-vs-product Use this command to plan UX and UI through structured discovery and design briefs. ```bash /impeccableshape ``` -------------------------------- ### Run Colorize Command Source: https://impeccable.style/docs/colorize Execute the colorize command to apply strategic color to a dashboard interface. This command will adjust brand colors, tint neutrals, and assign colors to buttons and chart series based on defined rules. ```bash /impeccable colorize the dashboard ``` -------------------------------- ### Pre-ship Copy Rewrite Source: https://impeccable.style/designing This command focuses on rewriting copy elements such as labels, error messages, and microcopy to be tuned to the target audience. ```bash clarify ``` -------------------------------- ### Impeccable Critique Command Source: https://impeccable.style/tutorials/brand-vs-product Initiates a design review with scoring, persona tests, and automated detection. ```bash /impeccablecritique ``` -------------------------------- ### Critique a Page Source: https://impeccable.style/tutorials/getting-started Run a full design review of a page, including scoring, persona tests, and automated detection to identify areas for improvement. ```bash /impeccable critique the landing page ``` -------------------------------- ### Pin a Favorite Command Source: https://impeccable.style/tutorials/getting-started Make a frequently used command a standalone shortcut for easier access. ```bash /impeccable pin audit ``` -------------------------------- ### Run Audit on Checkout Flow Source: https://impeccable.style/docs/audit Initiates a technical quality audit on the specified 'checkout flow'. This command is used to identify issues across accessibility, performance, theming, responsiveness, and anti-patterns. ```bash /impeccable audit the checkout flow ```