Skills

D

direct

adobe / skills

Set a redesign direction for an existing website. Analyzes the user's intent, picks a palette and visual direction, and writes the target spec (PRODUCT.md, DESIGN.md, DESIGN.json) plus a reasoning trace at stardust/direction.md. Use when the user asks to redesign a site, refresh the design, set a new design direction, define a redesign target, or invokes `$stardust direct` (`/stardust:direct` in Claude Code).

T

tailwindcss

martinholovsky / claude-skills-generator

Tailwind CSS utility-first styling for JARVIS UI components

C

continuous-infinite

dylantarre / animation-principles

Use when building ongoing loop animations - loading states, ambient motion, background effects that run indefinitely without user fatigue

G

graphic-design

travisjneuman / .claude

Professional graphic design principles for digital and print media. Use when creating visual designs, choosing color palettes, typography, layouts, or providing design feedback

M

migrate

adobe / skills

Apply DESIGN, canon, and modules to every page in the inventory, producing a deployable static HTML site. Use to migrate or render the whole captured site into the redesigned static tree ("migrate the pages", "render the migrated site", "apply the design to all pages", "build the deployable site", "convert the approved prototype into the full site") — the page-rendering step between prototype and deploy/rollout. Three render branches (approved page, template-applied sibling, unique render), with a declared fidelity tier per page. Per-page, incremental, idempotent, content-preserving by default.

P

prepare-migration

adobe / skills

Prepare an entire site for migration by orchestrating the prep cascade — a full-inventory crawl (extract --prep), page-type and module-catalog confirmation (direct --prep), archetype prototypes plus design canon (prototype --prep), and asset preparation — with confirmation gates between phases. Builds the typed page inventory, confirmed module catalog, and canon consumed by `migrate`. Use when the user wants to prepare or set up a full-site migration, run migration prep, confirm page types and modules before migrating a site, get a large site ready to migrate, or invokes `$stardust prepare-migration`. Trigger phrases include “prepare the migration”, “migration prep”, “set up the migration data”, and “get the site ready to migrate”. Redesign flow only — for same-design migrations, `replica` runs its own preserve-mode prep cascade; never chain prepare-migration with replica. Not for running the migration itself (`migrate`) or converting a single page (`deploy`).

A

alphaear-logic-visualizer

rkiding / awesome-finance-skills

Create and visualize finance logic diagrams (e.g. Draw.io XML) to explain complex finance transmission chains or finance logic flows.

E

emotional-disconnect

dylantarre / animation-principles

Use when animation feels wrong, creates unintended emotional response, or mismatches context

R

responsive-adaptive

dylantarre / animation-principles

Use when building context-dependent animations - duration that changes based on device, distance, user preference, or interaction context

S

state-changes

dylantarre / animation-principles

Use when elements transform in place - toggle switches, expanding accordions, checkbox animations, button states, or any transformation without entering/exiting.

T

token-build

plugin87 / ux-ui-agent-skills

Set up or run the token build pipeline. Transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output

B

brand-guidelines

composio-community / awesome-codex-skills

Applies OpenAI's brand colors and typography to any artifact that should match the Codex/OpenAI look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply

P

professionalism-credibility

dylantarre / animation-principles

Use when creating animations for business contexts that require seriousness, competence, and trustworthy presentation.

U

ux-design

donchitos / claude-code-game-studios

Section-by-section UX spec authoring for a screen, flow, or HUD. Reads the player journey to provide context; also covers project-wide accessibility.

C

comfort-safety

dylantarre / animation-principles

Use when creating animations that reassure users, reduce anxiety, or communicate protection and security

F

figma-integration

plugin87 / ux-ui-agent-skills

Keep Figma and code in sync. Map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants/states). Use when the user wants to push tokens/components to Figma, pull a design into code, set up token↔Variable sync, or check design-code drift

F

flyer-design-generation

eachlabs / skills

Generate professional flyers and leaflets using each::sense AI. Create event flyers, promotional materials, real estate listings, restaurant menus, and more with eye-catching designs optimized for print and digital distribution.

I

implementation-debugging

dylantarre / animation-principles

Use when animation doesn't work as expected, has bugs, or behaves inconsistently

P

popmotion

dylantarre / animation-principles

Use when implementing Disney's 12 animation principles with Popmotion's functional animation library

T

technical-constraints

dylantarre / animation-principles

Use when animation is limited by browser support, platform capabilities, or technical requirements

