739 skills · sorted by relevance
Style materials with Anthropic's brand colors and typography. Apply distinct heading and body fonts, choose text colors for the background, and use coordinated accent colors for shapes, with fallback fonts when Poppins or Lora are unavailable.
Build working web pages, application interfaces, and components with a clear visual direction. Shape typography, color, layout, and animation around the intended audience and purpose, producing coordinated design and code in HTML, CSS, JavaScript, React, or Vue.
Create shared UI design values from a brand color, including palettes, typography, and spacing. Export them as CSS, SCSS, or JSON, document component behavior, plan layouts for different screens, and prepare developer handoff materials.
Refine interface details such as rounded corners, shadows, typography, icon alignment, and animations. Use concrete implementation rules to improve visual consistency and interaction feedback, with changes documented in before-and-after tables.
Guide the colors, fonts, spacing, and charts used in websites, slides, PDFs, and reports. Includes format-specific typography rules, readability checks, and named color and font themes for documents and other non-web outputs.
Turn completed research, analysis, reports, or plans from the current session into a self-contained HTML artifact. A renderer controls layout, typography, and color, using structured content and a choice of two visual styles.
Design dashboards, admin panels, and app interfaces around users’ tasks and data. Establish screen layouts, colors, typography, and interaction states, then document reusable patterns to keep future interface work consistent.
Build working web pages, components, and application interfaces with a clear visual direction. The skill guides typography, color, spacing, motion, and responsive layouts that adapt to different screen sizes.
Review a branch, pull request, or uncommitted changes for interface problems involving accessibility, layout, text, typography, and color. The report distinguishes newly introduced issues, regressions, and existing problems, including effects on screens that use changed components.
Review an interface across accessibility, layout, writing, typography, color, and visual polish. It coordinates specialist skills, combines evidence from code and rendered screens, and produces one report with findings ranked by their impact on users.
Build web pages and interface components with a clear visual direction suited to their purpose and audience. The skill guides typography, color, layout, and animation, turning design choices into working frontend code.
Create sparse vertical posters from themes, articles, or photos, using paper textures, generous empty space, experimental typography, and one accent color. It also analyzes visual references and produces reusable style rules and image generation prompts.
Plan and build frontend interfaces through guided questions, visual references, and agreed design choices. Define colors, typography, and layout before coding, then implement small sections for review, with optional Google Stitch prototyping.
Design a two-panel page that gives visuals and supporting information distinct roles. This skill guides framing, spacing, typography, compact labels, and responsive stacking for product pages, portfolios, showcases, and technical presentations.
Build consistent web interfaces with Tailwind CSS using small styling classes. Apply layout, typography, responsive behavior, interaction states, and dark mode patterns, with examples for buttons, page sections, and reusable components.
Transform an article, case study, or brand story into a connected scrolling page. Choose scroll-controlled video, a real-time Three.js scene, or HTML with charts and typography, then organize the narrative into five to seven clear stages.
Create agency, studio, architecture, or portfolio websites using oversized typography, black-and-white sections, and documentary photography. Arrange project stories and irregular image collages alongside menus and FAQs designed for keyboard, touch, and reduced-motion use.
Design a technical web interface with dark surfaces, bright green signals, precise borders, and a prominent WebGL visualization. Coordinate split layouts, typography, controls, status labels, and restrained animation into a consistent visual system.
Turn rough screen ideas into clear prompts for generating user interfaces. Specify layout, typography, colors, spacing, and exact copy, then refine the results by changing one variable at a time to keep the design consistent.
Design airy pages with a luminous blue sky background, drifting cloud light, and white typography. It guides minimal navigation, subtle framing, buttons, logo rows, and gentle motion to create a calm, spacious composition.
Analyze a reference video's layout, typography, motion, and interactions to create a detailed prompt for rebuilding or adapting the experience. Include asset requirements, implementation choices, mobile behavior, and alternatives for users who prefer reduced motion.
Build working web pages, application interfaces, and components with a clear visual direction. Shape typography, color, layout, and animation around the intended audience and purpose, producing coordinated design and code in HTML, CSS, JavaScript, React, or Vue.
Configure UnoCSS and style interfaces with utility classes, small reusable styling instructions. Use project settings to define custom rules, shortcuts, themes, and presets for features such as icons, typography, and attribute-based styling.
Review a functionally complete interface before release and fix details in spacing, alignment, typography, wording, and interaction states. The skill also covers responsive layouts, accessibility, loading behavior, and code cleanup as part of the final quality pass.