design-engine

Plugin design-engine from marketplace chwezi-design-engine in peterbamuhigire/chwezi-design-engine. Commands read from the repo's manifest — 2 days ago.

Skills (110)

• accessibility-wcag-2-2-compliance

  Use when designing or auditing an interactive UI for WCAG 2.2 AA, keyboard and focus behaviour, accessible names, screen readers, target size, reflow, authentication, or reduced motion. Use inclusive-and-assistive-design for needs beyond the compliance floor.

• chwezi-document-publishing-standard

  Use when a Chwezi report or formal document must agree across browser reading mode, A4 PDF, DOCX and print, or a proposal, profile, annual report, manual or letter is published: document identity, one canonical model, every page inspected, eight PUB gates. Report data: chwezi-reporting-and-dashboard

• chwezi-infographics-standard

  Use when a Chwezi infographic (process, cycle, timeline, comparison, hierarchy, journey, cutaway, safety poster, social card, A2 poster) is released: provenance register, real text at computed sizes, honest encodings, checked diagram structure, no synthetic photorealism, eight INFO gates. Infographi

• chwezi-presentation-standard

  Use when a Chwezi slide deck (board, investor, proposal, status, training, case study) is released as PPTX or landscape PDF: claim ledger, assertion headlines, venue-computed legibility, editable native objects, PDF parity, eight DECK gates and scorecards. General slide craft: deck-system; narrative

• chwezi-product-excellence-standard

  Use when any Chwezi app or system screen (Android phone, POS till, iOS, tablet, desktop, web) is designed, built, reviewed or released: apply the binding Product Excellence rules, state matrix, 13 hard gates and scorecard verdict. Visual tokens route to chwezi-business-app-house-style; money layout

• chwezi-reporting-and-dashboards-standard

  Use when a Chwezi report, owner dashboard, financial statement, closeout, scheduled report, A4 PDF or CSV/XLSX export is specified or reviewed: metric contracts, reconciled totals, period comparisons, print and export gates. Single charts: chart-selection-and-encoding; app UI: the Product Excellence

• click-path-audit

  Use when debugging finds no crash but a button, toggle, or form action does nothing, or after a shared-state refactor. Trace each touchpoint for silent resets, races, stale closures, and final-state mismatches. Use design-qa-and-pre-launch-review for visual/a11y release gating; this is a behavioural

• design-audit

  Use when auditing one existing UI, page, screen, flow, or document for design quality and producing evidence-backed, severity-rated findings. Use product-design-audit for multiple product surfaces and design-qa-and-pre-launch-review for a release verdict.

• design-critique-and-review-facilitation

  Use when facilitating a live or asynchronous design critique that needs a clear ask, safe feedback, a decider, and recorded outcomes. Unlike design-audit or heuristic evaluation, this runs the human review session rather than producing expert findings.

• design-engine-and-product-improvement

  Use when auditing this design engine or any rendered product for continuous improvement, evidence quality, visual readability, accessibility, AI trust, or repeatable remediation. Use design-audit for a single diagnostic without the Kaizen portfolio loop.

• design-ethics-and-anti-dark-patterns

  Use when auditing or redesigning consent, urgency, pricing, subscription, checkout, or retention flows for deception and coercion. Unlike product-design-audit, this is the focused ethics gate; conversion optimisation remains with its surface skill.

• design-qa-and-pre-launch-review

  Use when a page, screen, flow, or component is done and needs a final design go/no-go gate across implementation parity, browsers, devices, accessibility, performance, and anti-slop checks. Use design-audit for diagnosis before release. portable: true category: 00-cross-cutting-ops-qa-a11y compatibl

• inclusive-and-assistive-design

  Use when designing beyond the WCAG floor for cognitive, visual, motor, assistive-technology, temporary, or situational ability ranges, including low-literacy users on shared phones in rural or low-bandwidth settings. Unlike accessibility-wcag-2-2-compliance, this creates inclusive adaptations rather

• internationalization-and-rtl-design

  Use when a UI or document must support multiple locales, scripts, RTL direction, bidi text, string expansion, pluralisation, or locale formatting. Unlike responsive-layout work, this owns language-driven adaptation; translation wording remains with content design.

• performance-as-ux-and-core-web-vitals

  Use when page speed, loading perception, Core Web Vitals, asset budgets, image or font weight, FOIT/FOUT, or layout shift must be treated as design constraints. Use engineering performance skills for code-level profiling and remediation. portable: true category: 00-cross-cutting-ops-qa-a11y compatib

