536 skills · sorted by relevance
Create Angular components and services with guidance on state management, forms, and navigation. Adapt implementation choices to the project's Angular version, and check the resulting code through tests and builds.
Create Python workflows for generating images from text, restyling existing pictures, and filling selected regions. Using HuggingFace Diffusers, the skill explains composition controls, style adapters, generation settings, and ways to reduce memory use.
Create clear educational diagrams for scientific concepts, physical structures, workflows, and data. Output SVG, a scalable vector image format, inside one standalone HTML file with consistent styling and automatic light and dark modes.
Build HTML/CSS pages using visual specifications from 54 established websites, including Stripe, Linear, and Vercel. Templates provide colors, typography, spacing, component styles, and layouts that adapt to different screen sizes.
Apply Anthropic's brand colors and typography to visual materials. The skill specifies heading and body fonts, background-aware text colors, and accents for shapes, with fallback fonts when Poppins and Lora are unavailable.
Applies coordinated colors and fonts to slides, documents, reports, and HTML landing pages. Choose from ten preset themes using a visual showcase, or request a custom theme based on a description and review it before application.
Organize colors, spacing, and typography into reusable design tokens, or shared style values. Generate CSS variables, define component states, check for hardcoded values, and create HTML presentations that follow the same brand rules.
Test browser interfaces through Chrome DevTools MCP, a connection that lets an agent inspect a live browser. Check screenshots, errors, network traffic, accessibility, and performance to diagnose problems and verify fixes.
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.
Create an HTML prototype of a social media analytics dashboard for creators. It uses consistent sample data to show platform metrics, follower growth, a top post, trending topics, and comments, with styling drawn from your design system.
Apply WordPress's official design system to themes and sites. Use design tokens, shared visual settings, along with typography and component patterns to guide how text and interface elements are styled.
Turn a song, podcast, or personal introduction into a Spotify-style now-playing card. Generate a single HTML file with CSS-drawn cover art, a progress bar, and playback-style icons for video overlays or personal homepages.
Create an X-style post card from supplied text or data, including engagement counts and light or dark styling. Produce a single HTML file for video overlays or content intended for image sharing.
Create or update Figma screens from code or written descriptions. Use design system components and design tokens, shared values for visual styling, to translate application pages into Figma designs.
Build web pages and interface components with a clear visual direction and working code. Shape typography, colors, layouts, and animation around the intended audience and purpose, with support for HTML/CSS/JS, React, and Vue implementations.
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.
Review HTML list structure so screen readers can identify lists and announce item counts. Find list items without valid containers, check custom accessibility roles, and guide fixes to markup used for navigation or styling.
Review JavaScript that changes a parent element’s appearance based on its children. Find opportunities to replace class toggling with CSS :has() rules, and explain how those rules express conditions involving child elements.
Find empty headings or headings containing only whitespace in rendered web pages. Guide fixes by adding descriptive text or removing unnecessary heading tags, helping screen reader users navigate a meaningful document structure.
Create a reusable design guide covering colors, typography, layout, and motion. Extract styles from existing sources or start from scratch, then turn the guide into instructions or code for supported video, slide, and design tools.
Style Three.js objects with realistic, cartoon, or custom materials. Choose material types, adjust textures and reflections, create glass or metal effects, and use shader code for custom appearance while considering rendering performance.
Create mathematical and geometric animations in Python with Manim Community Edition. Use guidance, examples, and scene templates to structure animations, display equations, plot graphs, control cameras, and render two-dimensional or three-dimensional scenes.
Build custom interactive charts, network diagrams, and maps with d3.js. Guides data-driven drawing, tooltips, zooming, animation, responsive sizing, and accessibility, with examples that work in plain JavaScript or frameworks such as React, Vue, and Svelte.
Turn a product URL, script, or brief into a launch or promotional video in HyperFrames. The workflow covers source capture, brand styling, storyboards, narration, music, and animated scenes, including tours that feature actual website screenshots.