UI Components
Code-based UI component generation and styling
Figma Design Integration Expert
by anton-abyzov
Figma design-to-code expert. Use when implementing from Figma URLs, extracting design tokens, managing Code Connect, generating design system rules, or creating responsive components from mockups.
Architect
by anton-abyzov
System architect for scalable technical designs and ADRs. Use for system architecture, microservices, database design, trade-off analysis, component diagrams, tech selection.
Frontend Design Agent
by anton-abyzov
Frontend design expert for polished UIs with micro-interactions. Use for visual design, CSS animations, shadows, gradients, transitions. Bold, distinctive design choices.
Frontend Architect Skill
by anton-abyzov
Frontend architect for React, Next.js, Vue, Angular. Use for component architecture, dashboards, Atomic Design, TanStack Query, Zustand/Redux, routing, performance.
backend
by htlin222
Design APIs, microservices, and database schemas. Use for server-side development, API design, or system architecture.
architect
by htlin222
Design system architecture, APIs, and component interfaces. Use for architectural decisions and system design.
fantasy-world-building
by wordflowlab
"Use when user mentions fantasy, magic system, or world-building for fantastical settings - provides fantasy genre conventions, magic system design patterns, and world-building frameworks"
cloudbase-agent-ts
by TencentCloudBase
"Build and deploy AI agents with Cloudbase Agent (TypeScript), a TypeScript SDK implementing the AG-UI protocol. Use when: (1) deploying agent servers with @cloudbase/agent-server, (2) using LangGraph adapter with ClientStateAnnotation, (3) using LangChain adapter with clientTools(), (4) building custom adapters that implement AbstractAgent, (5) understanding AG-UI protocol events, (6) building web UI clients with @ag-ui/client, (7) building WeChat Mini Program UIs with @cloudbase/agent-ui-miniprogram."
developing-preact
by oaustegard
Specialized Preact development skill for standards-based web applications with native-first architecture and minimal dependency footprint. Use when building Preact projects, particularly those involving data visualization, interactive applications, single-page apps with HTM syntax, Web Components integration, CSV/JSON data parsing, WebGL shader visualizations, or zero-build solutions with CDN imports.
json-render-ui
by oaustegard
Generate guardrailed UI from natural language. Claude emits constrained JSON, skill runtime renders via Preact. Use when user provides json and requests: Dashboards with metrics, charts, tables; Admin panels; Data visualization interfaces; Form-based applications
hello-demo
by oaustegard
Delivers a static Hello World HTML demo page with bookmarklet. Use when user requests the hello demo, hello world demo, or demo page.
front-end-checklist
by fabricioctelles
This skill should be used when a developer or team needs to review, validate, or audit front-end code before launching a website or HTML page to production. Triggers on requests such as "run the front-end checklist", "validate my front-end", "check my site before launch", or when the user asks for a structured review of HTML, CSS, JavaScript, accessibility, performance, security, or design quality.
Ultimate Design System Master
by fabricioctelles
A collection of skills for AI agents (Kiro, Cursor, Windsurf, Claude Code, and others). Each skill is a reusable module that teaches the agent to perform complex tasks with context, structure, and best practices.
accord
by simota
ビジネス・開発・デザイン3チーム横断の統合仕様パッケージを作成。段階的詳細化テンプレート（L0ビジョン→L1要件→L2チーム別詳細→L3受入基準）で共通認識を形成。コードは書かない。
accessibility-implementation
by laurigates
WCAG 2.1/2.2 compliance implementation, ARIA patterns, keyboard navigation, focus management, and accessibility testing. Use when implementing accessible components, fixing accessibility issues, or when the user mentions WCAG, ARIA, screen readers, or keyboard navigation.
design-tokens
by laurigates
CSS custom property architecture, theme systems, design token organization, and component library integration. Use when implementing design systems, theme switching, dark mode, or when the user mentions tokens, CSS variables, theming, or design system setup.
mapbox-ios-patterns
by mapbox
Official integration patterns for Mapbox Maps SDK on iOS. Covers installation, adding markers, user location, custom data, styles, camera control, and featureset interactions. Based on official Mapbox documentation.
mapbox-web-integration-patterns
by mapbox
Official integration patterns for Mapbox GL JS across popular web frameworks (React, Vue, Svelte, Angular). Covers setup, lifecycle management, token handling, search integration, and common pitfalls. Based on Mapbox's create-web-app scaffolding tool.
mapbox-maplibre-migration
by mapbox
Guide for migrating from MapLibre GL JS to Mapbox GL JS, covering API compatibility, token setup, style configuration, and the benefits of Mapbox's official support and ecosystem
olore-xstate-latest
by olorehq
Local XState documentation reference (latest). XState state machine documentation. Use for state machines, statecharts, actors, transitions, guards, context, React/Vue/Svelte integrations, and Stately Studio.
mapbox-data-visualization-patterns
by mapbox
Patterns for visualizing data on maps including choropleth maps, heat maps, 3D visualizations, data-driven styling, and animated data. Covers layer types, color scales, and performance optimization.
mapbox-style-quality
by mapbox
Expert guidance on validating, optimizing, and ensuring quality of Mapbox styles through validation, accessibility checks, and optimization. Use when preparing styles for production, debugging issues, or ensuring map quality standards.
mapbox-cartography
by mapbox
Expert guidance on map design principles, color theory, visual hierarchy, typography, and cartographic best practices for creating effective and beautiful maps with Mapbox. Use when designing map styles, choosing colors, or making cartographic decisions.
mapbox-style-patterns
by mapbox
Common style patterns, layer configurations, and recipes for typical mapping scenarios including restaurant finders, real estate, data visualization, navigation, delivery/logistics, and more. Use when implementing specific map use cases or looking for proven style patterns.