grimoire-design

Plugin grimoire-design from marketplace grimoire in jeffreytse/grimoire-core. Commands read from the repo's manifest — 28 days ago.

Skills (65)

• design-brand-identity

  Use when creating or repositioning a brand identity system from strategy through visual execution for a company, product, or organization

• design-brand-voice-guidelines

  Use when defining or documenting a brand's tone, vocabulary, and communication style for use across marketing, product, and customer touchpoints

• design-logo-system

  Use when designing a logo and its variants, usage rules, and application system across print, digital, and environmental contexts

• apply-typography-hierarchy

  Use when designing a typographic system for a document, website, or brand that needs clear visual hierarchy and readable body text

• design-color-system

  Use when building a brand or product color system with semantic roles, accessible palette, and usage rules

• design-grid-system

  Use when establishing a grid system for print, web, or mobile layouts to create visual order, alignment, and scalable composition rules

• apply-easing-and-timing

  Use when choosing easing curves and durations for specific UI animations, transitions, or motion design decisions

• design-animation-system

  Use when creating or auditing a motion design system for a digital product, defining reusable animation tokens, principles, and component-level motion patterns

• apply-design-thinking

  Use when solving a complex, human-centered problem where the right solution is unknown — to move through structured phases of deep user empathy, problem reframing, divergent ideation, and rapid prototype testing before committing to a solution.

• apply-peak-end-experience-design

  Use when designing a customer, patient, or user experience with multiple sequential moments — a service journey, a medical procedure, a product onboarding flow, an event — to deliberately design the most intense moment and the final moment, because people's remembered evaluation of an entire experie

• audit-accessibility

  Use when auditing a product or component for accessibility compliance or when preparing for WCAG 2.1 AA certification

• design-information-architecture-product

  Use when structuring content, navigation, or feature hierarchies for a product so users can find information predictably and efficiently

• design-research-plan

  Use when starting any user research study — to define the research question, select methods, write a participant screener, and set a timeline before recruiting begins.

• design-user-journey-map

  Use when mapping end-to-end user experiences to identify pain points, emotional lows, and opportunity areas across a product or service touchpoint chain.

• design-user-persona

  Use when distilling user research data into 2–4 archetypal user profiles to give the team a shared, evidence-grounded reference for design and product decisions.

• run-card-sorting

  Use when designing or evaluating information architecture — navigation structure, menu labels, content categorization — to align the organization with how users mentally group and label concepts.

• run-design-sprint

  Use when a product team needs to answer a critical design or business question through rapid prototyping and user testing in one week

• run-heuristic-evaluation

  Use when conducting a usability review of an interface to identify usability problems without running user tests, using Nielsen's 10 heuristics as the evaluation framework.

• run-usability-testing

  Use when planning or conducting usability tests to identify UI friction, task completion failures, or navigation problems with real users

• run-user-interview

  Use when conducting one-on-one sessions with users to understand their goals, behaviors, mental models, and pain points — before designing a solution or after encountering an unexplained usage pattern.

• write-design-system-token

  Use when defining, naming, or documenting design tokens for a design system to ensure consistent visual decisions across platforms

• write-research-synthesis

  Use when user research sessions are complete and raw notes need to be organized — to identify behavioral patterns and extract actionable insight statements the team can act on.

• apply-accessible-authentication

  Use when building login, registration, or any authentication flow — to ensure users with cognitive disabilities can authenticate without being blocked by memory tests, cognitive puzzles, or disabled paste functionality.

• apply-accessible-color

  Use when choosing colors for text, UI components, or data visualizations — to ensure sufficient contrast ratios and that color is never the sole means of conveying information.

• apply-accessible-forms

  Use when building any form — login, checkout, search, settings — to ensure all inputs are correctly labeled, errors are programmatically associated, and users can complete the form with a keyboard and screen reader.

• apply-affordances

  Use when designing interactive elements — buttons, links, inputs, sliders, drag handles — to ensure visual appearance communicates the available action without requiring instructions or labels.

• apply-aria-live-regions

  Use when adding dynamic content that changes without a user-triggered focus move — toast notifications, search results loading, form submission status, chat messages, or any async UI update — so screen reader users are informed of the change.

• apply-aria-roles

  Use when building custom UI components that native HTML cannot represent — to give assistive technology the correct role, state, and property information for non-native interactive elements.

• apply-audio-controls

  Use when adding audio or video with sound that plays automatically — to ensure users can pause, stop, or mute it without being unable to hear their screen reader or complete tasks in a noisy environment.

• apply-error-prevention

  Use when building forms that submit legal, financial, or irreversible data — to ensure users can review, confirm, or reverse submissions, and are not asked to re-enter information they've already provided.

• apply-fitts-law

  Use when designing interactive UI elements — buttons, links, menus, form controls — where target size, placement, and spacing affect the speed and accuracy of user interaction.

• apply-focus-management

  Use when building modals, drawers, route changes in SPAs, dynamic content insertion, or any interaction that moves or removes focus — to ensure keyboard focus moves predictably and is never lost.

• apply-gestalt-principles

  Use when arranging UI elements to create visual hierarchy, grouping, and clarity using perceptual psychology principles

• apply-hicks-law

  Use when simplifying navigation menus, option lists, decision points, or any interface where too many choices slow users down