A

architecture-diagram

nousresearch / hermes-agent

Dark-themed SVG architecture/cloud/infra diagrams as HTML

I

iphone-duo-flutter

mirzaaghazadeh / iphone-duo-skills

Adapt a Flutter app to iPhone Duo, Apple's first foldable iPhone: what MediaQuery gives you today, why displayFeatures does not work here, and how to bridge the iOS 27.1 reserved-region, hinge, and arrangement APIs through platform channels. Use when a Flutter or Dart app needs foldable iPhone support.

F

friendliness-approachability

dylantarre / animation-principles

Use when creating animations that feel warm, welcoming, and make users feel comfortable engaging.

L

large-500-800ms

dylantarre / animation-principles

Use when building larger movement animations between 500–800ms — hero transitions, complex reveals, animations that tell a story and deserve attention

L

luxury

bergside / awesome-design-skills

High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for luxury brand experiences.

M

medium-300-500ms

dylantarre / animation-principles

Use when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication

M

motion-sickness

dylantarre / animation-principles

Use when animation causes dizziness, nausea, disorientation, or vestibular discomfort

U

universal-industry

dylantarre / animation-principles

Use when designing animations for any industry or when industry-specific guidelines do not apply

D

design-system-creation

secondsky / claude-skills

Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.

D

deliberate-1200-2000ms

dylantarre / animation-principles

Use when building slow intentional animations between 1200-2000ms - app intros, loading sequences, storytelling moments that create emotional resonance

G

governance

plugin87 / ux-ui-agent-skills

Govern how the design system evolves (SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication). Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting

P

page-cro

sickn33 / agentic-awesome-skills

Analyze and optimize individual pages for conversion performance

P

product-manager

dylantarre / animation-principles

Use when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles.

S

small-200-300ms

dylantarre / animation-principles

Use when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions that users consciously perceive

S

studio-css-reset

remotion-dev / remotion

Style Remotion Studio UI inside `.css-reset` containers without relying on inherited reset properties

T

trust-reliability

dylantarre / animation-principles

Use when creating animations that build user confidence, establish credibility, and communicate dependability.

U

universal-elements

dylantarre / animation-principles

Use when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types

W

website-cloner

horuz-ai / claude-plugins

Agentic workflow for cloning websites with pixel-perfect fidelity using specialized sub-agents. Use when the user wants to clone/copy/replicate a website, create a landing page based on an existing site, or needs to extract and recreate a website's design. Includes orchestration via slash command, four specialized sub-agents (screenshotter, extractor, cloner, qa-reviewer), and outputs React components with Tailwind CSS and motion animations.

A

academic-slides

evoscientist / evoskills

Use this skill for creating or refining an academic slide deck and the talk built around it: structuring a conference talk, thesis defense, lab meeting, or paper-to-slides deck; deciding the narrative arc and slide breakdown; improving slide design and visual hierarchy; planning rehearsal, timing, Q&A, and backup slides; or generating the .pptx. Reach for it when the user is shaping the presentation itself. Do not use for writing the paper, producing standalone speaker notes/scripts/transcripts, making posters, creating isolated figures/charts outside a slide deck, or building non-academic presentations.

U

universal-tool

dylantarre / animation-principles

Use when implementing Disney's 12 animation principles with any animation tool or framework

W

wp-block-themes

automattic / agent-skills

Use when developing WordPress block themes: theme.json (global settings/styles), templates and template parts, patterns, style variations, and Site Editor troubleshooting (style hierarchy, overrides, caching).

C

create-remotion-geist

vercel-labs / skill-remotion-geist

Create Remotion videos using the Geist design system aesthetic. Use when asked to create videos, animations, or motion graphics that should follow Vercel's visual style: dark theme, spring animations, Geist typography, and the Geist color palette

D

design-system

akillness / jeo-skills

Define or refactor a shared frontend UI system before polishing one screen at a time. Use when the user needs token governance, visual-language rules, primitive naming, page-system direction, cross-product consistency, or a design handoff that should stay coherent across landing pages, dashboards, forms, and component libraries, including the reusable primitive/slot/variant APIs that system owns. Not for responsive layout-only fixes, accessibility-only remediation, or broad UI critique. Triggers on: design system, design tokens, visual language, component library foundations, UI governance, cross-product consistency, landing page plus dashboard system, primitive naming, token policy, component API architecture

M

mck-ppt-design

likaku / mck-ppt-design-skill

