Design

designing-systems

by fusengine

Use when creating design systems, tokens, color palettes, typography scales, or theming. Covers OKLCH colors, CSS variables, Tailwind v4 @theme.

theming-tokens

by fusengine

Use when creating theme systems, color variables, or design system tokens. Covers primitives, semantic, and component tokens.

claude-design-pack

by Peiiii

"Design toolkit: UI/UX, themes, brand guidelines, and generative art."

Taking an idea to implementable prototype

by bfollington

frontend-designer

by jamesrochabrun

Build accessible, responsive, and performant frontend components with design system best practices, modern CSS, and framework-agnostic patterns.

every-style-editor-2

by ratacat

Use this agent when you need to review and edit text content to conform to Every's specific style guide. This includes reviewing articles, blog posts, newsletters, documentation, or any written content that needs to follow Every's editorial standards. The agent will systematically check for title case in headlines, sentence case elsewhere, company singular/plural usage, overused words, passive voice, number formatting, punctuation rules, and other style guide requirements.

every-style-editor

by ratacat

This skill should be used when reviewing or editing copy to ensure adherence to Every's style guide. It provides a systematic line-by-line review process for grammar, punctuation, mechanics, and style guide compliance.

frontend-design

by ratacat

This skill should be used when creating distinctive, production-grade frontend interfaces with high design quality. It applies when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

frontend-design

by vipulgupta2048

Create distinctive, production-grade frontend interfaces with high design quality. Use when building or refining web components, pages, or apps (HTML/CSS/JS/React) with bold aesthetics, purposeful layouts, motion, and accessibility. Avoid generic AI-looking output.

brand-guidelines

by cosmonic-labs

Brand guidelines for Cosmonic and wasmCloud. Use this skill when creating visual content, presentations, websites, diagrams, or any materials that need to follow Cosmonic or wasmCloud brand standards. Includes an Excalidraw library for diagrams.

code-audit

by ArjenSchwarz

Parallel code audit combining simplification and design critique analysis. Spawns two subagents (code-simplifier and design-critic) to independently review the current directory, consolidates findings into a prioritised report, and offers to create Transit tasks for actionable items. Use when you want a broad quality review of a codebase, e.g. "audit this code", "review codebase quality", "find improvements", "code audit".

frontend-design

by MarcelLeon

创建具有高设计质量的独特、生产级前端界面。当用户要求构建 Web 组件、页面、工件、海报或应用程序时使用此技能（示例包括网站、落地页、仪表板、React 组件、HTML/CSS 布局，或为任何 Web UI 设置样式/美化时）。生成富有创意、精美的代码和 UI 设计，避免通用的 AI 美学。

ios-ux-prototype

by tddworks

Create interactive iOS/mobile app UX flow prototypes as HTML documents with realistic phone mockups. Use when: (1) Visualizing user journeys and navigation flows, (2) Creating mobile app wireframes, (3) Documenting screen-to-screen navigation patterns, (4) Presenting iOS UI designs with annotations, (5) Prototyping app architecture before implementation. Generates self-contained HTML files with iOS-native styling, phone frames, flow arrows, and callout annotations.

apple-hig-designer

by axiaoge2

Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.

Keycloak Theming Skill

by markus41

"Multi-tenant Keycloak authentication theming with realm-specific design systems"

Design Styles Skill

by markus41

"Access 263+ design styles with AI-optimized prompt keywords for frontend development"

Airtable Custom Interface Extensions

by victoriaplummer

Complete SDK reference for building Airtable Interface Extensions — models, hooks, components, field types, write patterns, and common pitfalls.

brand-guidelines

by smallnest

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

bear-ui-skills

by ihlamury

Bear's UI design system. Use when building interfaces inspired by Bear's aesthetic - light mode, Inter font, 4px grid.

ux-ui

by aviflombaum

UX/UI design principles for clean, intuitive interfaces. Use when designing layouts, improving usability, planning information architecture, or ensuring accessibility. Triggers on "user experience", "usability", "information architecture", "accessibility", "interaction design".

web-design

by aviflombaum

Web graphic design for interfaces, layouts, and visual systems. Use when designing landing pages, dashboards, hero sections, or applying design aesthetics (Bauhaus, Pop Art, Retro, Futuristic). Triggers on "design a", "visual design", "landing page", "color palette", "typography".

design-system-library

by nguyenthienthanh

"Design system selection and implementation helper. Detects and recommends UI libraries (MUI, Tailwind, shadcn/ui, etc.) based on project context."

graphic-design-fundamentals

by sandraschi

Graphic design expert covering typography, color theory, layout, and visual communication

figrefer

by Takazudo

Read the currently selected Figma element and work with it. Use when: (1) User says 'figrefer', 'figma refer', 'check my figma selection', (2) User wants to implement or analyze a design selected in Figma desktop app, (3) User says 'what am I selecting in figma', 'implement this figma design'