Design

UI/UX direction, visual design, and design systems

Showing 145-168 of 3105 skills
lobehub

typescript

by lobehub

'LobeHub TypeScript style and type-safety guide. Use when editing TS/TSX/MTS, fixing types, choosing interface vs type, avoiding any/object, import type, async flow, or ts-expect-error.'

Design 82.3K 1mo ago
lobehub

drizzle

by lobehub

'LobeHub Drizzle ORM schema and query style. Use for pgTable schemas, indexes, joins, inferred types, db.select/db.query, schema fields, foreign keys, junction tables, or postgres query patterns.'

Database 82.3K 1mo ago
lobehub

react

by lobehub

'LobeHub React component conventions. Use when editing TSX UI, choosing base-ui vs @lobehub/ui vs antd, styling with antd-style, component boundaries, local state, layouts, render performance, or memoization.'

Design 82.3K 18d ago
lightdash

frontend-style-guide

by lightdash

Apply the Lightdash frontend style guide and design principles when working on React components or styling frontend code. Use when editing TSX files, building or reviewing UI, fixing styling issues, or when the user mentions Mantine, design, styling, or CSS modules.

Design 6.1K 6d ago
openclaw

openhue

by openclaw

"Control Philips Hue lights and scenes via the OpenHue CLI."

CLI Tools 389.1K 3mo ago
anthropics

applying-brand-guidelines

by anthropics

This skill applies consistent corporate branding and styling to all generated documents including colors, fonts, layouts, and messaging

Design 52.2K 10mo ago
elizaOS

skill-creator

by elizaOS

Creates, updates, and packages AgentSkills with proper SKILL.md frontmatter, bundled scripts, references, and assets. Provides guidance on skill naming, progressive disclosure, and context-efficient design. Use when building a new skill from scratch, restructuring an existing skill, writing or improving SKILL.md files, organizing skill resources into scripts/references/assets folders, packaging skills for distribution, or iterating on skill quality after testing.

Design 19.2K 2mo ago
microsoft

video-to-gif

by microsoft

'Video-to-GIF conversion with FFmpeg two-pass optimization'

Design 1.4K 2mo ago
onyx-dot-app

playwright-e2e-tests

by onyx-dot-app

Write and maintain Playwright end-to-end tests for the Onyx application. Use when creating new E2E tests, debugging test failures, adding test coverage, or when the user mentions Playwright, E2E tests, or browser testing.

Auth 31.8K 3mo ago
mastra-ai

docs-diagrams

by mastra-ai

Convert existing docs diagram images to Mermaid, and author new Mermaid diagrams for Mastra docs. Use when replacing an Excalidraw or PNG/JPG/SVG diagram with Mermaid, when a docs page needs a new diagram, when a diagram renders wrong in light or dark mode, or when auditing which docs images should become Mermaid. Triggers on: convert diagram, Excalidraw, mermaid, flowchart, diagram image, diagram styling, diagram looks wrong.

Design 27.7K 14d ago
nrwl

check-docs-style

by nrwl

Check modified Nx documentation pages against the astro-docs style guide. Auto-trigger after writing or editing docs content in the nx repo. Also trigger on "check style", "style guide", "docs review", "validate docs". Should run as a final step whenever docs files are modified. IMPORTANT: anytime astro-docs/*/.mdoc files are modified, this should always run automatically without being asked.

Design 29.3K 12d ago
getsentry

cmdk-actions

by getsentry

Guide for adding new actions to Sentry's Command+K palette. Use when implementing new cmdk actions, registering page-level or global actions, building async resource pickers, or adding contextual actions to a view.

Code Gen 44.7K 4mo ago
getsentry

generate-snapshot-tests

by getsentry

Generate snapshot test files for Sentry frontend React components. Use when asked to "generate snapshot tests", "add snapshot tests", "create visual snapshots", "write snapshot tests", "add visual regression tests", or "snapshot this component". Accepts an optional component path or name via $ARGUMENTS.

Design 44.7K 5mo ago
getsentry

react-component-documentation

by getsentry

Create or update component documentation in Sentry's MDX stories format. Use when asked to "document a component", "add stories", "write component docs", "create an mdx file", "add a stories.mdx", or document a design system component. Generates structured MDX with live demos, accessibility guidance, and auto-generated API docs from TypeScript types.

Accessibility 44.7K 6mo ago
supabase

safe-sql-execution

by supabase

Use whenever code will build, return, fetch, or execute SQL that runs against a user's real Postgres database — even when the request reads like an ordinary feature or bug fix and never says "security," "injection," or "SafeSqlFragment." This covers: writing or editing any pg-meta function, query builder, or endpoint that builds/returns SQL for database objects (tables, views, functions, DB triggers, indexes, RLS policies); interpolating a schema/table/column/search/route-param value into SQL text; storing, fetching, or re-running SQL that round-trips from the database (a policy's definition, a function/view definition, a snippet's saved content); and any "Run"/"Apply"/"Execute" action that sends SQL to a project's database (SQL editor run-selection, policy editor apply, snippet runner). Load this BEFORE writing such code, not only when reviewing a finished diff. Skip only for changes that never touch SQL text or execution — styling, unrelated data hooks, non-SQL form validation, or UI layout work.

Database 108.5K 1mo ago
supabase

write-the-docs

by supabase

Draft new or updated Supabase docs content for a feature or launch, grounded in Linear (the ticket plus its product/PM context), a read of the actual code, and the docs style guide once one exists. Use when asked to write docs for a new feature, a launch (e.g. Select 2026), or a Linear ticket that needs net-new content rather than a bug fix. Not for implementing existing docs bug reports — use work-linear-issue for that.

Comments 108.5K 26d ago
supabase

dev-toolbar-review

by supabase

Safety rules for the dev toolbar, PostHog client, and feature flags. Use

Code Review 108.5K 1mo ago
supabase

studio-ui-patterns

by supabase

Design system UI patterns for Supabase Studio. Use when building or updating

Design 108.5K 1mo ago
luongnv89

brand-voice

by luongnv89

Ensure all communication matches brand voice and tone guidelines. Use when creating marketing copy, customer communications, public-facing content, or when users mention brand voice, tone, or writing style.

Design 41.4K 1mo ago
remix-run

make-demo

by remix-run

Create or revise demos in the Remix repository. Use when adding a new demo under demos/, updating an existing demo, or reviewing demo code to ensure it showcases Remix packages, strong code hygiene, and production-quality patterns.

Code Gen 33.3K 28d ago
remix-run

write-readme

by remix-run

Write or rewrite package README files in the style used by the Remix repository. Use when drafting a new package README, revising an existing README, or reviewing README structure, examples, installation instructions, and section ordering for Remix packages.

Design 33.3K 3mo ago
elastic

review-connector

by elastic

Review connector spec changes (spec, docs). Use when reviewing a PR involving connector specs, doing post-creation review after create-connector or build-connector, or preparing a connector PR checklist.

Design 21.3K 1mo ago
elastic

catalog-ecommerce

by elastic

Guide for building catalog and e-commerce search with Elasticsearch. Use when a developer wants product search, faceted navigation, autocomplete, "did you mean" suggestions, or shopping-oriented search experiences.

Design 21.3K 5mo ago
elastic

create-connector

by elastic

Creates a new connector spec for Kibana. Use when asked to create (or add) a new connector, integration, or data source.

Design 21.3K 27d ago