• plan-canvas-design-review

  Use when a local design artefact needs a human reviewer to point at an exact element and deliver an Approve or Request-changes verdict with anchored feedback. Use design-audit or design-qa-and-pre-launch-review to produce findings; this skill runs the review loop.

• product-design-audit

  Use when auditing a real product across multiple surfaces such as marketing web, SaaS, iOS, Android, or desktop and producing scored, prioritised, skill-routed findings. Use design-audit for one artefact and design-qa-and-pre-launch-review for a release gate. portable: true category: 00-cross-cuttin

• slop-doctrine-refresh-and-research-loop

  Use when AI-slop definitions, banned fonts, visual tells, product-slop patterns, or anti-slop doctrine may have changed and the design engine needs a self-review pass coordinated with the digital-research engine before updating guidance.

• ui-demo

  Use when recording a web-application demo video, screen recording, walkthrough, or tutorial with Playwright. Produces a WebM with an injected cursor, paced story, and discovered/rehearsed selectors. Use demo-driven-design-process to decide what to demo; this skill records it.

• ux-remediation-and-redesign

  Use when existing design-audit findings must become a prioritised remediation plan, redesign, re-test, and measured before/after result. Use design-audit or product-design-audit to diagnose problems and design-qa-and-pre-launch-review for the final release verdict. portable: true category: 00-cross-

• visual-product-slop-audit

  Use when auditing imagery, brand assets, UI screens, or AI product features for visual and product slop. Unlike ai-slop-typography-audit, this excludes type; written-copy slop routes to the digital-research engine.

• ai-slop-typography-audit

  Use when auditing an existing artefact for banned or convergent type, weak hierarchy, monotype systems, or unstated choices. Unlike visual-product-slop-audit, this inspects typography only; font selection owns the replacement design.

• fine-typesetting-and-typesetting-qa

  Use when setting or checking the fine detail of running text in a report, proposal, business plan, deck, brochure or long page - hierarchy steps, rag, hyphenation, widows, orphans, figures, quotes, dashes and UK or East African punctuation. Use font-selection-and-pairing to choose faces and editoria

• fluid-responsive-typography

  Use when browser typography must scale smoothly across viewport or container sizes while preserving zoom, reflow, measure, and hierarchy. Unlike responsive-and-adaptive-layout, this owns type sizing only; face and pairing choices remain upstream.

• font-embedding-and-licensing

  Use when a chosen font must be loaded or embedded in web, DOCX, PPTX, PDF, or XLSX with verified permission. Unlike premium-font-scan, this implements format-specific embedding; type choice remains with font-selection-and-pairing.

• font-selection-and-pairing

  Use when choosing and pairing typefaces for a website, UI, document, report, proposal, deck, or marketing page, including design voice and licence constraints. Use font-embedding-and-licensing after selection and ai-slop-typography-audit for existing output.

• premium-font-scan

  Use when a font category is known and local premium files must be checked before choosing the OFL baseline. Unlike font-selection-and-pairing, this resolves availability and licence evidence; embedding routes to font-embedding-and-licensing.

• variable-fonts-and-opentype-features

  Use when configuring variable-font axes, optical sizing, numerals, or OpenType features after a face is chosen. Unlike font-selection-and-pairing, this implements type mechanics; embedding and licence work routes to font-embedding-and-licensing.

• accessible-color-and-contrast

  Use when verifying or fixing text, UI, focus, border, status, or data colours for contrast and colour-vision accessibility. Unlike color-system-and-palette, this is the focused WCAG/APCA and non-colour-cue gate, not palette creation.

• brand-style-guide

  Use when packaging an approved identity into a client-facing guide with logo, colour, typography, spacing, imagery, voice, and application rules. Unlike brand-visual-identity, this documents settled decisions rather than creating the identity.

• brand-visual-identity

  Use when defining or refreshing a distinctive visual identity across logo usage, colour, type, spacing, imagery, and applications. Unlike logo-and-wordmark-design, this owns the whole identity system; detailed palette and type construction route to specialist skills.

• color-selection

  Use when generating a starting website palette from brand hues, imagery, audience, mood, or colour harmony. Unlike color-system-and-palette, this selects candidate colours; semantic roles, ramps, dark themes, and final contrast contracts are downstream.

• color-system-and-palette

  Use when building a cross-format colour system with an authored anchor, perceptual tonal ramps, semantic colour roles and tokens, contrast contracts, and theme mappings. Unlike color-selection, this operationalises a palette; focused contrast audit routes to accessible-color-and-contrast.

