UI Components
Code-based UI component generation and styling
brainstorming
by FradSer
This skill should be used when the user has a new idea, feature request, or ambiguous requirement. It clarifies needs, explores options, and produces a solid design document and BDD specs before implementation starts.
build-like-iphone-team
by FradSer
This skill provides knowledge about Apple's Project Purple (2004-2007) and the five iPhone design principles, first-principles thinking, breakthrough technology, experience-driven specs, internal competition, and Purple Dorm isolation. Use when challenging industry conventions, approaching radical innovation, or when brainstorming skills encounter open-ended problems requiring disruptive thinking.
monorepo-management
by HermeticOrmus
Master monorepo management with Turborepo, Nx, and pnpm workspaces to build efficient, scalable multi-package repositories with optimized builds and dependency management. Use when setting up monorepos, optimizing builds, or managing shared dependencies.
premium-saas-design
by HermeticOrmus
Professional framework for building premium $5k+ SaaS websites with AI - the Define, Build, Review, Refine loop used by real product teams
publish-substack-article
by sugarforever
Publish Markdown articles to Substack as drafts. Use when user wants to publish a Markdown file to Substack, or mentions "发布到 Substack", "Substack article", "publish to Substack". Handles Markdown-to-HTML conversion and saves as draft (never auto-publish).
sap-abap-cds
by secondsky
Comprehensive SAP ABAP CDS (Core Data Services) reference for data modeling, view development, and semantic enrichment. Use when creating CDS views or view entities in ABAP, defining data models with annotations (@AbapCatalog, @AccessControl, @EndUserText, @Semantics, @UI, @Consumption, @ObjectModel), working with associations and cardinality, implementing input parameters, using built-in functions (string, numeric, date/time), writing CASE expressions and conditional logic, implementing access control with DCL (Data Control Language), handling CURR/QUAN data types with reference fields, troubleshooting CDS errors (SD_CDS_ENTITY105), querying CDS views from ABAP, or displaying data with SALV IDA. Covers ABAP 7.4+ through ABAP Cloud with production-tested patterns. Keywords: ABAP CDS, Core Data Services, CDS view, CDS view entity, define view, define view entity, DDL, Data Definition Language, DCL, Data Control Language, annotations, @AbapCatalog, @AccessControl, @EndUserText, @Semantics, @UI, @Consumption, @ObjectModel, @Metadata, associations, cardinality, TO ONE, TO MANY, path expressions, input parameters, WITH PARAMETERS, built-in functions, CASE expression, CAST, session variables, $session, aggregate functions, GROUP BY, HAVING, joins, INNER JOIN, LEFT OUTER JOIN, access control, DEFINE ROLE, pfcg_auth, authorization, SALV IDA, cl_salv_gui_table_ida, Eclipse ADT, ABAP Development Tools, CDS annotations, Fiori Elements, OData, RAP, ABAP RESTful Application Programming Model, currencyCode, unitOfMeasure, SD_CDS_ENTITY105
artifacts-builder
by ComposioHQ
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
i18n Expert
by anton-abyzov
Frontend i18n and l10n expert. Use for multilingual apps, i18next/react-i18next, Next.js i18n routing, RTL layouts, Intl APIs, date/number/currency formatting, translation pipelines.
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.
native-to-weapp-vite-wevu-migration
by weapp-vite
Apply a structured migration workflow from native mini-program projects to weapp-vite and wevu. Use when converting Page/Component code to Vue SFC, replacing setData-heavy state updates with ref/reactive, migrating properties/observers/triggerEvent contracts, introducing platform guards, and building migration-focused e2e validation and rollback checkpoints.
weapp-vite-best-practices
by weapp-vite
Apply production-ready best practices for weapp-vite projects. Use when creating or refactoring mini-program projects with weapp-vite, designing directory/config conventions, choosing subpackage and chunk strategy, enabling auto routes/components, setting CI/devtool workflows, or debugging build/output issues in vite.config.ts and app.json.
writing-server-code
by bitwarden
Bitwarden server code conventions for C# and .NET. Use when working in the server repo, creating commands, queries, services, or API endpoints.
modern-csharp-coding-standards
by Aaronontheweb
Write modern, high-performance C# code using records, pattern matching, value objects, async/await, Span<T>/Memory<T>, and best-practice API design patterns. Emphasizes functional-style programming with C# 12+ features.
find-skills
by sanity-io
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
shadcn-management
by julianromli
Manage shadcn/ui components using MCP tools. Use when user needs to: (1) Add new shadcn components to a project (2) Build complex UI features requiring multiple components (3) Research component implementations and examples (4) Get component installation commands Triggers: "add shadcn", "shadcn component", "build UI with shadcn", "install component", "create form", "create dialog"
rsc-data-optimizer
by julianromli
Optimize Next.js App Router data fetching by converting slow client-side fetching to fast server-side fetching using React Server Components (RSC). Use when: - User reports slow initial page load with loading spinners - Page uses useEffect + useState for data fetching - StoreContext/useStore pattern causes waterfall fetching - Need to improve SEO (content not in initial HTML) - Converting "use client" pages to Server Components Triggers: "slow loading", "optimize fetching", "SSR data", "RSC optimization", "remove loading spinner", "server-side fetch", "convert to server component", "data fetch lambat", "loading lama"
snapshot-testing
by Aaronontheweb
Use Verify for snapshot testing in .NET. Approve API surfaces, HTTP responses, rendered emails, and serialized outputs. Detect unintended changes through human-reviewed baseline files.
crap-analysis
by Aaronontheweb
Analyze code coverage and CRAP (Change Risk Anti-Patterns) scores to identify high-risk code. Use OpenCover format with ReportGenerator for Risk Hotspots showing cyclomatic complexity and untested code paths.
verify-email-snapshots
by Aaronontheweb
Snapshot test email templates using Verify to catch regressions. Validates rendered HTML output matches approved baseline. Works with MJML templates and any email renderer.
design-masters
by HermeticOrmus
Deep knowledge of legendary designers and their enduring contributions. Learn from Saul Bass, Massimo Vignelli, Dieter Rams, Paula Scher, and others whose work defines excellence. Use when seeking inspiration, understanding design history, or applying proven approaches.
Jungian Archetypes → UI/UX Aesthetics
by HermeticOrmus
"The archetype is not a metaphorâit is the pattern itself, manifesting through pixels and interactions."
accessibility-a11y
by Mindrally
Implement web accessibility (a11y) best practices following WCAG guidelines to create inclusive, accessible user interfaces.
preline-theme-generator
by htmlstreamofficial
Generates beautiful, consistent Preline Theme CSS files. Agent interprets user request, runs build script, delivers complete CSS.