1.2K skills · sorted by relevance
Build and update Paperclip interfaces using shared rules for colors, typography, status indicators, layouts, and interactions. Reuse existing components and keep the component catalog and showcase page aligned with new or changed interface elements.
Design new web pages, review existing interfaces, or analyze references from URLs and screenshots. The skill guides page structure, colors, typography, and interaction states while respecting an existing project's design system and implementation boundaries.
Build React or Next.js interfaces with specific rules for typography, color, spacing, and animation. The skill guides responsive layouts, loading and error states, and performance-conscious interactions while preserving the original v1 design behavior.
Refine interface components using Emil Kowalski's design engineering principles. Decide when animation helps, tune timing and interaction feedback, and review CSS choices with attention to performance, accessibility, and details such as tooltips and drag behavior.
Find Apple interface design guidance for planning apps across iOS, macOS, visionOS, watchOS, and tvOS. This catalogue entry points to a bundle of 14 skills covering design foundations, interface components, interaction patterns, inputs, and technologies.
Build AI agents that retain conversation history, user preferences, and useful interaction patterns with AgentDB. The skill covers persistent storage, meaning memories survive between sessions, plus retrieval, context management, and ReasoningBank integration.
Research current public information by checking original sources, recording relevant passages, dates, and URLs, and using browser interaction when needed. Cross-check important claims and clearly separate supported facts from inference.
Build AI agents that retain conversation history, user preferences, and useful interaction patterns with AgentDB. The skill covers persistent storage, meaning memories survive between sessions, plus retrieval, context management, and ReasoningBank integration.
Review stylesheets for a CSS reset or normalization layer that reduces differences in browser defaults. Check import order, framework provisions, and rendered layouts across screen sizes and interaction states, then suggest changes for a consistent styling foundation.
Audit CSS class names for inconsistency and ambiguity, then organize them using BEM, a convention that names components, their elements, and variations. Check the rendered interface across screen sizes and interaction states when reviewing changes.
Review CSS spacing, borders, and positioning for conversion to logical properties, which follow writing direction. Check rendered layouts across screen sizes and interaction states to support right-to-left languages and vertical text.
Identify and test critical workflows where APIs, services, databases, and interface components work together. Review normal behavior, important failures, and CI checks to find gaps that isolated unit tests can miss and keep those interactions continuously verified.
Review and implement dark mode using CSS variables and the user's operating system preference. Check fixed colors, contrast, responsive layouts, and interaction states, with guidance for adding a manual theme switch that remembers the user's choice.
Review repeated event listeners and consolidate them on a shared parent element. This approach, called event delegation, handles dynamically added items and reduces individual listeners while preserving the intended interaction behavior.
Review and fix Flexbox layouts with overflowing text, uneven item widths, or inconsistent spacing. Check rendered results across screen sizes and interaction states, then adjust sizing rules, spacing, and text overflow settings.
Review how a page loads CSS, the rules that control its appearance. Inline the styles needed for the first visible content and load the rest asynchronously, while checking layouts across screen sizes and interaction states.
Review component styles to find where CSS containment, which isolates rendering work, can limit layout recalculation and repainting. Identify suitable components and off-screen list items, then check their appearance across screen sizes and interaction states.
Review CSS animations for properties that cause costly layout updates, then suggest changes using transform and opacity. Check how effects look across screen sizes and interaction states, including support for users who prefer reduced motion.
Turn written descriptions or Mermaid code into diagrams showing processes, interactions, and data relationships. Choose a color theme and save both SVG files, which stay sharp when enlarged, and high-resolution PNG images.
Record website interactions with Playwright to create demo clips, app walkthroughs, and footage for Remotion videos. The guidance covers screen dimensions, action timing, visible click effects, and converting recorded WebM files to MP4.
Create diagrams in Artifacts that explain data flow, system interactions, and differences between options. Guides diagram structure and inline SVG, a vector image format embedded in HTML, with readable labels and support for light and dark themes.
Create charts and dashboards with a consistent approach to chart selection, color validation, labels, and interaction. Includes a palette checker and accessibility rules for readable visualizations in both light and dark modes.
Prepare a design handoff package for a developer using Claude Code. It documents screen layouts, visual details, interactions, and state requirements in a README.md, alongside reference files for implementation in the target app.
Plan HyperFrames videos so motion flows continuously between scenes. Match movement direction and speed across cuts, connect actions through visible causes, and verify scene boundaries while keeping each scene active through meaningful reveals or interactions.