UI Components
Code-based UI component generation and styling
ascii-cli-logo-banner-figletjs
by partme-ai
Generate TAAG/FIGlet-style ASCII art banners using figlet.js (FIGfont spec), with layout controls (horizontal/vertical layout, width, whitespaceBreak) and optional ANSI 256 coloring.
ant-design-mini
by partme-ai
Provides comprehensive guidance for Ant Design Mini component library for mini-programs including components, themes, and platform support. Use when the user asks about Ant Design Mini, needs to build mini-program applications, or use mini-program components.
ascii-cli-logo-banner
by partme-ai
Entry point for ASCII CLI banners. Choose the Python built-in font skill or the figlet.js/FIGfont skill depending on needs.
vercel-react-best-practices
by inkeep
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.
draft-recon
by jeremylongshore
UI and UX reconnaissance — scan existing frontend routes, components, navigation, and flows to understand the current UX state before designing. Use when asked to "understand the current UI", "what UX patterns exist", "map the navigation", "what screens exist", or before starting any flow or wireframe work.
atlas-present
by jeremylongshore
Generate a polished HTML presentation page and Obsidian Canvas for big releases — new products, takeovers, major migrations. Non-technical audience. Use when asked to "present this", "release announcement", "show what we built", or "stakeholder update".
learnship
by FavioVazquez
@./references/planning-config.md — Config.json schema and options
next-upgrade
by inkeep
Upgrade Next.js to the latest version following official migration guides and codemods
frontend-design
by Project-N-E-K-O
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.
Vanilla JS UI Race Conditions (VRM vs Live2D)
by Project-N-E-K-O
Dealing with delayed DOM generation, lazy loading, and optimistic state synchronization in vanilla JavaScript without a reactive framework.
🎨 UI 设计规范
by Project-N-E-K-O
Project N.E.K.O. 胶囊化 UI、品牌蓝视觉系统规范
jazz-testing
by garden-co
Use this skill when you need to write, review, or debug automated tests for applications built on the Jazz framework. This skill provides the correct architectural patterns for simulating local-first synchronization and multi-user environments without resorting to invalid mocking strategies.
ant-design-mobile
by partme-ai
Provides comprehensive guidance for Ant Design Mobile component library including mobile components, themes, and platform adaptations. Use when the user asks about Ant Design Mobile, needs to build mobile applications, or implement mobile UI components.
adobe-xd
by partme-ai
Provides comprehensive guidance for Adobe XD including design creation, prototyping, components, and collaboration. Use when the user asks about Adobe XD, needs to create UI/UX designs, build prototypes, or work with Adobe XD components.
canvas-design
by partme-ai
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
visual-explainer
by jamditis
Generate self-contained HTML pages that visually explain systems, data stories, investigations, editorial workflows, and code changes. Use when the user asks for diagrams, architecture views, visual diffs, data tables, timelines, source maps, or any structured visualization that would be painful to read as terminal output. Also activates for tables with 4+ rows or 3+ columns. Adapted from nicobailon/visual-explainer with journalism, newsroom, and academic design sensibilities.
newsroom-style
by jamditis
Enforce AP Style and newsroom conventions for journalism writing. Use when writing news articles, editing drafts, creating headlines, or converting notes into publishable copy. Ensures professional standards for attribution, numbers, dates, and formatting.
ascii-progress-and-spinner
by partme-ai
Design ASCII progress bars and spinners for CLI UX (determinate/indeterminate, TTY single-line refresh, non-interactive log fallback) with copy-pastable style specs.
axure
by partme-ai
Provides comprehensive guidance for Axure prototyping tool including wireframing, interactions, dynamic panels, and prototyping. Use when the user asks about Axure, needs to create interactive prototypes, design wireframes, or build complex interactions.
mantine-custom-components
by mantinedev
Build custom components that integrate with Mantine's theming, Styles API, and core features. Use this skill when: (1) creating a new component using factory(), polymorphicFactory(), or genericFactory(), (2) adding Styles API support (classNames, styles, vars, unstyled), (3) implementing CSS variables via createVarsResolver, (4) building compound components with sub-components and shared context, (5) registering a component with MantineProvider via Component.extend(), or (6) any task involving Factory, useProps, useStyles, BoxProps, StylesApiProps, or ElementProps in @mantine/core.
frontend-ui-ux
by Yeachan-Heo
Designer-developer for UI/UX work
ccg
by Yeachan-Heo
Claude-Codex-Gemini tri-model orchestration - fans out backend tasks to Codex and frontend/UI tasks to Gemini in parallel, then Claude synthesizes results
deepinit
by Yeachan-Heo
Deep codebase initialization with hierarchical AGENTS.md documentation
frontend-design
by Ilm-Alan
Bespoke frontend engineering focused purely on aesthetic excellence. Invoke for web components, pages, dashboards, applications, or any UI requiring distinctive visual execution. Outputs functional code with intentional aesthetic direction and creative craft.