Design AI agent skills

3,804 skills in the archive. Read a skill’s instructions or open its original repository.

• Visual Explainer

  by @coco-research

  Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts. Use for diagrams, architecture overviews, diff or plan reviews, project recaps, comparison tables, slide decks, and…

• Scroll World

  by @coco-research

  Build an immersive scroll-scrubbed "fly through the world" landing page for any industry or brand using Higgsfield. As the visitor scrolls, a pre-rendered camera flies from outside each scene into its interior, then flows on to…

• Ui Ux Pro Max

  by @coco-research

  Use when designing, building or reviewing UI/UX for a web or mobile app: picking styles, color palettes, typography, layout, animation or charts, or checking accessibility and touch targets. Priority-ranked rules ordered by…

• Journey Map

  by @coco-research

  Loads full context for a React Flow (@xyflow/react) user journey mapping project. Use when working on, extending, debugging, or building features for the journey map tool. Triggers on: "journey map project", "open journey map",…

• Pmstudio Dr

  by @coco-research

  Generate a Disaster Recovery plan with RTO/RPO targets. Use when someone asks to "create a DR plan", "disaster recovery", "business continuity", or "RTO RPO". Do NOT use for step-by-step restoration runbooks — use…

• Clone Website

  by @coco-research

  Clone any website into a pixel-perfect single-file HTML prototype. Extracts design tokens, assets, CSS computed styles, interaction patterns, and content via Playwright. Outputs a self-contained HTML file with real data…

• Design Taste Frontend

  by @coco-research

  Use when the user asks for a landing page, marketing site, portfolio, or redesign, not dashboards or data tables. Infers a design read, sets the three dials, picks a real design system, and blocks generic AI patterns at…

• Redesign Existing Projects

  by @coco-research

  Use when the user asks to make an existing website or app look premium, remove generic AI-looking design, or polish a UI without changing functionality. Audits the stack, lists the generic AI patterns, and upgrades in place.

• Tailwind Patterns

  by @coco-research

  Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture. Use when building with Tailwind v4 or migrating from v3.

• Z Wanghong Handwritten Ppt

  by @tjxj

  将文章、讲稿或技术主题制作成王虹学术报告气质的 16:9 Notability 手写风 HTML 幻灯片，逐页导出 PNG，并默认同时生成可逐条播放动画的时间轴版 HTML。触发词：王虹PPT风格、王虹手写PPT、Notability学术手写幻灯片、手写网页PPT、手写PPT、数学家手写报告风、手写PPT时间轴版、手写演示动画。

• Z Wanghong Handwritten Video

  by @tjxj

  将 z-wanghong-handwritten-ppt 生成的王虹学术手写 HTML 直接制作成 16:9 动画 MP4，字形锁定为原 PPT Skill 预览封面的手写字，完整保留字号、颜色、留白、图表和标注，输出零音频流。用户提到动画版王虹PPT、王虹手写动画、Notability手写视频、手写PPT转MP4、学术手写动画、纯画面手写视频、把王虹手写 HTML 做成视频或要求手写风 MP4 时必须使用。

• Z Xkcd Panda Comic

  by @tjxj

  当用户要求把文章、Markdown、笔记、链接内容或一个主题做成“xkcd 风格四格漫画”“四格漫画”“金馆长熊猫表情”“金教授熊猫脸”“熊猫梗图”“文章转四格漫画”“用幽默方式解释文章核心观点”“生成黑白熊猫漫画配图”时必须使用。本 skill 会读取内容、提炼核心表达和可幽默化冲突，产出 2x2 黑白手绘四格漫画；人物默认使用金馆长熊猫表情味更浓的熊猫 meme 角色，兼容金教授熊猫脸式夸张表情，优先生成黑白手绘风格 PNG，必要时再用 SVG…

• Popular Web Designs

  by @Tommy-yw

  54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes…

• P5js

  by @Tommy-yw

  Production pipeline for interactive and generative visual art using p5.js. Creates browser-based sketches, generative art, data visualizations, interactive experiences, 3D scenes, audio-reactive visuals, and motion graphics —…

• Concept Diagrams

  by @Tommy-yw

  Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark mode. Best suited for…

• Album Art Director

  by @bitwize-music-studio

  Creates visual concepts for album artwork and generates AI art prompts. Use during planning for concept discussion, or after all tracks are Final for actual artwork generation.

