Design & Media

jhonatan-oliveiradev Skill

Use when implementing a UI from Figma, screenshots, mockups, or an existing visual reference and fidelity to layout, spacing, typography, crops, and states is a primary acceptance criterion.

dragoon0x Skill

Design DNA engine that learns your codebase before making recommendations. Maps 8 design axes (typography, color, layout, motion, accessibility, tokens, hierarchy, personality), builds a project-aware profile in .meridian.json, and enforces your established aesthetic. 62 commands across 5 tiers. Every command respects what you've already built. Use on any frontend project to prevent AI slop while preserving design intent.

qredence Skill

Diagnose or improve layout in selected Figma frames, screens, components, or Figma Make prototypes by clarifying reading order, grouping, hierarchy, spacing rhythm, density, adaptation, and content extremes. Use when UI feels crowded, flat, misaligned, hard to scan, structurally unclear, or unstable across sizes.

qredence Skill

Run a final Figma Design or Figma Make quality pass that refines spacing, alignment, typography, color consistency, component state coverage, copy consistency, accessibility basics, and visual coherence without changing the underlying concept. Use when a UI is close and needs launch-ready finish rather than redesign. Not for Figma Sites publish readiness (site-launch-checklist) or Dev Mode handoff preparation (dev-handoff-prep).

qredence Skill

Audit one selected Figma Design surface or Figma Make prototype against visible design evidence, connected libraries, local styles, variables, components, sibling screens, and user task goals, then return up to three supported UI improvement findings with clear evidence and proposed changes. Do not use for design-system conformance audits (follow-ds-guidelines), Nielsen-heuristic evaluations (heuristic-evaluation), or cross-screen consistency checks (visual-consistency-check).

qredence Skill

Critique selected Figma frames, components, flows, or Figma Make prototype output with structured design feedback, severity, visible evidence, user impact, and actionable next changes. Use when the user asks for UX critique, design review, conversion review, accessibility feedback, or quality assessment before making changes.

qredence Skill

Reorganizes a messy, sprawling file into clearly named, logically ordered pages and sections, archiving or clearly marking stale exploration work, without altering any final designs. Use when a working file has become hard to navigate after a lot of exploration.

qredence Skill

Reviews a prototype plan or visible/provided prototype details for missing links, ambiguous destinations, dead ends, overlay risks, orphaned frames, and state-logic gaps. Use before sharing a prototype for testing, review, or demo. Treat results as evidence-based QA findings and a manual test plan, not as guaranteed automated traversal unless the current Figma Agent session explicitly supports prototype inspection.

qredence Skill

Reads all open comments on a file and triages them into categories (needs a design change, needs a decision/answer, already resolved but not marked, out of scope) so a designer can work through feedback efficiently. Use when a file has accumulated many comments and it's unclear what still needs action.

qredence Skill

Design, revise, or specify a reusable Figma component primitive for Figma Design or Figma Make, including anatomy, variants, states, accessibility expectations, content rules, and behavior when relevant. Use for buttons, inputs, dialogs, menus, tabs, cards, tables, pickers, uploaders, steppers, and other foundational UI primitives.

qredence Skill

Reviews a component set (all variants of one component) for structural consistency: naming, variant properties, layer structure, auto layout settings, and exposed component properties. Use when publishing or updating a component to a shared library, or when a component has grown organically and needs a health check before others build on it.

qredence Skill

Builds a lightweight, evidence-grounded persona (or refreshes an existing one) from available research notes, interview data, or survey results for a specific project -- avoiding invented demographic detail not supported by the source data. Use when a project needs a shared reference point for who it's designing for.

qredence Skill

Groups raw qualitative data (research notes, survey verbatims, support tickets, interview quotes) into a bottom-up affinity map -- clustering related observations before naming themes, rather than sorting into pre-defined buckets. Use for open-ended research synthesis where categories aren't known in advance.

qredence Skill

Prepares a finished design for developer handoff in Dev Mode: verifies naming, checks for stray unstyled elements, adds redline/behavior annotations for anything code can't infer from static layers, and confirms components are ready to inspect. Use as the last step before marking a design 'ready for development'.

qredence Skill

Synthesizes provided sticky-note content into evidence-based themes, counts, takeaways, and outliers. Use after a brainstorm, retro, or research session when sticky content is visible in the current Figma Design file or supplied as text.

qredence Skill

Extracts every piece of user-facing text in a file or flow into a structured, exportable table (screen, element, current text, character count) for copy review, translation hand-off, or content audits. Use when copy needs to be reviewed, translated, or tracked outside of Figma.