• dark-mode-and-theming

  Use when building, adding, or auditing a dark mode — or any multi-theme (light/dark/high-contrast/dimmed) system — for a website, app/web UI, dashboard, or themed document. Builds a true dual-mode semantic palette where dark is a deliberate remap (lowered chroma, lightened/desaturated accents, dark-

• logo-and-wordmark-design

  Use when constructing or specifying a logo, wordmark, lockups, clear space, responsive marks, favicons, or app icons. Unlike brand-visual-identity, this owns mark geometry and reduction; strategy, palette, typography, and the broader system remain upstream.

• composition-and-visual-hierarchy

  Use when a screen, page, slide, or cover needs a deliberate focal point, reading order, figure-ground separation, and visual tension. Do not use for choosing columns or spacing units; route those scaffold decisions to layout-grid-and-spacing.

• editorial-and-long-form-layout

  Use when an article, essay, documentation page, case study, or web report needs sustained-reading measure, rhythm, landmarks, notes, figures, or captions. Do not use for editable DOCX or print-PDF production; route those artefacts to the document skills.

• layout-grid-and-spacing

  Use when a page, screen, slide, or document needs its column scaffold, margins, gutters, spacing rhythm, or alignment system defined. Do not use for hierarchy inside an established grid or for breakpoint behaviour; route those to composition or responsive layout.

• responsive-and-adaptive-layout

  Use when a browser-rendered page, component, dashboard, or email must adapt across widths using intrinsic layout, fluid values, breakpoints, or container queries. Do not use to establish the base grid or for fixed-canvas documents; route those to layout-grid-and-spacing.

• ai-agent-ux

  Use when an AI agent or copilot interface needs status, plans, approvals, uncertainty, interruption, or trust controls across web or mobile. Do not use for formatting a single AI answer; route output structure and citations to ai-output-design.

• ai-output-design

  Use when an AI answer surface needs structure, citations, grounding, editable refinement, or a chat-versus-canvas decision. Do not use for agent autonomy, approvals, or execution status; route those interaction controls to ai-agent-ux.

• component-states-and-interaction-fidelity

  Use when a single interactive control needs complete hover, focus-visible, pressed, selected, read-only, and transition fidelity. Do not use for aggregate data-region lifecycle handling or API architecture; route those concerns to system-state design or component-library architecture.

• distinctive-by-design

  Use when a UI, website, dashboard, deck, or rendered artefact needs one defensible visual signature before high-fidelity build. Do not use for detailed token production or final QA; route those to the relevant design-system or audit skill after direction is chosen.

• form-ux-design

  Use when a web, iOS, or Android form needs field anatomy, validation, errors, multi-step flow, accessibility, or submission recovery. Do not use for general page layout or backend-only validation; pair with platform implementation and contract skills.

• interaction-design-patterns

  Use when an interface flow needs a proven behaviour, navigation, action, layout, or data-display pattern selected from task and context. Do not use for visual styling or per-component state fidelity; route those to practical-ui-design or component-states.

• interface-craft-micro-details

  Use when checking geometry and rendering details in nested UI surfaces, icons, numerals, and images covering concentric radius, optical alignment, tabular numerals, and image edges. Use component-states-and-interaction-fidelity for states/tokens and variable-fonts-and-opentype-features for the wider

• practical-ui-design

  Use when an interface needs a coherent practical visual system for colour, typography, spacing, layout, buttons, and forms. Do not use for brand identity creation or native platform behaviour; pair with the relevant brand and platform skills.

• premium-ui-ux-design

  Use when a web, SaaS, dashboard, iOS, or Android product must communicate premium value through trust, clarity, restraint, sensory polish, and service detail. Do not use as a substitute for the platform, accessibility, or design-system implementation skill.

• webapp-gui-design

  Use when designing or building a SaaS web-app shell, dense desktop UI, sidebars, command surfaces, navigation, dashboard, table, form, dialog, auth, upload, responsive layout, or system state in React/Next/Tailwind or Bootstrap/Tabler/PHP. Do not use for marketing websites or backend-only work.

• demo-driven-design-process

  Use when a design or feature must converge through repeated demo, feedback, dogfooding, selection, and decision capture. Do not use merely to choose one prototype's fidelity; route that artefact decision to wireframing-and-prototyping.

• enterprise-ux-process

  Use when a regulated, B2B, or large internal product needs a maturity-declared enterprise UX engagement with stakeholder, research, prototype, evaluation, and launch evidence. Do not use for a small experiment or single prototype; route those to the focused research/prototyping skills.

• heuristic-evaluation-and-design-critique

  Use when an existing interface or flow needs an expert, no-users inspection against Nielsen/Tognazzini heuristics or Norman's signifiers, mapping and feedback, with screen evidence and 0–4 severity. Do not use for empirical usability testing or a broad 0–100 visual audit; route those to research or

• journey-mapping-and-service-design

  Use when evidence must be synthesised into a persona, JTBD, end-to-end journey, experience map, or service blueprint across channels and frontstage/backstage work. Do not use for a single-screen flow or primary user research collection.

• ux-psychology

  Use when a design decision needs a cautious cognitive rationale involving Gestalt grouping, affordances, memory, attention, mental models, or bias. Do not use as proof of user behaviour or for heuristic inspection; route claims to research/testing or heuristic evaluation.

• ux-research-and-usability-testing

  Use when planning moderated usability sessions, field research with users and community stakeholders, participant tasks, observation evidence, interviews, surveys, card/tree tests, diary studies, or findings synthesis. Do not use for expert-only heuristic inspection or unsupported personas; route th

• wireframing-and-prototyping

  Use when a flow or feature needs sketches, wireframes, wireflows, or a clickable/coded prototype and the fidelity must match the learning question. Do not use to run a multi-round convergence process or produce final visual design; route those to demo-driven process or UI craft.

• ecommerce-and-checkout-ux

  Use when designing or reviewing an e-commerce journey across PLP, PDP, cart, guest checkout, payment, returns, refunds, and order status with transparent cost and no dark patterns. Use form-ux-design for field anatomy and landing-page-and-conversion-design for campaign pages. portable: true category

• fintech-and-financial-product-ui

  Use when a banking, wallet, remittance, mobile-money, lending, transfer, balance, transaction, statement, fee, or payment-confirmation interface must prevent costly mistakes and build trust. Do not use for accounting rules or backend payment architecture; consult those domain engines separately.

• healthcare-ui-design

  Use when a clinical, EHR/EMR, patient portal, telemedicine, medication, wellness, or ageing-care interface needs safety-centred web, mobile, or tablet UX. Do not use for medical advice, clinical-rule authoring, or compliance certification; require authoritative clinical and legal owners.

• hospitality-hotel-restaurant

  Use when designing visual systems, guest journeys, operational screens, menus, booking flows, or hospitality brand experiences for hotels, resorts, restaurants, venues, and food businesses.

• legal-sector-ui-ux

  Use when a lawyer, law firm, chambers, solicitor, barrister, or legal consultancy website needs ethical trust signals, practice-area structure, attorney profiles, or intake UX. Do not use for legal advice or generic sector selection; verify current jurisdictional advertising/privacy rules.

• pos-and-retail-operations

  Use when designing, auditing, or implementing a point-of-sale workflow for a tenant-aware retail or field-sales ERP where products, finished stock, customers, payments, and inventory truth must remain aligned. Use ecommerce-and-checkout-ux for consumer checkout and fintech-and-financial-product-ui f

• sector-strategies

  Use when a website needs an evidence-based sector direction for travel, consulting, education, nonprofit, professional services, portfolio, or another industry without a dedicated skill. Do not use for legal, healthcare, fintech, or ecommerce UX; route those regulated/specialist sectors to their ski

• android-ui-ux-design

  Use when an Android phone, tablet, foldable, or Compose screen needs native Material navigation, components, states, accessibility, and adaptive behaviour. Do not use for iOS conventions or cross-platform unify/diverge decisions; route those to iOS design or parity.

• app-store-presence-and-aso

  Use when an App Store or Google Play listing needs icon, screenshot narrative, preview video, captions, feature graphic, localisation, or current asset-spec planning. Do not use for in-app UI or growth strategy beyond the store surface; verify current platform specifications before release.

• cross-platform-design-parity

  Use when one product must ship as idiomatic iOS and Android and needs explicit unify/diverge decisions for brand, IA, flows, navigation, controls, motion, gestures, and system chrome. Do not use to perfect only one platform; route that work to the iOS or Android skill.

• ios-ui-ux-design

  Use when an iPhone, iPad, SwiftUI, or UIKit screen needs native Apple navigation, controls, states, Dynamic Type, VoiceOver, and adaptive window behaviour. Do not use for Android conventions or cross-platform unify/diverge decisions; route those to Android design or parity.

• touch-gesture-and-haptics

  Use when a mobile screen needs touch-target sizing, thumb reach, tap/press/swipe/drag/pinch rules, gesture alternatives, discoverability, conflict resolution, or truthful iOS/Android haptics. Do not use for navigation architecture or motion choreography; pair with platform and motion skills.

• micro-interactions-and-feedback

  Use when designing per-control feedback, trigger rules, and feedback loops for presses, toggles, inputs, selections, loading, success, rollback, optimistic actions, haptics, reduced-motion alternatives, or delight. Use motion-design for product-wide timing, easing, choreography, and reduced-motion r

• motion-design

  Use when defining system-level motion timing, easing, transitions, choreography, loading motion, or reduced-motion behaviour across web and native products. Use micro-interactions-and-feedback for the feedback anatomy of one control.

• motion-react-implementation

  Use when implementing approved motion in React or Next.js with motion/react covering SSR/hydration safety, drag and gestures, useAnimate sequences, SVG paths, custom hooks, and API selection. Use motion-design for timing, easing, spring, and reduced-motion decisions; this skill implements them.

• chwezi-business-app-house-style

  Use when a Chwezi business app (POS, ERP, hotel, pharmacy, school, SaaS admin; Android or web) needs the house look: tinted ground and soft cards, one amber next-step button, illustrated hub icons, KPI and hero cards, motion, guardrail tests. Money-figure layouts route to money-figures-and-statement

• component-library-architecture

  Use when defining reusable component anatomy, variants, states, slots, composition, APIs, or component documentation. Use design-tokens-and-naming for shared values and figma-and-tooling-workflow for tool-specific library operations.

• design-handoff-and-dev-spec

  Use when handing a design to engineering through token-referenced redlines, component and screen behaviour, states, breakpoints, accessibility notes, edge cases, and testable acceptance criteria. Use design-tokens-and-naming to define tokens and design-qa-and-pre-launch-review for final release. por

• design-tokens-and-naming

  Use when defining, naming, mapping, or exporting primitive, semantic, and component design tokens for colour, type, space, radius, elevation, motion, themes, or brands. Use component-library-architecture for component APIs and design-handoff-and-dev-spec for screen delivery.

• figma-and-tooling-workflow

  Use when structuring current Figma files, variables, modes, auto-layout, component properties, Dev Mode, branches, or library publishing. Use design-tokens-and-naming for the platform-neutral token contract and design-handoff-and-dev-spec for delivery evidence.

• measured-style-pack

  Use when an approved reference needs its colour, type scale, and spacing measured into a deterministic token pack. Use design-tokens-and-naming for naming/tiering after measurement, and color-system-and-palette when no approved reference exists and the palette must be designed.

• error-empty-and-system-messaging

  Use when writing error, empty, success, loading, offline, validation, toast, banner, permission, destructive-action, or HTTP-status messages. Use ux-writing-and-microcopy for ordinary interface labels and empty-error-and-loading-states for visual state design.

• ux-writing-and-microcopy

  Use when writing or reviewing buttons, field labels, hints, tooltips, menus, toggles, placeholders, tabs, navigation labels, or other routine interface microcopy. Use error-empty-and-system-messaging for system states and voice-tone-and-content-style-guide for voice governance.

• voice-tone-and-content-style-guide

  Use when defining or governing a product voice chart, tone map, terminology glossary, content style guide, or voice tiebreaker. Use ux-writing-and-microcopy for interface strings and error-empty-and-system-messaging for state-specific messages.

• advertising-creative-art-direction
• ai-image-generation-art-direction
• art-direction-routes
• iconography-system-design
• illustration-style-and-systems
• photography-art-direction
• chart-selection-and-encoding
• dashboard-and-data-product-design
• data-illustration-and-infographics
• data-visualization
• diagram-design-and-handoff
• money-figures-and-statement-display
• deck-system
• design-storytelling-and-case-studies
• docx-report-and-document-formatting
• email-and-newsletter-design
• pdf-proposal-and-bankable-document-design
• print-production-and-finishing
• xlsx-and-financial-model-presentation
• empty-error-and-loading-states
• landing-page-and-conversion-design
• navigation-and-information-architecture
• onboarding-and-first-run-design
• trust-credibility-and-social-proof
• educational-and-childrens-game-experience
• game-art-direction-and-visual-development
• game-feel-feedback-camera-and-haptics
• game-ui-hud-and-diegetic-interfaces
• game-visual-experience-orchestration
• _TEMPLATE

Hooks (5)

• PreToolUse

  node "${CLAUDE_PLUGIN_ROOT}/hooks/banned-font-gate.js"

• PreToolUse

  node "${CLAUDE_PLUGIN_ROOT}/hooks/destructive-bash-gate.js"

• PreToolUse

  node "${CLAUDE_PLUGIN_ROOT}/hooks/token-file-gate.js"

• PostToolUse

  node "${CLAUDE_PLUGIN_ROOT}/hooks/slop-immediate.js"

• Stop

  node "${CLAUDE_PLUGIN_ROOT}/hooks/slop-deep-pass.js"

Similar plugins