• apply-hover-content

  Use when adding tooltips, popovers, or any content that appears on hover or focus — to ensure users can dismiss it, move their pointer over it, and that it doesn't disappear before they've read it.

• apply-keyboard-accessibility

  Use when building interactive UI components — to ensure every action achievable with a mouse is also achievable with a keyboard alone, with no traps or dead ends.

• apply-media-captions

  Use when publishing video, audio, or any time-based media — to provide captions, transcripts, and audio descriptions for users who cannot hear or see the media content.

• apply-mobile-first-design

  Use when designing for multiple screen sizes — to design under mobile constraints first, then progressively enhance for larger viewports, rather than adapting a desktop layout down to mobile.

• apply-motion-design

  Use when adding transitions, animations, or micro-interactions to a UI — to ensure every motion has a clear purpose, respects performance constraints, and does not cause harm to users with vestibular disorders.

• apply-page-language

  Use when building any web page or SPA — to declare the language of the page and any inline content in a different language, so screen readers select the correct text-to-speech voice and language rules.

• apply-pointer-accessibility

  Use when building touch interfaces, drag-and-drop interactions, gesture-based controls, or any feature activated on mouse or touch events — to ensure users with motor disabilities can operate all functionality with a single pointer without complex gestures.

• apply-predictable-navigation

  Use when building multi-page applications, SPAs with multiple routes, or any UI with repeated navigation elements — to ensure focus and input changes don't trigger unexpected page transitions, and navigation appears consistently across views.

• apply-progressive-disclosure

  Use when a feature, form, or settings panel has more complexity than most users need — to show only what the current step requires and reveal additional options on demand.

• apply-reduced-motion

  Use when adding animations, transitions, parallax effects, or auto-playing video to a UI — to respect users' motion sensitivity preferences and prevent content that could trigger seizures.

• apply-responsive-text

  Use when styling text on any web page — to ensure content remains readable and functional when users resize text to 200%, zoom to 400%, or override text spacing with their own stylesheets.

• apply-sensory-independence

  Use when writing UI instructions or labels, and when building mobile or responsive interfaces — to ensure content is understandable without relying solely on shape, color, position, or orientation, and that display orientation is not unnecessarily locked.

• apply-skip-navigation

  Use when building any page with repeated header and navigation content — to let keyboard and screen reader users skip directly to the main content without tabbing through every navigation link.

• apply-text-alternatives

  Use when adding images, icons, SVGs, canvas elements, or any non-text content to a page — to ensure users who cannot see the content receive an equivalent text description.

• apply-timed-content-controls

  Use when building carousels, auto-advancing slideshows, session management, or any content that moves, blinks, or updates automatically — to ensure users can pause, stop, or extend time-sensitive content.

• design-accessibility-standards

  Use when auditing or designing UI components to meet WCAG 2.2, Section 508, or ARIA accessibility requirements

• design-data-tables

  Use when displaying tabular data — to make rows scannable, support sorting and filtering, handle bulk actions, and adapt to mobile breakpoints without destroying the data structure.

• design-empty-states

  Use when designing screens that appear before content exists — first use, no-results, user-cleared state, or error — to orient users and guide the next action instead of showing a blank screen.

• design-feedback-patterns

  Use when designing system responses to user actions — form submission, data save, deletion, errors, and confirmations — to tell users what happened, what went wrong, and what to do next.

• design-form-layout

  Use when designing data-entry forms — to arrange fields, labels, and actions so users complete them faster and with fewer errors, independent of accessibility requirements.

• design-information-architecture

  Use when organizing content, navigation, or features in a product so users can find what they need without confusion

• design-loading-states

  Use when a UI action triggers a wait of 0.1 seconds or more — to communicate system progress, prevent duplicate submissions, and maintain perceived performance.

• design-navigation-patterns

  Use when choosing or designing primary navigation for a website or app — to select the right structural pattern (top nav, side nav, tabs, bottom nav) for the content depth and device context, and avoid the anti-patterns that account for the majority of navigation usability failures.

• design-onboarding-flow

  Use when designing or redesigning a user onboarding flow for a SaaS or digital product where activation rate, time-to-value, or early churn are problems.

• design-search-ux

  Use when designing a search feature for a website or application — to structure the input, autocomplete, results list, and zero/no-results states so users find what they need with minimal friction.

• design-visual-hierarchy

  Use when designing any screen layout — to arrange elements so the eye naturally travels from most to least important, reducing the cognitive effort required to parse the page.

• prevent-dark-patterns

  Use when reviewing or designing e-commerce flows, subscription sign-ups, cookie consent banners, settings pages, and cancellation flows — to identify and remove deceptive UX patterns that manipulate users against their own interests.

• run-usability-test

  Use when validating a UI design, prototype, or live product with real users to find usability problems before or after launch

• write-design-brief

  Use when starting a design project, commissioning design work, or aligning stakeholders before any visual design begins

• write-microcopy

  Use when writing button labels, error messages, placeholder text, helper text, empty state copy, and tooltip content — to make UI text specific, actionable, and honest.

• write-semantic-html-structure

  Use when building or reviewing a web page's HTML structure — to ensure heading hierarchy, landmark regions, and semantic elements convey the correct document outline to screen readers and assistive technology.