UI Components
Code-based UI component generation and styling
programming-in-react
by ed3dai
Use when writing or modifying React components, planning React features, or working with .jsx/.tsx files - provides modern React patterns with TypeScript, hooks usage, component composition, and common pitfalls to avoid
define-design-guidelines
by doodledood
'Create a DESIGN_GUIDELINES.md that defines how to design UI/UX for your customer. Requires CUSTOMER.md to exist first. Covers aesthetic direction, design tokens, typography, color, motion, components, and layout patterns. Bakes in frontend-design skill principles to avoid generic AI aesthetics.'
nextjs-shadcn
by fusengine
shadcn/ui for Next.js App Router with TanStack Form. Use when building UI components, forms, dialogs, tables, toasts, or accessible components.
frontend-design
by mfts
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.
architecture-diagrams
by aj-geddes
Create system architecture diagrams using Mermaid, PlantUML, C4 model, flowcharts, and sequence diagrams. Use when documenting architecture, system design, data flows, or technical workflows.
near-dapp
by near
Build NEAR Protocol dApps. Use for: (1) creating new NEAR dApps with create-near-app (Vite+React, Next.js), (2) adding NEAR wallet connection to existing apps with @hot-labs/near-connect and near-connect-hooks, (3) building frontend UI for NEAR smart contracts, (4) integrating wallet sign-in/sign-out, contract calls, and transaction signing into web applications.
unicon
by webrenew
Help users add icons to their projects using the Unicon icon library. Unicon provides 19,000+ icons from Lucide, Phosphor, Hugeicons, Heroicons, Tabler, Feather, Remix, Simple Icons (brand logos), and Iconoir. Use when adding icons to React, Vue, Svelte, or web projects; using the unicon CLI to search, get, or bundle icons; setting up .uniconrc.json config; generating tree-shakeable icon components; using the Unicon API; or converting between icon formats.
vibe-coding
by shareAI-lab
Transform an AI agent into a tasteful, disciplined development partner. Not just a code generator, but a collaborator with professional standards, transparent decision-making, and craftsmanship. Use for any development task: building features, fixing bugs, designing systems, refactoring. The human provides vision and decisions. The agent provides execution with taste and discipline.
ui-design-brain
by carmahhawwari
Generate production-grade UI using real component patterns and best practices from 60+ documented interface components. Use when the user asks to build web interfaces, pages, dashboards, forms, navigation, or any UI — ensures modern, minimal, SaaS-quality output grounded in design system conventions rather than generic AI patterns.
development-pipeline
by popup-studio-ai
9-phase Development Pipeline complete knowledge. Use when user doesn't know development order or starts a new project from scratch. Use proactively when user asks about development order, phases, what to do first, or starts a new project without clear direction. Triggers: development pipeline, phase, development order, where to start, what to do first, how to begin, new project, 개발 파이프라인, 뭐부터, 어디서부터, 순서, 시작, 開発パイプライン, 何から, どこから, 开发流程, 从哪里开始, pipeline de desarrollo, fase, orden de desarrollo, por dónde empezar, qué hacer primero, pipeline de développement, phase, ordre de développement, par où commencer, que faire d'abord, Entwicklungspipeline, Phase, Entwicklungsreihenfolge, wo anfangen, was zuerst tun, pipeline di sviluppo, fase, ordine di sviluppo, da dove iniziare, cosa fare prima Do NOT use for: ongoing implementation, existing feature work, or bug fixes.
crank-component-authoring
by bikeshaving
Build web apps, dashboards, landing pages, widgets, calculators, forms, quizzes, charts, visualizations, animations, dynamic SVGs, MathML equations, blogs, or games as single-file HTML with no build step, using Crank.js, an elegant UI framework which allows you to write components with plain JavaScript functions, generators, and promises. Use when user asks to create something interactive, build a single-file HTML app, or start a greenfield frontend project. Always trigger when converting code from React, Vue, Svelte, Solid, or any other web framework to Crank.js, when the user mentions Crank by name, or when comparing different web/UI frameworks. Not for projects already using other frameworks.
web-dev
by xpnobug
Web 开发最佳实践和现代前端技术栈指导
charted-red
by marmicode
Writes the next failing test based on provided design doc and existing todo tests
shadcn-vue
by noartem
shadcn-vue for Vue/Nuxt with Reka UI components and Tailwind. Use for accessible UI, Auto Form, data tables, charts, dark mode, MCP server setup, or encountering component imports, Reka UI errors.
enterprise
by popup-studio-ai
Enterprise-grade system development with microservices, Kubernetes, and Terraform. Includes AI Native methodology and Monorepo architecture patterns. Handles high traffic, high availability, and complex architecture requirements. Project initialization with "init enterprise" or "enterprise init". Use proactively when user needs high traffic, microservices, custom infrastructure, or AI-native development patterns. Triggers: microservices, kubernetes, terraform, k8s, AWS, monorepo, AI native, 10-day, init enterprise, enterprise init, 마이크로서비스, 모노레포, マイクロサービス, モノレポ, 微服务, 单仓库, microservicios, estrategia empresarial, arquitectura, CTO, nativo de IA, microservices, stratégie d'entreprise, architecture, CTO, natif IA, Microservices, Unternehmensstrategie, Architektur, CTO, KI-nativ, microservizi, strategia aziendale, architettura, CTO, AI nativo Do NOT use for: simple websites, MVPs, or projects without infrastructure requirements.
Frontend Testing
by exceptionless
Unit and component testing for the frontend with Vitest and Testing Library. Keywords: Vitest, @testing-library/svelte, component tests, vi.mock, render, screen, fireEvent, userEvent, test.ts, spec.ts, describe, it, AAA pattern
ralph-tui-create-beads
by subsy
"Convert PRDs to beads for ralph-tui execution. Creates an epic with child beads for each user story. Use when you have a PRD and want to use ralph-tui with beads as the task source. Triggers on: create beads, convert prd to beads, beads for ralph, ralph beads."
.NET Conventions
by exceptionless
C# coding standards for the Exceptionless codebase. Naming conventions, async patterns, structured logging, nullable reference types, and formatting rules. Keywords: C# style, naming conventions, _camelCase, PascalCase, async suffix, CancellationToken, nullable annotations, structured logging, ExceptionlessState
Accessibility
by exceptionless
WCAG 2.2 AA accessibility standards for the Exceptionless frontend. Semantic HTML, keyboard navigation, ARIA patterns, focus management, and form accessibility. Keywords: WCAG, accessibility, a11y, ARIA, semantic HTML, keyboard navigation, focus management, screen reader, alt text, aria-label, aria-describedby, skip links, focus trap
Storybook
by exceptionless
Component stories using Storybook with Svelte CSF. Story patterns, defineMeta, argTypes, snippet-based customization, and visual testing. Keywords: storybook, stories.svelte, defineMeta, Story, args, argTypes, autodocs
Svelte Components
by exceptionless
Svelte 5 component patterns for the Exceptionless SPA. Runes, reactivity, props, events, snippets, component organization, and shadcn-svelte integration. Keywords: Svelte 5, $state, $derived, $effect, $props, runes, onclick, snippets, {@render}, reactive, component composition, shadcn-svelte
frontend-design
by exceptionless
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.
Frontend Architecture
by exceptionless
Svelte SPA architecture for Exceptionless. Route groups, lib structure, API client, feature slices, and barrel exports. Keywords: route groups, $lib, feature slices, api-client, barrel exports, index.ts, vertical slices, shared components, generated models, ClientApp structure
using-base-ui-with-material-ui
by siriwatknp
Always use this skill when integrating Base UI components @base-ui-components/react with Material UI @mui/material.