Design
UI/UX direction, visual design, and design systems
design-principles
by nokonoko1203
Enforce a precise, minimal design system inspired by Linear, Notion, and Stripe. Use this skill when building dashboards, admin interfaces, or any UI that needs Jony Ive-level precision - clean, modern, minimalist with taste. Every pixel matters.
webflow-designer-api
by 224-Industries
Work with the Webflow Designer API — either by building Designer Extensions (iframes inside the Webflow Designer) or by generating code snippets for the Designer API Playground. Covers element manipulation, styles, components, pages, variables, assets, error handling, CLI usage, and UI design patterns. Use when creating, debugging, or modifying Designer Extensions, OR when the user wants to run Designer API code in the Playground app.
ux-designer
by gabeosx
Expert UX/UI design assistant based on the "Refactoring UI" philosophy (by Wathan & Schoger). Enforces logic-based design, strict hierarchy, and "buildable" visual systems. Use for converting requirements into professional, high-fidelity specs.
seedance
by robonuggets
Generate cinematic motion graphics videos using ByteDance Seedance 2.0 via Fal AI. Covers image-to-video, reference-to-video, text-to-video, liquid glass prompting, App Store screenshot scraping, and the full pipeline from screenshot to finished promo clip. Triggers on seedance, cdance, motion graphics, liquid glass, app promo, video promo.
ai-figure
by hustcc
Generate clean SVG diagrams (flowchart, tree, architecture, sequence, quadrant, gantt, state machine, ER, timeline, swimlane, bubble chart) from a markdown string or a JSON config via fig(). Auto-layout, zero coordinates needed. Works in browser and Node.js.
every-style-editor-2
by ratacat
Use this agent when you need to review and edit text content to conform to Every's specific style guide. This includes reviewing articles, blog posts, newsletters, documentation, or any written content that needs to follow Every's editorial standards. The agent will systematically check for title case in headlines, sentence case elsewhere, company singular/plural usage, overused words, passive voice, number formatting, punctuation rules, and other style guide requirements.
every-style-editor
by ratacat
This skill should be used when reviewing or editing copy to ensure adherence to Every's style guide. It provides a systematic line-by-line review process for grammar, punctuation, mechanics, and style guide compliance.
design-implementation-reviewer
by ratacat
"Use this agent when you need to verify that a UI implementation matches its Figma design specifications. This agent should be called after code has been written to implement a design, particularly after HTML/CSS/React components have been created or modified. The agent will visually compare the live implementation against the Figma design and provide detailed feedback on discrepancies.\n\nExamples:\n- <example>\n Context: The user has just implemented a new component based on a Figma design.\n user: \"I've finished implementing the hero section based on the Figma design\"\n assistant: \"I'll review how well your implementation matches the Figma design.\"\n <commentary>\n Since UI implementation has been completed, use the design-implementation-reviewer agent to compare the live version with Figma.\n </commentary>\n </example>\n- <example>\n Context: After the general code agent has implemented design changes.\n user: \"Update the button styles to match the new design system\"\n assistant: \"I've updated the butto..."
nano-banana-app-store-campaign
by chawlaaditya
"Build premium, consistent App Store screenshot campaigns with Nano Banana. Use when Codex needs to analyze an app codebase for brand, style, and claims, decide which screens should be captured, direct the user to take specific screenshots, turn those screenshots into advertisement-first App Store slides, keep a consistent style anchor across the set, and normalize the final exports to App Store portrait sizes."
reviewing-design-docs
by axiomantic
"Use when reviewing design documents, technical specifications, architecture docs, RFCs, ADRs, or API designs for completeness and implementability. Triggers: 'review this design', 'is this spec complete', 'can someone implement from this', 'what's missing from this design', 'review this RFC', 'is this ready for implementation', 'audit this spec'. Core question: could an implementer code against this without guessing?"
agent-team
by AidenXu-1
Use when the user wants multi-agent or multi-session collaboration, 多Agent协作, 多会话开发, 部门分工, 三层架构, 管理层/执行层/审核层, an "agent company", or needs to diagnose which departments a project should have.
streamlit-pivot
by streamlit
"Build Streamlit apps with st_pivot_table — a BI-focused pivot table component supporting multi-dimensional pivoting, subtotals, conditional formatting, Excel/CSV/TSV export, drill-down, drag-and-drop, date hierarchies with period-over-period comparisons, synthetic measures (including formula measures), Top N / Bottom N and value-predicate analytical filters (0.5.0+), show-values-as analytical display modes (running total, rank, % of parent, index), values axis placement (values_axis rows/columns, 0.5.0+), multi-field chained sorting (0.5.0+), custom member grouping — combine multiple dimension values into a named group for cleaner rollups (member_groups, 0.6.0+), server-side pre-aggregation for large datasets, and aggregation result memoization for significant latency reduction on display-only reruns (number_format, style, show_values_as — groupby is skipped on repeat renders in threshold_hybrid mode). Use when: user wants a pivot table in Streamlit, mentions streamlit_pivot / st_pivot_table, needs interactive data summarization, Top N filter, value filter, running total, rank, income statement layout, values on rows, financial report, wants to group dimension members (e.g. combine regions, bundle categories), or wants to deploy to Streamlit Community Cloud or Streamlit in Snowflake (SiS) on SPCS (installed from PyPI via PYPI_ACCESS_INTEGRATION). Triggers: pivot table, streamlit_pivot, st_pivot_table, pivot, crosstab, data summarization, top N, top n filter, value filter, running total, rank, values on rows, income statement, financial layout, member group, group members, combine regions, bundle categories, custom grouping, SiS, SiS on SPCS, Snowflake streamlit, PYPI_ACCESS_INTEGRATION, Streamlit Community Cloud, aggregation cache, memoization, display-only rerun, near-zero latency."
premium-frontend-design
by kv0906
Create award-winning, cinematic frontend interfaces that feel ALIVE. Combines 10+ years of creative frontend experience with technical excellence. Specializes in WebGL, custom shaders, premium animations, and distinctive aesthetics that would win on Awwwards. Use when building landing pages, dashboards, platforms, or any interface where "generic AI slop" is unacceptable.
brand-guidelines
by cosmonic-labs
Brand guidelines for Cosmonic and wasmCloud. Use this skill when creating visual content, presentations, websites, diagrams, or any materials that need to follow Cosmonic or wasmCloud brand standards. Includes an Excalidraw library for diagrams.
ui-ux-pro-max
by JochenYang
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
front-ui-skills
by ihlamury
Front's UI design system. Use when building interfaces inspired by Front's aesthetic - light mode, Inter font, 4px grid.
dribbble-ui-skills
by ihlamury
Dribbble's UI design system. Use when building interfaces inspired by Dribbble's aesthetic - light mode, Inter font, 4px grid.
mailchimp-ui-skills
by ihlamury
Mailchimp's UI design system. Use when building interfaces inspired by Mailchimp's aesthetic - light mode, Inter font, 4px grid.
lemonsqueezy-ui-skills
by ihlamury
Lemonsqueezy's UI design system. Use when building interfaces inspired by Lemonsqueezy's aesthetic - light mode, Inter font, 4px grid.
amplitude-ui-skills
by ihlamury
Amplitude's UI design system. Use when building interfaces inspired by Amplitude's aesthetic - light mode, Inter font, 4px grid.
awwwards-ui-skills
by ihlamury
Awwwards's UI design system. Use when building interfaces inspired by Awwwards's aesthetic - light mode, Inter font, 4px grid.
copy-ai-ui-skills
by ihlamury
Copy Ai's UI design system. Use when building interfaces inspired by Copy Ai's aesthetic - light mode, Inter font, 4px grid.
descript-ui-skills
by ihlamury
Descript's UI design system. Use when building interfaces inspired by Descript's aesthetic - dark mode, Inter font, 4px grid.
mixpanel-ui-skills
by ihlamury
Mixpanel's UI design system. Use when building interfaces inspired by Mixpanel's aesthetic - light mode, Inter font, 4px grid.