• Architecture Diagram

  by @Tommy-yw

  Generate dark-themed SVG diagrams of software systems and cloud infrastructure as standalone HTML files with inline SVG graphics. Semantic component colors (cyan=frontend, emerald=backend, violet=database, amber=cloud/AWS,…

• Genre Creator

  by @bitwize-music-studio

  Create new genre documentation files for the bitwize-music genre library. Use when the user wants to add a genre, says "/genre-creator", "neues Genre erstellen", "Genre hinzufuegen", "add genre", or asks to create genre…

• Scrapling

  by @Tommy-yw

  Web scraping with Scrapling - HTTP fetching, stealth browser automation, Cloudflare bypass, and spider crawling via CLI and Python.

• Ops Social Planner

  by @Lifecycle-Innovations-Limited

  OPS on-demand: This skill should be used when the user asks to "content calendar", "what is scheduled"…

• Ops Gtm

  by @Lifecycle-Innovations-Limited

  OPS on-demand: This skill should be used when the user asks to "go to market", "GTM plan", or…

• Frontend Design

  by @cas-bigdatalab

  Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build vue-web components, pages, artifacts, posters, or applications (examples include websites, landing…

• Academic Paper Composer

  by @AAASS554

  Use when the user needs to turn a real software engineering / computer science project and an existing thesis draft into a submission-ready undergraduate thesis manuscript. Trigger for requests such as "根据项目把论文改成定稿",…

• Esther Design System

  by @esthersjw

  不二的个人IP设计系统。做HTML页面、个人网站、教程页面、介绍页面、landing page等任何前端设计时自动触发。包含品牌DNA和多个场景子规范。

• Butterbase Skills

  by @butterbase-ai

  Claude Code plugin for Butterbase — 39 guided skills, 34 slash commands, and auto-configured MCP for the AI-native backend-as-a-service.

• Chunui

  by @liseami

  Build iOS apps with the ChunUI design system (Monochrome texture extracted from the production app Zinner/Chat0IM). Use when integrating ChunUI via SPM, theming with CCColors, using CC components…

• Huggingface Lora Space Builder

  by @waybarrios

  Build and publish a Gradio Hugging Face Space for a user-provided image or video LoRA, including pipeline selection and model-card settings. Use for LoRA demos; use huggingface-spaces for general Space work.

• Frontend Design

  by @waybarrios

  Create distinctive, production-grade frontend interfaces with high design quality and accessible markup. Use this skill when the user asks to build or beautify web components, pages, applications, landing pages, dashboards,…

• Journey Schema

  by @butterbase-ai

  Use as the schema build stage of the Butterbase journey, after journey-plan and journey-preflight. Implements the Tables section of 02-plan.md by delegating to schema-design, previewing the diff (manage_schema dry_run) and…

• Ai Slop

  by @waybarrios

  Operational rubric that turns "don't make AI slop" into observable properties, severity levels, evidence requirements, and repair actions for interface design. Use as the reference rubric when building or reviewing marketing…

• Pptx

  by @YunjueTech

  Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for creating new presentations, modifying content, working with layouts, adding speaker notes, or any presentation tasks.

• Migrations

  by @butterbase-ai

  Use when moving a Butterbase app between regions, checking migration progress, aborting a stuck move, reverse-rolling a completed move, or tearing down retained source replicas after a move is stable

• Omd:Aphrodite

  by @kwakseongjae

  Maximum-craft one-page landing — the wow bar. omd:landing 의 구조 위에 마감(서체 조달·그레인·깊이·색보정·스크롤 타임라인)과 최고급 에셋을 얹고, 랜딩 검사 전 항목 통과를 합격선으로 삼는다. Trigger: '와우', '압도적인', '최고급', '쇼케이스용', 'aphrodite', '데모용 랜딩', '이거 자랑할 거야'.

• RuiC Card Skill

  by @HRuiCcc

  Generate interactive 3D holographic collectible-card websites from a user description or reference image, using layered artwork, Blender and Three.js. Includes project-local Blender installation, reusable parallax materials and…

• Omd:Autopilot

  by @kwakseongjae

  One-prompt autonomous product design and implementation. Use automatically for broad greenfield UI requests such as 'from scratch', '새 제품/화면을 알아서 만들어줘', or requests that delegate DESIGN.md creation. It decides whether to reuse,…

• Pptx

  by @cubeplexai

  Create polished, fully-editable PowerPoint (.pptx) decks end to end — research or read the source, outline a narrative, pick a theme, build native editable slides (cover / section / agenda / cards / steps / comparison table /…

• Docx

  by @cubeplexai

  Create polished, fully-editable Word (.docx) documents end to end — research or read the source, outline the structure, pick a style set, build native editable content (cover / headings / body / lists / three-line tables /…

• Pdf

  by @cubeplexai

  Use this skill when visual quality and design identity matter for a PDF. CREATE (generate from scratch): "make a PDF", "generate a report", "write a proposal", "create a resume", "beautiful PDF", "professional document", "cover…

• Omd:Harness

  by @kwakseongjae

  사용자와 단계별로 검토하는 guided design harness. Discovery→Wireframe→Components→Microcopy→Validation을 omd-master가 실행하고 journey/system/validation의 필수 체크포인트에서 멈춘다. '/omd-harness', '체크포인트마다 검토', '나와 단계별로 디자인', 'guided design' 요청에 사용. 질문 없이…

• Omd:Reference Capture

  by @kwakseongjae

  선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트(토큰·구조·visual reference)를 캡쳐. brand homepage 패칭, 컴퓨티드 스타일 inspect, 로고/스크린샷을 assets/_reference/<id>/ 로 가져와 attribution.md + LICENSE-NOTE.md와 함께 저장. '뱅크샐러드 에셋 가져와줘', 'X 사이트 패칭', 'X reference…

• Omd:Apply

  by @kwakseongjae

  프로젝트 DESIGN.md를 UI/시각 작업의 brand context로 적용. 컴포넌트·색상·폰트·레이아웃 수정 같은 구체적 요청과 톤·분위기 표현 — KR '좀 더 따뜻하게', EN 'make it warmer/cooler', 日本語「もう少し暖かく」, 繁體中文「更溫暖一點」 — 모두에 트리거. DESIGN.md 부재 시 omd:init 우선. 화면 전체 신규 디자인은 omd:harness, 교정 기록은…

• Omd:Slop Audit

  by @kwakseongjae

  실제 제품 route의 UI·UX copy를 검사해 제품 맥락 없이 반복된 생성형 기본 패턴, 브랜드 근거 없는 장식, 카드·그라데이션·아이콘 타일 남용, 번역투와 추상 카피를 rule ID와 line ref로 진단한다. 'AI slop 잡아줘', '템플릿 같아', '왜 AI가 만든 화면 같지?', 'anti-slop audit' 요청에 사용한다. 접근성 오류와 취향 차이를 별도 등급으로 구분한다.

• Omd:Humanize

  by @kwakseongjae

  제품 문서·UX 카피·랜딩 카피를 KO/EN/JA/ZH-CN/ZH-TW 각 언어의 자연스러운 문장으로 다듬되 사실·수치·명령어·링크·브랜드 voice를 보존한다. 'AI 티 없애줘', '번역투 고쳐줘', '문장이 기계적이야', '현지 사용자처럼 다듬어줘', 'humanize this copy' 요청에 사용한다. AI 작성 여부를 판정하거나 탐지 회피를 약속하지 않는다.

• Omd:Feel

  by @kwakseongjae

  디자인·프론트 업계가 '감'으로 쓰던 인터페이스 디테일을 수치화한 규칙으로 적용(APPLY)하거나 감사(AUDIT)한다. Jakub Krehel의 make-interfaces-feel-better 철학을 계승 + HIG/Material/WCAG/DS 토큰/실무자 리서치로 확장한 17축·113규칙(provenance 등급별). 모션 타이밍·이징·동심원 radius·tabular-nums·44px…

• Omd:Init

  by @kwakseongjae

  프로젝트 루트에 DESIGN.md를 부트스트랩 — 실제 기업 레퍼런스 중 컨텍스트 매칭으로 추천하고 선택된 레퍼런스의 톤&매너를 보존한 variation을 생성. DESIGN.md 부재 상태에서의 UI 작업 또는 '디자인 시스템 세팅', 'set up our design system', 「デザインシステムを作って」, 「建立設計系統」류의 요청에 트리거. CLAUDE.md / AGENTS.md / Cursor…

• Omd:Update

  by @kwakseongjae

  Safely update an existing oh-my-design installation in place and verify it afterward. Use when the user asks to update, upgrade, refresh, reinstall, or check whether their OmD skills, agents, hooks, or reference catalog are…

• Omd:Orchestrator

  by @kwakseongjae

  멀티 에이전트 디자인 워크플로우 supervisor. writer, locale adaptation, humanize, UI slop audit, designer review, final QA, image materialization을 routing한다. 2-round revision cap을 유지하며 다국어 문서·UI 개선·출간 준비처럼 여러 역할이 필요한 요청에 사용한다.

• Omd:Design

  by @kwakseongjae

  Legacy survey-based DESIGN.md writer redirect. Use for old omd:design requests only to route them to the Core v2 Autopilot or init workflow; this compatibility skill never writes DESIGN.md itself.

• Omd:Media

  by @kwakseongjae

  Brand-consistent asset sets from DESIGN.md — hero, section illustrations, icon sets, OG image — generated through whichever channel the user actually has (grok build image_gen, Codex $imagegen, Gemini, xAI/Recraft/OpenAI keys)…

• Clone Website

  by @vibeeval

  Reverse-engineer and clone a website in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone,…

• Omd:Setup

  by @kwakseongjae

  Guided setup of the tools the design harness can use — image/video generation channels, browser, encoders. Detects what the user already has, explains pros/cons/costs, asks instead of instructing, and saves choices to…

• Omd:Kr Writer

  by @kwakseongjae

  한국어 블로그·장문 글을 12개 voice preset으로 작성하거나 다듬는다 — toss-tech-design (default), karrot-neighborly, brunch-maker-popular, naver-d2-engineering, biz-formal-report, academic-paper, journalism-broadsheet, kakao-warm-product,…

• Omd:Experiment Gallery

  by @kwakseongjae

  N개 brand experiment를 한 화면에서 비교하는 gallery index.html을 생성. 각 카드는 brand name, wow rating, multi-turn refinement deltas, iframe scaled preview, standalone link 포함. '결과물 한 번에 보여줘', '갤러리 만들어', '5개 비교 뷰', 'experiment 결과 정리' 류 트리거.…

• Omd:Landing

  by @kwakseongjae

  Scroll-native one-page landing that overwhelms — concept, composition, asset placement, and scroll choreography derived from DESIGN.md and the measured landing-craft codex. Trigger: '랜딩 페이지', '원페이지', 'landing page', 'one-pager',…

• Omd:Taste

  by @kwakseongjae

  시스템이 학습한 사용자의 디자인 취향을 한 뷰로 렌더. .omd/preferences.md + foldin-proposal.json + DESIGN.md를 읽어 반영됨/대기 중/보류됨/모르는 것 4그룹으로 보여준다. '/omd-taste', '내 취향 보여줘', '취향 현황', 'what are my preferences', 'show my taste', 「私の好みを見せて」, 「顯示我的偏好」류의 발화에…

• Omd:Issue

  by @kwakseongjae

  oh-my-design 사용 중 불만·결함·아쉬운 점을 구조화된 GitHub 이슈로 접수하고, 쌓인 이슈를 배치로 처리한다. 사용자 모드('이슈 등록해줘', '이거 불편한데 신고할래', '버그 리포트', 'file an issue', '기능 요청')와 내부 도그푸딩 모드(스킬을 돌리다 미흡한 부분을 발견한 오케스트레이터·서브에이전트가 직접 접수) 둘 다 지원. '이슈 처리해줘', 'process…

• Omd:Codex Image

  by @kwakseongjae

  이미지 placeholder를 동적으로 materialize. Codex 채널에서는 내장 image-generation primitive 호출, Claude Code 채널에서는 omd-asset-curator로 fall back, OpenCode에서는 spec dump. HTML/MD의 `<!-- omd:gen-image -->` 블록을 단일 source of truth로 사용. '이미지 생성해줘',…

• Omd:Asset Fetch

  by @kwakseongjae

  사용자 product UI 생성 시 placeholder 자리를 generic SVG가 아닌 **실제 free-license CDN 자산**으로 채운다. 로고·일러스트·아이콘·사진·폰트·패턴 카탈로그를 verified URL만으로 운영. '에셋 가져와줘', '플레이스홀더 진짜 이미지로', '로고 자리 채워줘', 'unsplash에서 사진 가져와' 류 요청에 트리거. omd:apply /…

• Agent Qa Testing

  by @vibeeval

  Agent davranis testi ve protokol uyumluluk dogrulamasi. Agent'larin tanimli rollerine uygun davranip davranmadigini assertion-based test'lerle olcer. Personality drift, role violation ve output kalite regresyonu tespit eder.

• Show Widget

  by @cubeplexai

  Build inline interactive HTML widgets with show_widget — charts, diagrams, dashboards, sliders, side-by-side comparisons, or any visual explainer. Load before non-trivial widget work for design rules and scenario skeletons.

• Omd:Learn

  by @kwakseongjae

  .omd/preferences.md의 status:pending 항목을 Core v2 System Graph에 합쳐 DESIGN.md를 재생성하고 status를 applied로 플립. '프리퍼런스 정리해줘', 'fold preferences', 'apply all corrections', 「好みをDESIGN.mdに反映」, 「套用偏好」류의 요청에 트리거. 단발성 교정 기록은 omd:remember.

• Art Director

  by @vibeeval

  AI art direction system. Claude directs image generation models (Gemini, DALL-E, Flux) via structured prompts. Generate banners, diagrams, logos, screenshots, and social media visuals without leaving the terminal.

• Omd:Designer Review

  by @kwakseongjae

  시각 + 브랜드 일관성 리뷰. HTML/MD/JSX artifact를 받아 brand DESIGN.md 대비 typo hierarchy, 색 budget, radius scale, 컴포넌트 state, 모바일 반응형 검수. severity BLOCK/WARN/FYI + line ref 출력. 'UI 리뷰', '디자인 검토', 'DESIGN.md 대비 검수' 류 트리거.

• Omd:Sync

  by @kwakseongjae

  DESIGN.md 변경분을 CLAUDE.md / AGENTS.md / .cursor/rules/omd-design.mdc shim 3종에 전파. 'shim 갱신', 'drift 확인', 'ship', 'publish', 「shimを更新」, 「同步 CLAUDE.md」류의 요청에 트리거. DESIGN.md가 수정됐는데 shim이 오래됐을 때 자동 감지해 제안하기도 함.

• Omd:Remember

  by @kwakseongjae

  사용자의 디자인 선호·교정을 .omd/preferences.md에 기록. '이거 기억해줘', '앞으로는 이렇게', 'remember this', 'going forward never X', 「覚えておいて」, 「記住這個」류의 발화 또는 omd:apply가 교정을 감지했을 때 트리거. 기록된 내용은 omd:learn으로 DESIGN.md에 정식 반영.

• Omd:Migrate

  by @kwakseongjae

  Legacy deep-reference writer safety gate. Use for old brand migration requests only to prevent retired section/frontmatter writes until the Core v2 catalog migration pipeline is authoritative.

• Omd:Final Qa

  by @kwakseongjae

  출간 ready 직전 read-only critic. 8-item rubric 강제. 'looks good' rubber-stamp 금지. 라인 ref 필수. 2-round revision hard cap. '최종 QA', '출간 검수', 'rubric으로 평가' 류 트리거.

• Design To Code

  by @vibeeval

  Figma-to-code translation, design tokens, spacing/typography scales, responsive breakpoints, and design system bridge patterns.

• Omd:Add Reference

  by @kwakseongjae

  Reference catalog authoring compatibility gate. Core v2 cutover가 끝나기 전에는 신규 legacy DESIGN.md 쓰기를 차단하고 안전한 재개 조건을 설명한다.

• Design System Generator

  by @vibeeval

  Generate design systems with color palettes, typography, spacing scales, component tokens, and Tailwind config

• Brand Identity

  by @vibeeval

  Voice framework, visual identity standards, color palette management, typography specs, brand consistency

• Component Library Patterns

  by @vibeeval

  Design system token management, component API design, Storybook, and visual regression testing patterns

• Omd:Batch Launch

  by @kwakseongjae

  Reference batch writer compatibility gate during the DESIGN.md Core v2 catalog cutover.

• Accessibility Patterns

  by @vibeeval

  WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization

• Page

  by @greenfield-inc

  House standard for any HTML page written for a person. Use when another skill says to render a page.

• Ui Mockup

  by @greenfield-inc

  Create three UI mockup options per round, then refine the user's favorite until they approve one. Works from screenshots of the current product or from agreed references for something new, with whatever tools are available (an…

• Explain Visually

  by @greenfield-inc

  Complement an answer or discussion with a first-principles visual HTML explanation, saved in Grain when connected. Use when explaining how something works, why it changes, or how options differ and a visual would materially help…

• Html Explainer

  by @greenfield-inc

  The house standard for any skill that renders an HTML page for a person to read, covering design tokens, typography, components, diagrams, and quality gates so every generated page shares one calm, graphic-first look. Use when a…

• Gather Evidence

  by @greenfield-inc

  Use when handed one factual question about the code or a running system. Returns evidence. Never proposes a fix.

• Spike

  by @greenfield-inc

  Use only when a decision is blocked on a fact nobody has. One time-boxed question, one answer.

• Threejs Architecture Effects

  by @lhlGitHub

  Build or refine real Three.js architectural construction animations, especially Chinese pavilions, pagodas and clock towers with brick-by-brick growth, timber framing, layered eaves, procedural PBR materials and interactive…

• Frontend Slides Editable

  by @archlizheng

  Use when the user wants a single-file HTML presentation that stays editable in the browser after generation, or needs object-level layout editing, slide reordering, local save/export, or PPT/PDF-to-web conversion with continued…

• Job Description Skill

  by @yanliudesign

  Job Description 解码器 + Offer 策略系统。把任何 JD 翻译成「这家公司到底在招什么人 / 我的匹配度 / Gap 在哪 / 为什么投/不投 / 面试会问什么 / 下一步怎么走」。只有 3 步：贴 JD → 给简历 → 自动生成并打开一份 HTML Offer Strategy Report。是整个求职链路的入口，向下衔接 Resume Skill 和 BQ Skill。关键词：job description, JD,…

• Offer Compare Skill

  by @yanliudesign

  Offer 对比决策器。用户同时拿到两份（或多份）offer 纠结怎么选时，扮演 Senior Career Decision Advisor：结构化对比 comp / 成长 / AI 敞口 / 公司强度 / 团队风险 / 晋升速度 / 生活方式，识别 front-loaded vs long-term upside、resume value、switch-out 难度、hidden risks，最后给一条**明确、有立场、不中性**的推荐（并附「你是…

• Music Video

  by @NoizAI

  Build a music video from an existing song and lyrics, either as p5.js/p5.brush animation or by assembling local images and clips. Use when the user mentions a music video, MV, lyric video, visualizer, storyboard, 音乐视频, 歌词动画, or…

• Building Tables

  by @ancoleman

  Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids. Use when creating tables, implementing sorting/filtering/pagination, handling large datasets (10-1M+…

• Guiding Users

  by @ancoleman

  Implements onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help panels, and progressive disclosure patterns. Use when building first-time experiences, feature discovery, guided…

• Implementing Drag Drop

  by @ancoleman

  Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids. Use when building interactive UIs requiring direct manipulation, spatial…

• Providing Feedback

  by @ancoleman

  Implements feedback and notification systems including toasts, alerts, modals, progress indicators, and error states. Use when communicating system state, displaying messages, confirming actions, or showing errors.

• Designing Layouts

  by @ancoleman

  Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints. Use when structuring app layouts, building responsive designs, or creating complex page…

• Assembling Components

  by @ancoleman

  Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill…

• Spine Animation

  by @GenielabsOpenSource

  Create Spine 2D skeletal animations from pre-existing character assets (separated body-part PNGs, atlas spritesheet, or a full character image). Use this skill whenever the user wants to animate a 2D character, create Spine JSON…

• Revyl Cli Cross Platform Review

  by @RevylAI

  Find meaningful visual differences between confidently matched iOS and Android app states in Revyl Atlas. Use for cross-platform reviews, not missing-screen or feature-coverage audits.

• Revyl Cli Figma Review

  by @RevylAI

  Guide a Figma frame or component review against observed app evidence in Revyl Atlas, with findings in chat, a local visual report, or explicitly requested Atlas annotations.

• Revyl Cli Analyze

  by @RevylAI

  Analyze failed Revyl test, workflow, and device-session reports via CLI to classify real bugs, flaky tests, infra issues, setup failures, or test-design improvements.

• Revyl Mcp Analyze

  by @RevylAI

  Analyze failed Revyl MCP test executions and classify them as real bugs, flaky tests, infra issues, or test-design improvements.

• Tait Crt Interface Skill

  by @TaiT-tt

  Generate exactly one finished CRT retro computer-interface illustration from an uploaded portrait, group photo, creature, object, or described theme. Use when the user wants anchored subjects re-authored as an exaggerated…

• Zaidan

  by @nightly-labs

  Install and configure the Zaidan component registry in an existing SolidJS codebase, and recommend Zaidan components for a product or interaction need. Use when setting up Zaidan, adding Zaidan components, fixing consumer-side…

• Prototype

  by @nightly-labs

  Build several different design directions (3 by default) for a feature or issue as Storybook stories, show them to the user, and let the user choose one. Use when the user writes `$prototype <feature>`, "prototype X", or asks…

• Distinctive Frontend Design

  by @nightly-labs

  Give new or substantially redesigned interfaces a deliberate visual direction grounded in their subject, audience, content, and purpose. Do not use for minor styling fixes.