design

Plugin design from marketplace greenblacked-ai in greenblacked/AI. Commands read from the repo's manifest — 2 days ago.

Skills (16)

• accessibility-audit

  Audit a page, flow or component against WCAG 2.2 Level AA: run the automated tools first because they are cheap, then the manual pass that automation cannot do (keyboard end to end, focus visible and not obscured, 200 percent zoom, 320 px reflow, screen reader names, reduced motion, target size), an

• content-design

  Write and review the words in an interface — button and link labels, error and empty-state messages, confirmation and loading copy, and the tone that holds across a flow. Covers plain language, the action named in the label, errors that say what happened and what to do, and one voice whose tone shif

• data-visualisation

  Turn data into a chart that is correct and readable in any medium (matplotlib, Vega-Lite, Plotly, D3 or a spreadsheet): pick the chart from the question and the data's shape, keep bars on a zero baseline, avoid dual axes and 3D, use a colour-blind-safe palette that holds 3:1 contrast on light and da

• design-handoff

  Produce the spec that takes a design from approved to built: the states and edge cases, responsive and content extremes, the token and component mapping, accessibility annotations, and acceptance criteria an engineer can check against. Covers redlines, the handoff pack, and a review that catches wha

• design-system

  Set up or tidy a design system's foundations: design tokens named by role (colour, type with fallbacks, spacing, radius, elevation, motion), light, dark and further themes that redefine the same role tokens, and component state rules so buttons and controls stay consistent. Covers where translucent

• distinctive-page-design

  Design a new marketing or landing page so it does not come out as the default a code model converges on. Inherit any existing design system, ask once for the real material, audience, action and tone, choose a page shape by its fingerprint and a visual material by visible scoring, record the decision

• form-design

  Design or redesign a form people can complete: label every field, order the questions the way the user thinks, validate inline and only after input, put errors next to the field and say how to fix them, and make the primary action obvious and the whole thing keyboard-operable. Use when designing or

• information-architecture

  Structure a site or app so people can find things: the sitemap, the navigation, the taxonomy and the labels, and when to browse versus search. Covers grouping content by the user's mental model rather than the org chart, naming sections in the user's words, flattening deep hierarchies, and testing t

• motion-showcase

  Turn a finished static design into motion, either a seamless looping showcase delivered as MP4 and GIF, or entrance and ambient animation written into a site's own code. Choose which first, then rebuild the design as separate layers instead of animating a flat picture, leave the backdrop alone, prov

• problem-validation

  Validate whether a proposed customer problem is real and worth addressing before specifying a solution. Use when a team asks whether to build an idea, whether people actually experience a pain, how to interview prospective users without pitching, or what evidence would justify discovery moving forwa

• product-design

  Build faux product UI visuals for marketing and docs: a simplified rendering of the user's own app or browser window, dashboard, phone screen, notification, terminal or bento grid of feature cards, cropped for a hero, feature card, docs page, changelog or social card, as a still or a short scene whe

• responsive-design

  Design a layout that works across screen sizes: choose breakpoints from where the content breaks rather than from device names, decide what reflows, wraps or hides at each, and keep the primary task reachable and the touch targets large on the smallest screen. Use for any \"does this work on mobile\

• ui-ux-review

  Review one screen or flow (a live URL, screenshot, Figma frame or its code) against usability heuristics and platform guidance, and return ranked findings that each carry the evidence, the consequence for a user and the smallest fix. Walks the primary task path and every state before any polish, and

• usability-test-plan

  Plan and run a small usability test with real people: the question and the decision it feeds, who to recruit and how many, neutral task wording, a think-aloud script, the measures (task success, time, System Usability Scale), and turning observations into severity-rated fixes before the next round.

• visual-design

  Review or set a screen's visual design: the hierarchy that tells the eye where to go, a type scale, colour and spacing systems, alignment, and the contrast of emphasis that makes one action primary. Use for any \"does this look right\" or \"make this screen work visually\" question. Casual asks incl

• visual-review

  Review a rendered web UI from screenshots without trusting a vision model for what code can measure: pin the environment (browser image, fonts, animations off, seeded data, masked regions), capture a viewport and theme matrix, pixel-diff against a baseline, run contrast, overflow, bounding-box, DOM-

Slash commands (1)

• /design:visual-review

  Review a rendered page from screenshots - pin the render, capture the viewport, theme and reduced-motion matrix, diff against an optional baseline, run the code checks, then have the screenshot-reader subagent read crops - and report measured and unverified findings separately.

Subagents (1)

• screenshot-reader

  Read one or more screenshots of a UI, such as a page, a flow, a before and after pair or viewport captures, in its own context so the images never enter the caller's, and return findings that each name a file, a region (bounding box or element) and what is visibly wrong. Keeps what the image shows a

Similar plugins