UI Components
Code-based UI component generation and styling
present
by expremiental
Create stunning, interactive HTML presentations that feel like next-generation experiences. Use when a user asks for a presentation, slide deck, pitch deck, slides, or anything presentation-related. Produces a single self-contained HTML file with animations, interactive elements, and cinematic transitions — no PowerPoint, no dependencies, just open in a browser.
htmx-universal-patterns
by ecelayes
The definitive guide for building Hypermedia-Driven Applications (HDA) using HTMX, prioritizing security and UX patterns.
skill-finder
by dangogit
Find and install the best skill for your current task. Use when the user wants to discover skills, asks "is there a skill for...", "find a skill for...", or "/skill-finder". Searches skills.sh in real-time and uses LLM reasoning to match skills to the user's context.
mermaid-github-safe-area
by alessandrobologna
Ensure Mermaid diagrams in GitHub READMEs reserve bottom-right safe area using init-only config (no CSS, no spacer nodes) and optionally apply handrawn style on request.
strategy-pattern-react
by progmichaelkibenko
Implements the Strategy pattern in React apps. Run when the user mentions strategy pattern, or when you see or need a switch on type/view/method, multiple behaviors under the same contract, or interchangeable algorithms—apply this skill proactively without the user naming it.
tonejs
by HongmingWang-Rabbit
Best practices for Tone.js - programmatic music and audio synthesis in the browser using the Web Audio API. Covers synths, effects, sequencing, timing, samples, signals, patterns, MIDI, visualization, browser audio, music emotion mapping, rhythm/beat construction, music theory utilities, generative/algorithmic composition, performance optimization, offline rendering/recording, and React/Next.js integration.
session-advisor
by pure-maple
多模型协作的SESSION管理顾问。当调用Codex或Gemini前，自动提供SESSION复用/新开建议。当用户讨论多模型协作、SESSION管理、上下文隔离时使用。
eve-agent-native-design
by Incept5
Design agent-native applications on Eve Horizon. Apply parity, granularity, composability, and emergent capability principles to make apps that agents can build, operate, and extend naturally.
guidelines
by paucasanellas
Programming best practices and architectural concepts including SOLID principles, DDD, clean code, and software design patterns. Use when designing software architecture, improving code quality, or making architectural decisions.
scientific-slides
by Victory-Hugo
"使用 Nano Banana Pro AI 构建科研报告和演示幻灯片。可生成高质量、视觉效果出色的 PDF 演示文稿，包含 AI 生成的幻灯片内容。适用于会议报告、学术研讨会报告、论文答辩幻灯片或各类科学演讲。提供幻灯片结构设计、版式与设计指导、时间安排建议以及视觉效果校验。"
ux-designer-assistant
by MIIXV
一个专注于用户体验(UX)和用户界面(UI)设计的专家级AI助手。当需要进行产品设计、交互设计、用户研究、可用性分析、竞品分析、或评估设计方案时，应使用此技能。适用于分析、评审、创建、比较或优化线框图、原型、用户流程、信息架构和设计系统等任务。扮演产品设计师、UX研究员或设计策略顾问的角色，提供深刻、系统性的设计思考和建议。
ui-design-core
by Protagonistss
核心设计能力，提供配色、布局、组件样式生成及反模式检查。
desktop-app-dev
by YPYT1
Desktop App Dev subagent
vercel-react-best-practices
by yldgio
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
moodle-plugin-development-rules
by jrevillaa
Moodle plugin development standards and review rules for implementing or refactoring Moodle plugins using Moodle-native patterns. Use when Codex works on Moodle plugin code such as local, mod, block, report, admin tool, enrol, auth, question, theme, availability, repository, or similar plugin types; when editing PHP, Mustache, JS, renderer, or form code in a Moodle codebase; or when reviewing code for Moodle-specific anti-patterns such as direct JavaScript requires instead of AMD modules, hand-built HTML forms instead of Form API, and view markup echoed from PHP instead of Mustache templates and renderers.
react-rerender-auditor
by handxr
Audit React components for unnecessary re-renders, inline object/array/function creation in JSX props, Context.Provider with unstable values, useEffect anti-patterns (async callbacks, setState loops, missing deps), expensive unmemoized render operations, and component complexity issues. Use when reviewing React performance, debugging slow components, auditing a codebase for re-render issues, or when a user asks to check their React code for performance problems, find unnecessary re-renders, optimize components, or audit hook usage. Triggers on tasks involving .jsx/.tsx/.js/.ts files with React components.
frontend-studio
by potatoman03
Build tasteful, modern, production-grade frontends with distinctive design. Use when building websites, landing pages, dashboards, SaaS UIs, e-commerce pages, portfolios, or any web interface. Extends Anthropic's frontend-design skill with a design decision framework, shadcn/ui defaults, rams.ai accessibility enforcement, and a technique library that produces clean, unique output — never AI slop. Activate for: "build me a website", "create a landing page", "design a dashboard", "make a UI for...", or any frontend request.
generative-thinker
by ab22593k
Guides the agent to apply Generativity Theory to solve problems by building high-leverage, open-ended systems. Use this skill when the user asks for "out of the box" ideas, platform strategies, or when a task benefits from enabling others to innovate rather than providing a narrow, single-purpose fix.
visual-tx
by matrooslabs
Analyze Ethereum transactions by fetching semantic trace data and generating a visual HTML explanation. Use this skill whenever the user provides a transaction hash, asks to analyze a transaction, wants to understand what happened in a tx, or asks about internal calls, token transfers, swaps, or any on-chain activity within a transaction. Trigger on phrases like "scan this tx", "what happened in this transaction", "trace this tx", "explain this transaction", or any 0x-prefixed 66-character hash.
figma-d3-react-ts
by CoRLab-Tech
D3.js data visualization in React/Next.js components with PIXEL-PERFECT Figma matching. Use when building interactive charts, graphs, network diagrams, geographic maps, or any custom data visualization with D3.js inside React components. Covers pixel-perfect Figma extraction workflow, iterative visual validation via Playwright, two integration approaches (useRef+useEffect imperative vs declarative React rendering), responsive sizing, TypeScript typing, SSR/Next.js compatibility, accessibility, and performance. Triggers on: 'create a chart', 'add a D3 visualization', 'build a graph component', 'data visualization', 'interactive chart', 'force-directed graph', 'bar chart', 'line chart', 'heatmap', 'scatter plot', 'pie chart', 'chord diagram'.
frontend-design
by enoch-robinson
前端界面设计技能。创建独特、高质量的前端界面，避免通用 AI 风格。当用户需要构建网站、落地页、仪表盘、React 组件、HTML/CSS 布局或美化任何 Web UI 时使用此技能。
design-system-guardian
by agebold
Strictly enforces the local design system, accessibility (WCAG 2.2 AA), and world-class design craft for any web or responsive UI work. Use this skill whenever the user asks to build, edit, style, refactor, or review ANY frontend component, page, layout, form, or markup — even casual requests like "make this look nicer", "add a button", "build a card", "fix this CSS", or "create a settings page". Trigger on any mention of HTML, CSS, JSX/TSX, Tailwind, components, styling, layouts, responsive design, accessibility, or visual polish. Do NOT skip this skill just because the request seems small — every UI change must pass through the design system rules.
building-components
by Ilya-Valasiuk
Builds, restructures, and standardizes React components according to project conventions (placement, folder/file naming, exports, props patterns). Use when adding components or when reorganizing existing components during refactors, migrations, or component moves.
maintainable-css
by charlesroper
Apply the MaintainableCSS methodology to plan, refactor, and review CSS and markup. Use when a user asks for scalable CSS architecture, semantic class naming, module/component/state/modifier conventions, lower-regression refactors, or migration away from utility/visual class patterns.