# Design quality and focused improvement playbooks These instructions extend Reinspro's reference-first workflow with independently written, adapted Impeccable design guidance. Read NOTICE.md for provenance. No upstream CLI, automatic detector, browser extension, agent hooks or binary is included. Do not claim to have run them. These are plain-language operating modes; the host may invoke the Reinspro skill differently. ## Non-negotiable preflight Every mode below uses the SKILL.md mandatory Reinspro MCP gate: discover tools, make a successful authenticated read, inspect genuine relevant images, preserve durable capture links. Missing tools/access/images block the design workflow, not just the search step. Report and troubleshoot; do not switch to unauthenticated guesses. Reuse a relevant reference set within a task instead of endlessly gathering more. Inspect the existing interface, real project tokens, user brief and target states. Preserve pinned fonts, palettes, supplied exact designs, assets, approved content and working functionality. Separate observations from proposed changes and unknown behavior. A missing design document does not erase an existing visual identity. ## Product context and surface intent Keep three kinds of evidence distinct: - Product truth: audience, task, supplied claims, permissions, terminology and business constraints. - Visual system: existing or approved typography, color, spacing, components and interaction language. - Surface brief: route/component, primary user success, scope, content and acceptance checks. Read existing PRODUCT.md, DESIGN.md or equivalent evidence when present. Persist concise decisions only where project conventions allow; do not invent requirements or overwrite an established system. For a tiny refinement, inspect the component rather than creating a documentation bureaucracy. Choose the surface's primary mode: - Persuade: marketing/pricing; establish relevance, credible proof and one clear action. - Operate: dashboards/forms/settings; task completion, scanability and predictable states take priority. - Read: documentation/articles/help; hierarchy, measure and navigation serve comprehension. - Experience: portfolios/galleries; the actual work leads, controls support it. ## Visual craft floor ### Typography Use a deliberate role scale for display, heading, body, label and data. Respect the brand's existing font; a font is not prohibited just because it is common. Choose new licensed fonts only when the brief permits a new direction. Keep text readable at real widths and browser zoom; prefer fluid sizes where useful, not oversized display text everywhere. Tune line height, line length, weight and spacing as a system. Use tabular numerals for aligned quantitative data. Test real strings, not short placeholder copy. Preserve Azerbaijani İ/ı and other locale characters; never simulate uppercasing with broken transforms. ### Color and contrast Define semantic surface/text/accent/status tokens and a restrained hierarchy. Color must communicate meaning without being the only cue. Avoid default purple-blue gradients, gradient headlines, gray-on-colored secondary text and decorative glass when unrelated to the selected brand. These are review prompts, not permission to replace a user-approved palette. Measure text and component contrast against applicable accessibility criteria; visual intuition alone is not a measurement. Check both themes only if they are actually supported. ### Layout and rhythm Make the primary action and reading order obvious. Group related elements tightly and separate distinct tasks deliberately. Use consistent alignment, spacing and density; do not turn every section into equal cards or nest containers without a structural reason. Cards, grids and symmetry are appropriate when they organize real content. A heading does not need a redundant eyebrow, decorative number or repeated introduction. Keep intentional editorial or exact-reference compositions when requested. Check empty, short and long content before declaring the grid finished. ### Images and browser details Use relevant, authorized imagery or deliberate typographic composition, not invented product screenshots or meaningless stock decoration. Preserve aspect ratio and meaningful crops, include dimensions to stabilize layout, and ensure text remains legible over media. Use one coherent icon system and accessible labels; decorative glyphs do not replace button semantics. Visible focus, link affordance, selection and caret styling may extend the palette, but never remove usability for aesthetics. Do not replace native scrolling or platform conventions without a genuine need. ### Motion Explain action, state, continuity or one purposeful focal moment. Avoid repeating elaborate reveal animations on every section or blocking reading behind a loading choreography. Initial content must remain usable without animation; honor reduced motion with an intentional alternative. Prefer smooth, inexpensive effects, stop offscreen animation where practical, and test cleanup on navigation/resize. Heavy blur, shaders or continuous effects require an explicit brief and device/performance checks; preserve a functional static fallback. ### Copy and truth Name the action and outcome clearly. Errors state what happened and how to recover. Use consistent product terms and avoid generic hype. Never add fabricated metrics, testimonials, availability, prices, legal promises or claimed features. Reword factual/legal copy only within the user's requested scope and preserve its meaning. Show believable states using approved data, not made-up production results. ## Pick the smallest useful playbook ### Critique — design assessment, not automatic fixes Inspect actual desktop/mobile renders and MCP references. Explain hierarchy, clarity, information architecture, cognitive load, emotional tone and fit with the surface's purpose. Identify the highest-impact problems and trade-offs with concrete target evidence. Separate subjective design judgment from measured defects. Return prioritized recommendations; do not silently implement a redesign or invent a numeric quality score. ### Audit — measurable technical checks Check semantics, keyboard flow, focus, accessible names, contrast, responsive overflow, relevant performance and supported state/theme coverage. Record route/component, evidence, severity, user impact and suggested remedy. Distinguish tested results from checklist items and untested states. Audit-only requests produce findings, not code changes. Automation detects a subset of accessibility problems; do not call a clean scan certification. ### Shape — UX plan before implementation Map the primary user task, content, navigation, state transitions and success criteria. Compare genuine references and choose one coherent direction. Deliver the requested brief or prototype scope; a planning request does not authorize deployment. ### Typeset and layout — focused hierarchy work Improve the confirmed typography roles, readable measure, alignment, spacing and composition. Make a named change solve a named problem. Preserve the identity and unrelated sections. Check real copy at narrow widths before changing font families or restructuring the whole page. ### Clarify and distill — comprehension and simplicity Clarify labels, helper text, error recovery and terminology. Distill redundant decoration, duplicated content and unnecessary choices conceptually, but never remove approved factual information or working functionality without the user's requested scope. If an implementation requires deleting a file, record, component or other protected object, follow the host's explicit deletion-confirmation policy first. ### Bolder and quieter — adjust intensity, not product truth Bolder strengthens a weak focal point through contrast, composition, imagery or type. Quieter reduces competing emphasis, excessive decoration and motion. Neither mode means applying a fashionable palette or replacing the brand indiscriminately. Explain what becomes more or less prominent and why. ### Harden — real-world input and failure Exercise empty/loading/success/error/disabled states, failed media, slow/offline requests, validation, permission failures and retries where relevant. Check long names, large counts, missing fields, translated copy and RTL if supported. Use locale-aware dates/numbers/currency. Preserve form state and prevent accidental duplicate actions. Do not simulate a real purchase, send real messages or change an account merely to produce a screenshot. ### Adapt — context, not simple shrinking Recompose navigation, content order, tables, media and controls for the target viewport and input method. Test desktop, typical mobile and 320px when applicable; include keyboard, browser zoom and touch-friendly controls. Native applications follow their platform accessibility and navigation conventions, not copied web CSS. Verify supported orientations/device classes only when in scope. ### Optimize — measure before and after Locate the actual bottleneck using suitable available tools: loading waterfall, image payload, layout shift, bundle or runtime cost. Size/compress media, reserve dimensions, defer noncritical work and reduce expensive rendering where justified. Compare the same scenario before/after. Distinguish lab measurements from real-user field metrics; no invented speed or Core Web Vitals claims. ### Animate and delight — purposeful personality Add state feedback, continuity or a small brand-specific moment without delaying tasks, hiding content or violating reduced-motion preferences. Verify keyboard, performance and fallback. Delight is not confetti after every interaction; experimental effects require an explicit brief and working controls. ### Extract and document — reusable system Identify genuinely repeated patterns, existing tokens and component conventions. Consolidate in the established project location rather than creating a second competing design system. Document approved visual decisions separately from factual product context. Do not perform broad refactors or migrate frameworks to imitate a reference. ### Onboard — useful first-run and empty states Explain immediate value, request only necessary information, show progress where meaningful and give a clear next action. Make empty states actionable without presenting fictional content as user data. Check returning users, skip/back behavior and interrupted setup when relevant. ### Polish — bounded finish After functional acceptance, batch the remaining alignment, spacing, copy consistency, media fit and interaction-detail corrections. Inspect desktop/mobile together, fix related findings once, then confirm. Avoid open-ended cosmetic cycles; do not use a pass cap to leave acceptance failures unreported. ### Variants — explicit selection If requested, compare a small number of named alternatives for one element, keeping product truth and functionality fixed. Use existing project/browser capabilities; do not claim an Impeccable live-mode engine is installed. The user's selected direction becomes the implementation target, not a license for unrelated redesign. ## Delivery contract Report actual MCP tool/read status, durable inspected reference links, selected mode and adaptations, changed files, performed checks and unresolved limitations. Include reproducible evidence where useful. An installed skill does not guarantee paid entitlement, originality, accessibility or successful client integration. If the MCP gate fails, the deliverable is a truthful blocker/setup result, not a fabricated finished design.