Create professional, consultant-grade PowerPoint presentations from scratch using MckEngine (python-pptx wrapper) with McKinsey-style design. Use when user asks to create slides, pitch decks, business presentations, strategy decks, quarterly reviews, board meeting slides, or any professional PPTX. AI calls eng.cover(), eng.donut(), eng.timeline() etc — 67 high-level methods across 12 categories (structure, data, framework, comparison, narrative, timeline, team, charts, images, advanced viz, dashboards, visual storytelling), consistent typography, zero file-corruption issues, BLOCK_ARC native shapes for circular charts (donut, pie, gauge), production-hardened guard rails for spacing, overflow, legend consistency, title style uniformity, dynamic sizing for variable-count layouts, horizontal item overflow protection, chart rendering, and AI-generated cover images via Tencent Hunyuan 2.0 with professional cutout, cool grey-blue tint, and McKinsey-style Bézier ribbon decoration.

O

open-pencil

open-pencil / open-pencil

Work with Figma .fig design files and the running OpenPencil editor — inspect structure, query nodes, analyze design tokens, export PNG/SVG/PDF/JSX, and modify designs programmatically. Use when asked to open, inspect, export, analyze, or edit .fig files, or to control the running OpenPencil app.

U

user-persona-creation

aj-geddes / useful-ai-prompts

Create detailed user personas based on research and data. Develop realistic representations of target users to guide product decisions and ensure user-centered design.

A

accessibility-issues

dylantarre / animation-principles

Use when animation excludes users with vestibular disorders, cognitive disabilities, or assistive technology needs

R

redesign

educlopez / ui-craft

Redesign an existing site or app without losing what already works — audits the current surface first, classifies what to preserve (brand, IA, SEO, content), picks a refresh/reskin/rebuild scope, then modernizes deliberately. Use when the user says \"redesign\", \"modernize this site\", \"refresh the UI\", \"make this look current\", or points at an existing page/URL they want improved rather than rebuilt from scratch. Invoke when the user asks for redesign on their UI, or mentions 'redesign' alongside design / UI / frontend work.

U

universal-practitioner

dylantarre / animation-principles

Use when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 principles is needed

U

universal-solutions

dylantarre / animation-principles

Use when facing any animation problem as a comprehensive diagnostic framework

E

element-plus-skills

jiaiyan / element-plus-skills

Element Plus Skills Library—a comprehensive skill library for AI agents to understand and use Element Plus UI components. Invoke when the user needs to work with Element Plus components, theming, i18n, dark mode, or design specifications.

U

universal-fallback

dylantarre / animation-principles

Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.

U

ux-friction

dylantarre / animation-principles

Use when animation causes user confusion, delays task completion, or creates frustration

A

accessibility-audit

webflow / webflow-skills

Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings, keyboard navigation, and generates detailed reports with fixes. Requires Webflow Designer connection. Excludes image alt text (covered by asset-audit skill).

I

instant-0-100ms

dylantarre / animation-principles

Use when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive

Migrate Material-UI (MUI) to Backstage UI (BUI) with a codemod or standalone guidance. Use when migrating MUI components and styles, running @backstage/mui4-to-bui-migration-recipe, or resolving TODO(backstage-codemod) after a BUI migration.

A

accessibility-compliance

aj-geddes / useful-ai-prompts

Implement WCAG 2.1/2.2 accessibility standards, screen reader compatibility, keyboard navigation, and a11y testing. Use when building inclusive web applications, ensuring regulatory compliance, or improving user experience for people with disabilities.

Change an existing Moda canvas—pasted (URL, share link, cvs_ id) or already in play this session: reword, restyle, recolor, resize, swap images, add/delete sections—plus export or share it. Use for: a change or export of THAT canvas, "fix this slide", every bare follow-up on what Moda just built. Outranks all triggers except mp4/gif. NOT: motion or gif/mp4 of it → moda-video; a moda.page ref → moda-website; a new artifact from it → its format skill.

R

roblox-ui-design

tabooharmony / roblox-brain

Use for Roblox UI composition, hierarchy, visual systems, style inheritance, accessibility, and design review.

C

copywriting

mblode / agent-skills

Writes and edits product and marketing copy using the brand voice, house vocabulary, awareness-stage frameworks, and product-state contracts. Use when asked to "write copy", "improve this CTA", "remove AI writing patterns", or name an error or empty state. For behavior decisions use product-design; for docs use docs-writing.