qredence Skill

Converts an outline or document into a slide-by-slide presentation plan and, when supported, a consistent deck in the active Figma surface.

qredence Skill

Explains verified changes between two supplied or accessible design states in language useful to product and engineering teams. Use when before-and-after frames, versions, screenshots, or a documented change list are available.

qredence Skill

Compares Figma variables (colors, spacing, typography, radii) against a codebase's design tokens (CSS custom properties, JSON, or a tokens package) and reports mismatches, missing tokens, and naming drift in both directions. Use when design and engineering tokens need to be reconciled, e.g. before a release or after either side changes independently.

qredence Skill

Use when a Figma Design agent must choose one installed Figma skill for a request or design-file context.

qredence Skill

Audits a design against WCAG 2.2 AA basics that are checkable in Figma: color contrast, text sizing, tap/click target size, focus order implied by layer order, and presence of alt-text-equivalent labels for meaningful images/icons. Use before a design is considered done, or when accessibility compliance is a requirement.

qredence Skill

Plans and drafts the mapping between Figma components/variants and their corresponding code components and props for Code Connect, so Dev Mode can show real production code snippets instead of generic markup. Use when setting up or expanding Code Connect coverage for a design system library.

qredence Skill

Reviews existing copy in a design against a stated voice-and-tone guideline (or against the file's own established voice if no separate guideline exists) and flags lines that are inconsistent, too formal/casual, jargon-heavy, or unclear. Use as a copy QA pass distinct from drafting new copy.

qredence Skill

Builds an evidence-grounded journey-map structure from research notes, transcripts, or a described experience. Use when stages, actions, thoughts, pain points, and opportunities need to become a shareable Figma Design artifact or structured specification.

qredence Skill

Drafts microcopy -- button labels, empty states, error messages, tooltips, confirmation dialogs, form hints -- for a specific screen or component, matching a stated (or inferred from existing content) voice and tone. Use when placeholder text needs to become real, ship-ready copy.

qredence Skill

Batch-renames a large set of layers according to a rule (pattern, content-based inference, or find/replace) in one pass, reporting every change made. Use for quick, mechanical bulk renaming, as a lighter-weight companion to the more comprehensive naming-convention-enforcer.

qredence Skill

Tears down a competitor's product, flow, or specific feature -- analyzing structure, patterns, strengths, and weaknesses -- and extracts concrete, actionable insights for the current project. Use when researching competitors before or during a design phase.

qredence Skill

Audits a selected frame, screen, or file against the team's published design system (components, styles, and variables) and flags every deviation with a suggested fix. Use when a design needs to conform to existing design system rules before review or handoff. Does not create new components -- use component-audit or legacy-styles-to-variables for that.

qredence Skill

Evaluates a flow or screen against Jakob Nielsen's 10 usability heuristics (visibility of system status, match with the real world, user control, consistency, error prevention, recognition over recall, flexibility, minimalist design, error recovery, help and documentation) and reports concrete violations. Use for a fast, structured usability pass independent of visual polish.

qredence Skill

Audits code for raw Tailwind palette color classes or hardcoded colors used where a semantic design-system token should be used instead, catching drift between the token system and actual usage. Use periodically or before a release to catch semantic color drift.

qredence Skill

Produces precise interaction specs for specific prototype behaviors, including source element, trigger, action, destination, overlay behavior, animation, and verification steps. Use when a prototype interaction is missing, wrong, or needs refinement, but treat the result as a manual wiring plan unless the current Figma Agent session explicitly supports interaction editing.

qredence Skill

Designs a workshop structure with sections, prompts, timing, and facilitator guidance. Use for brainstorms, retrospectives, kickoffs, or design studios when the result should be created in Figma Design or delivered as a board specification.

qredence Skill

Apply existing Figma Color variables from a specified Variables collection to hard-coded colors in the current selection, page, or file. Use when colors are not bound to collection variables and should be standardized to the design system.

qredence Skill

Summarizes provided or accessible design-branch changes for reviewers, highlighting scope, rationale, risk, and review focus. Use when branch or before/after evidence is available in the current session.

qredence Skill

Keeps naming consistent across Figma component names, variant/prop names, and their code equivalents -- PascalCase components, camelCase props, kebab-case files and CSS classes -- so design and code stay traceable to each other. Use when component or variant names drift between Figma and code.

qredence Skill

Generates a class-variance-authority (cva) variant configuration from a Figma component's variant properties, mapping each Figma variant option to its corresponding Tailwind class set. Use when turning a Figma component with multiple variants into styled, type-safe code variants.