Loading...
Loading...
Found 440 Skills
Design or restyle DatoCMS plugins so they look and feel native to the DatoCMS UI. Use when users ask to make a plugin match the DatoCMS dashboard, polish plugin config screens, pages, sidebars, panels, modals, forms, tables, empty states, or overall plugin layout structure. This skill owns DatoCMS plugin design-system work, native-look restyling, and UI density or spacing cleanup. Prefer `datocms-react-ui` when a public component exists, and otherwise use raw React and CSS that reproduce DatoCMS spacing, typography, density, color, and interaction patterns without importing private CMS classes.
Route design-generation work into the right Open Design workflow mode — prototype, deck, document, or media artifact. Use when the user needs local-first UI prototype generation, presentation deck creation, or design-system-aware HTML/PDF/PPTX artifacts via locally-installed coding agents. Supports 72 built-in design systems, 5 visual directions, 93 media prompt templates, and multi-format export. Triggers on: open-design, local design tool, prototype generation, design deck, design artifact, design agent workflow, open design prototype, design system artifact, UI prototype generation.
Produce implementation-ready UX and UI specifications: user flows, states, component briefs, design tokens, accessibility constraints, and handoff guidance for frontend engineering agents. Use for new features, redesigns, or design-system work where implementation should follow a clear product and interaction spec.
Framework (OSS). Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with variant/size/state prop conventions, and rules for when to extract a repeated view into a shared component. Use when creating or organizing theme files and design tokens (theme.ts / theme/), extending an existing theme or styling library (NativeWind, Tamagui, Restyle, Unistyles) in its own idiom, standardizing styles so screens (including AI-generated ones) look consistent and polished, building an in-app component library, or auditing an app for design-system drift (hardcoded colors, spacing, fonts). For platform styling specifics (semantic colors, HIG rules, native controls) use expo-native-ui; for Tailwind/CSS setup use expo-tailwind-setup; for folder layout of a new app use expo-project-structure.
Extract component metadata from a Figma design system and generate production-ready QML controls. Use this skill whenever someone wants to turn Figma components into QML files — whether they say "generate components from Figma", "create QML controls based on a design system", "convert Figma components to QML", "build the component library", "extract button/input/checkbox from Figma", or anything similar. Requires design-tokens.json and QML design system singletons to already exist (from the token extraction skill). Uses Figma MCP to inspect components one at a time and maps variants, states, sizing, and token usage to idiomatic Qt Quick Controls 2 patterns. Trigger this skill at the component generation step of any QML design-system workflow.
Trace what else a UX, flow, component, content, or design-system change could affect. Use when a designer asks "if we change this, what else moves?", "what else could this affect?", or wants to understand downstream UX impact before committing to a change.
Ship Faster end-to-end workflow for small web apps (default: Next.js 16.1.1): idea/prototype → foundation gate → design-system.md → lightweight guardrails + docs → feature iteration → optional Supabase + Stripe → optional GitHub + Vercel deploy → optional AI-era SEO (sitemap/robots/llms.txt). Resumable, artifact-first under runs/ship-faster/ (or OpenSpec changes/). Trigger: ship/launch/deploy/production-ready MVP.
Create, update, or refactor Storybook stories following the project's standard patterns. Use when adding stories for new components, updating existing stories, or fixing Storybook-related issues. Don't use for component implementation itself, design-system token changes, end-to-end browser tests, or non-Storybook documentation.
Build a Figma design from code or a description — the reverse of figma-codegen. Reuses the connected file's existing design system (components, variables, styles) instead of drawing primitives with hardcoded values. Triggers whenever the user wants something created or updated IN Figma from code or a spec — e.g. 'build this in Figma', 'create a Figma design for this', 'push this component/screen to Figma', 'turn this React/Vue into a Figma design', 'recreate this UI in Figma', 'make a Figma version of …', 'design a landing page/screen in Figma' — or whenever a coding artifact (a component, page, or spec) appears alongside a request to author in a connected Figma file. Works for full screens, sections, single components, or design-system assets.
Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff.
The craft of designing icons that communicate instantly across cultures, contexts, and scales. Icon design bridges semiotics, cognitive psychology, and visual craft to create symbols that users understand without thinking. Great icons are invisible in the best way - they convey meaning so naturally that users never pause to decode them. This skill covers icon grid systems, optical alignment, stroke consistency, metaphor selection, scalability across sizes, SVG optimization, and icon set coherence. The best icon designers understand that icons are a visual language - each icon must speak the same dialect while carrying its own distinct meaning. Use when "icon, iconography, symbol, glyph, icon set, icon library, pictogram, svg icon, icon grid, icon pack, feather icons, lucide, phosphor, heroicons, icon system, icon style, icons, iconography, svg, symbols, glyphs, pictograms, ui-icons, icon-set, visual-design, design-system" mentioned.
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.