Design
UI/UX direction, visual design, and design systems
dashboard
by arxhidamos
Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.
figma-illustration-import
by CoRLab-Tech
Import vector illustrations from Figma as reusable React atom components. Use when a component or page needs a custom illustration (NOT a standard Carbon icon). Triggers on requests like 'implement this illustration from Figma', 'add this Figma illustration', 'create illustration component', or when a Figma node contains a multi-layer vector illustration (lock, envelope, microscope, etc.). BEFORE creating a new illustration, always check if it already exists in apps/web-app/src/components/atoms/Illustration*.tsx and apps/web-app/public/assets/illustrations/.
VoyageDoc Design System — SKILL.md
by gilbatini
```
uncodixfy
by weeyegood
Prevents generic AI/Codex UI patterns when generating frontend code. Use this skill whenever generating HTML, CSS, React, Vue, Svelte, or any frontend UI code to enforce clean, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub instead of typical AI-generated UI.
letsgo
by Clarkky1
This skill should be used when the user types "/letsgo", says "letsgo", "let's go build", "start a new project", or "kick off a new build". It runs the full 15-step project kickoff flow: personal vs client check (with client meeting prep if client), gather context + MCP setup, brand check + design system, UI standard (Hallmark/portfolio-design/motion-design-school/website-ui-v2/liquid-glass-design/landonorris-ui/pixel-art) + design-inspiration brief (Mobbin/Godly/Awwwards/Lapa/VibeUI/Aceternity/Origin UI/Magic UI/Motion Primitives/21st.dev/Fancy Components/hover.dev/buildui.com/UIverse/Emil Kowalski/Grainient/Mesher/CSS Pattern/SVG Backgrounds/Lummi/Fontjoy/Typewolf/Realtime Colors/oklch/Radix Colors/Lucide/Phosphor/Tabler/60fps.design/Codrops/transition.style), platform detection + animation stack + lenis + matter.js, 3-terminal setup (with iteration cap: 4 attempts max per sub-agent then escalate to supervisor; and model tiering: Sonnet for orchestration/known patterns, Opus for judgment calls/ambiguous decisions/second-failure escalation), background component (spline/haikei/vanta/grainient/mesher/css-pattern/svgbackgrounds/framer/endlesstools), typography + color + icon lock, engagement design, tech stack + database (supabase/prisma/drizzle) + auth (clerk/nextauth) + zod validation + REST API 8 rules (domain-driven/HTTP methods/idempotence/status codes/versioning/semantic paths/batch/query language) + infra layer (reverse proxy/load balancer/API gateway) + scale readiness (read replicas/connection pooling/message queues/circuit breakers/CDN/distributed tracing/multi-region/cost guardrails) + RAG (pgvector/Pinecone/hybrid search/reranker/GraphRAG) + knowledge graph (Neo4j/Memgraph/FalkorDB/GraphRAG), folder structure, security standards, hand off to autonomous-engineer, design quality gate, Flutter performance & security gate (RepaintBoundary/memory leaks/shader warm-up/obfuscation/API security/.gitignore), flutter-google (Effective Dart/Material 3/Google best practices/Firebase/flutter_lints), app store prep (if mobile), n8n automation offer + next steps. Video generation: remotion (React) or hyperframes (HTML+GSAP, agent-first, Apache 2.0, no build step) — invoke hyperframes skill when building HTML-to-video pipelines.
ogt-docs-define-branding
by OpenDNDApps
Create brand definition documents covering visual identity, tone of voice, brand guidelines, and brand assets. Use when establishing or documenting brand identity and ensuring consistent brand expression.
frontend-design
by jdjajdajjd
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
frontend-design
by yuanxiao0115
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
resume-forge
by erfanezk
Expert resume reviewer that analyzes resumes against industry best practices and provides actionable, section-by-section feedback. Use this skill whenever the user shares a resume for review, asks for resume feedback, wants to improve their CV, mentions getting more interviews, asks why they're not hearing back from applications, wants to check their resume before applying to jobs, or asks any question about resume writing, formatting, or job application strategy. Triggers on: resume review, CV feedback, improve my resume, check my resume, resume critique, job application help, ATS optimization, resume tips, how to write a summary, what skills to include, how to list work experience, resume format, bullet points, action verbs, resume structure, and any other resume-related question. Also triggers when the user pastes resume content or shares a resume file (PDF, DOCX, image).
System Canvas JSON Generation
by Evanfeenstra
The JSON is valid (no trailing commas, no comments).
frontend-design
by kiranmurat-source
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
ai-tech-lead
by lmagsino
Your AI technical co-founder. Founders get a CTO who never sleeps. Developers get a senior tech lead who challenges, reviews, and ships with you. Covers the full journey — from raw idea to shipped product. Adapts language based on your role (founder, developer, tech founder). Modes: start, strategist, designer, challenge, blueprint, forge, guard, hunt, launch, roadmap, review. Activate with /ai-tech-lead followed by a mode name, or just describe what you need.
openfoodfacts
by linksmith
"Skill for investigating food product data using the Open Food Facts database. Use this skill when the user wants to analyse food products at scale — Nutri-Score distributions, NOVA ultra-processed food rates, additive frequencies, brand comparisons, or European cross-country nutrition patterns. SHOWCASE TRIGGER: when the user says 'showcase [brand]' or 'show me [brand]' generate a full HTML brand profile page. Triggers on: Open Food Facts, OFF, food.parquet, DuckDB food data, Nutri-Score, NOVA groups, ultra-processed foods, food labelling, E-numbers, food additives, European food data, food product databases, food transparency, Dataharvest workshop, food journalism, showcase, brand profile, brand dashboard. Primary method: DuckDB queries on a local food.parquet file (4.5M products, sub-second queries). Secondary: live API for individual product lookups."
video-prompt-director
by zhouwei713
Use when the user wants to turn a one-line video idea, rough brief, link, document, product description, feature list, or research material into a precise, source-grounded video generation prompt for HyperFrames or other video tools. The skill extracts key facts, product functions, commands, UI text, evidence, and visualizable details from provided or researched sources, then produces a controlled 30-second video prompt with shots, narration, screen text, motion, style, and constraints.
pathforge-design-iteration
by DrewDey
Hourly design & UX iteration on PathForge. Read four short files, make one real change, commit.
frontend-design
by RizqMarketing
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
html-slides
by YaoYao021123
Create stunning single-file HTML presentations (slides) with responsive auto-scaling, keyboard navigation, and Chart.js integration. Use this skill whenever the user asks to create slides, presentations, slide decks, or HTML-based pitch decks — even if they don't explicitly say "slides". Also use when they mention converting content into a visual presentation format, making a talk visually compelling, or building an interactive slideshow. Supports 12 curated color palettes (6 dark + 6 light) sourced from ColorHunt, deliberately avoiding the overused tech blue-purple palette. Dark palettes: Amber Gold, Deep Teal, Crimson Night, Forest Shadow, Silver Elite, Volcanic Orange. Light palettes: Paper Navy, Cloud Teal, Warm Terracotta, Lavender Mist, Sage Garden, Blush Coral.
outils-pointage-design
by marwanerhafes98-del
Use this skill to generate well-branded interfaces and assets for OUTILS POINTAGE, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
app-planner
by rshankras
Guides you through comprehensive iOS/Swift app planning and analysis. Use for new apps (concept to architecture) or existing apps (audit current state, plan improvements, evaluate tech stack). Covers product planning, technical decisions, UI/UX design, and distribution strategy.
hig-foundations
by raintree-technology
Apple Human Interface Guidelines design foundations. Use this skill when the user asks about "HIG color", "Apple typography", "SF Symbols", "dark mode guidelines", "accessible design", "Apple design foundations", "app icon", "layout guidelines", "materials", "motion", "privacy", "right to left", "RTL", "inclusive design", branding, images, spatial layout, or writing style. Also use when the user says "my colors look wrong in dark mode", "what font should I use", "is my app accessible enough", "how do I support Dynamic Type", "what contrast ratio do I need", "how do I pick system colors", or "my icons don't match the system style". Cross-references: hig-platforms for platform-specific guidance, hig-patterns for interaction patterns, hig-components-layout for structural components, hig-components-content for display.
frontend-design
by luongnv89
Create distinctive, usability-focused, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include web apps, landing pages, dashboards, forms, portfolios). Generates creative, polished code that avoids generic AI aesthetics. Applies "Don't Make Me Think" usability principles and a default style guide (Black/White/Gray/Bright Green) when no style preference is provided.
ui-ux
by liyecom
SFC patched skill. Use when "ui-ux" is relevant.
beehiiv-ui-skills
by ihlamury
Beehiiv's UI design system. Use when building interfaces inspired by Beehiiv's aesthetic - light mode, Inter font, 4px grid.
jasper-ui-skills
by ihlamury
Jasper's UI design system. Use when building interfaces inspired by Jasper's aesthetic - light mode, Inter font, 4px grid.